[Solved]Javascript M Stuck Trying Understand Step 5 New Idea Things Programming Thank Dance Vii Q37120574
Javascript. I’m stuck trying to understand this. Fromstep #5 on. I am new to the idea all things Programming. Thankyou.
<!DOCTYPE html>
<html lang=”en”>
<head>
<!–
New Perspectives on HTML5 and CSS3, 7thEdition
Tutorial 10
Case Problem 2
Harpe Gaming Product Page
Author:
Date:
Filename: hg_game.html
–>
<title>Dance Off VII</title>
<meta charset=”utf-8″ />
<link href=”hg_base.css” rel=”stylesheet”/>
<link href=”hg_layout.css” rel=”stylesheet”/>
</head>
<body>
<header>
<img src=”hg_logo.png” alt=”HarpeGaming” />
<nav id=”top”>
<ul>
<li><a href=”#”>Find a Store</a></li>
<li><a href=”#”>SpecialDeals</a></li>
<li><a href=”#”>My Account</a></li>
</ul>
</nav>
<div><input type=”text”placeholder=”Find Games, Consoles, and More” name=”gSearch”id=”gSearch” />
<label for=”gSearch”><img src=”hg_search.png” alt=”search”/></label>
</div>
<nav id=”middle”>
<ul>
<li><a href=”#”>Xbox One</a></li>
<li><a href=”#”>PS4</a></li>
<li><a href=”#”>Xbox 360</a></li>
<li><a href=”#”>PS3</a></li>
<li><a href=”#”>PC</a></li>
<li><a href=”#”>WiiU</a></li>
<li><ahref=”#”>3DS</a></li>
<li><ahref=”#”>VR</a></li>
<li><ahref=”#”>Others</a></li>
</ul>
</nav>
</header>
<section>
<nav id=”left”>
<h1>Platforms</h1>
<ul>
<li><a href=”#”>Android</a></li>
<li><a href=”#”>Card & BoardGames</a></li>
<li><a href=”#”>Game Boy</a></li>
<li><a href=”#”>Nintendo</a></li>
<li><ahref=”#”>iPad®</a></li>
<li><ahref=”#”>iPhone®</a></li>
<li><ahref=”#”>iPod®</a></li>
<li><a href=”#”>Linux</a></li>
<li><a href=”#”>Macintosh</a></li>
<li><ahref=”#”>PC</a></li>
<li><a href=”#”>PlayStation</a></li>
<li><a href=”#”>Sega</a></li>
<li><a href=”#”>Sony</a></li>
<li><a href=”#”>Windows</a></li>
<li><a href=”#”>Xbox</a></li>
</ul>
<h1>ESRBRatings</h1>
<ul>
<li><a href=”#”>EarlyChildhood</a></li>
<li><a href=”#”>Everyone</a></li>
<li><a href=”#”>Everyone 10+</a></li>
<li><a href=”#”>Teen</a></li>
<li><a href=”#”>Mature</a></li>
<li><ahref=”#”>None</a></li>
</ul>
<h1>Condition</h1>
<ul>
<li><a href=”#”>New</a></li>
<li><a href=”#”>Pre-Owned</a></li>
<li><a href=”#”>Refurbished</a></li>
<li><ahref=”#”>Download</a></li>
</ul>
</nav>
</section>
<footer>
<p>Harpe Gaming ©2018 All Rights Reserved</p>
</footer>
</body>
</html>
TEXTBOOK
Use your editor to open the hg_game_txt.html andhg_report_txt.js files from the html10 c case2 folder.Enter your name and the date in the comment section of each file,and save them as hg_game.html and hg_report.js respectively.
2. Go to the hg_game.html file in your editor. Directly above theclosing </head> tag, insert
script elements to link the page to the hg_product.js andhg_report.js files in that order. Defer the loading and running ofboth script files until after the page has loaded.
3. Scroll down the document and insert an empty article element andan empty aside element directly above the closing </section>tag. The article element will contain information about the game.The aside element will contain a list of customer reviews.
4. Save your changes to the file, and then open the hg_product.jsfile in your editor. Take some time to review the variables andvalues stored in the file but do not make any changes to thefile content.
5. Go to the hg_report.js file in your editor. First, you writeinformation about the game that will be displayed in the web page.Declare a variable named gameReport. Within the gameReportvariable, store the following HTML code
<h1>title</h1>
<h2>By: manufacturer</h2>
<img src=”hg_id.png” alt=”id” id=”gameImg” />
<table>
<tr><th>ProductID</th><td>id</td></tr>
<tr><th>ListPrice</th><td>price</td></tr>
<tr><th>Platform</th><td>platform</td></tr>
<tr><th>ESRBRating</th><td>esrb</td></tr>
<tr><th>Condition</th><td>condition</td></tr>
<tr><th>Release</th><td>release</td></tr>
</table>
summary
where title, manufacturer, id, price, platform, esrb, condition,release and summary
use the values from corresponding variables in the hg_product.jsfile.
6. Display the value of the gameReport variable in the inner HTMLof the first (and only) articleelement in the document. (Hint: Usethe getElementsByTagName() method, referencing the first item inthe array of article elements.)
7. Next, you write the information from the customer ratings. Startby calculating the average customer rating of the game. Declare avariable named ratingsSum setting its initial value to 0.
8. Declare a variable named ratingsCount equal to the length of theratings array.
9. Create a for loop to loop through the contents of the ratingsarray. Each time through the loop, add the value of current ratingsvalue to the value of the ratingsSum variable.
10. After the for loop, declare the ratingsAvg variable, settingits value equal to the value of the ratingsSum variable divided bythe value of ratingsCount.
11. Declare a variable named ratingReport. Set its initial value tothe text string
<h1>Customer Reviews</h1>
<h2> average out of 5 stars (count reviews)</h2>
where average is the value of the ratingsAvg variable and count isthe value of ratingsCount.
12. Next, you display the content of the first three customerreviews. Create a for loop in which the counter goes from 0 to 2 insteps of 1., Within the for loop, insert the commands described inSteps a through c:
a. Add the following HTML code to the value of the ratingReportvariable
div class=”review”>
<h1>title</h1>
<table>
<tr><th>By</th><td>author</td></tr>
<tr><th>ReviewDate</th><td>date</td></tr>
<tr><th>Rating</th><td>
where title is the value of the ratingTitles array item for currentreview, author is the value
of the current ratingAuthors array item, and date is the value ofthe current ratingDates item.
b. Each customer rates the game on a scale of 1 to 5 stars. Seanwould like to have the stars displayed graphically. Add a nestedfor loop where the counter goes from 1 up to the value of thecurrent customer rating of the game in increments of one. Each timethrough the nested for loop, add the following HTML code to thevalue of the ratingReport variable:
<img src=”hg_star.png” />
c. Directly after the nested for loop, but still within the outerfor loop, insert commands to add the following HTML code to thevalue of the ratingReport variable
</td></tr></table>
summary
</div>
where summary is the value from the ratingSummaries array for thecurrent customer review.
13. Write the value of the ratingReport variable to the inner HTMLof the first and only aside element in the document. (Hint: As youdid with the article element in Step 6, use thegetElementsByTagName() method and reference the first item from thearray of aside elements.)
14. Document your code with informative comments throughout, andthen save the file.
15. Open the hg_game.html file in your browser. Verify that thepage shows the game summary and contents of the first threecustomer reviews. The page should also correctly calculate anaverage customer rating of 3.79 for the Dance Off game based on atotal of 19 customer reviews.
Expert Answer
Answer to Javascript. I’m stuck trying to understand this. From step #5 on. I am new to the idea all things Programming. Thank you… . . .
OR
