Need help with the following code see images attached html code

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

Need help with the following code see images attached

html code

<!DOCTYPE html>
<html>
<head>
   <!--
      JavaScript 7th Edition
      Chapter 3
      Hands-on Project 3-4

      Author: 
      Date:   

      Filename: project03-04.html
   -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <title>Hands-on Project 3-3</title>
   <link rel="stylesheet" href="styles/styles.css" />
   <script src="js/project03-04.js" defer></script>
</head>

<body>
   <header>
      <h1>
         Hands-on Project 3-4
      </h1>
   </header>

   <article>
      <h2>Customer Reviews of <em>Dance Off ver. 9</em></h2>
   </article>
</body>
</html>

project03-04_txt.js X
5
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
"/
view
BG
}
ding Language Settings TOOIS
Application to write a list of customer reviews
Author:
Date:
Filename: project03-04.js
Plugins window
515
let reviewers = ["WillHa85", "GoldFry26", "Mittens41", "Tompkins8"];
let reviewType = ["P", "N", "", ""]
let stars = [5, 2, 1, 4];
let reviewDates = ["11/18/2024", "11/17/2024", "11/15/2024", "11/10/2024"];
let reviews = [
■
IM
"I've owned all of the Dance Off games from the beginning. I have lost 6 pounds since I started playing.",
"A so-so release of this well-established game. Where this release fails is in the choreography. Many of the moves follow predictable patterns. I hope the next release improves the choreography .",
"The installation was buggy and kept crashing my gaming console. I spent several hours on tech support with no solution to my problem. I finally returned it and got my money back. I wish I could give it a zero star rating.",
"The latest version of Dance Off improves upon the 8th Edition only slightly; still is one of the best dance-style games on the market.",
-];
let reviewTitles = ["My Favorite Workout Game", "Poor Choreography", "Buggy with Poor Tech Support", "Nice Improvement"];
Transcribed Image Text:project03-04_txt.js X 5 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 "/ view BG } ding Language Settings TOOIS Application to write a list of customer reviews Author: Date: Filename: project03-04.js Plugins window 515 let reviewers = ["WillHa85", "GoldFry26", "Mittens41", "Tompkins8"]; let reviewType = ["P", "N", "", ""] let stars = [5, 2, 1, 4]; let reviewDates = ["11/18/2024", "11/17/2024", "11/15/2024", "11/10/2024"]; let reviews = [ ■ IM "I've owned all of the Dance Off games from the beginning. I have lost 6 pounds since I started playing.", "A so-so release of this well-established game. Where this release fails is in the choreography. Many of the moves follow predictable patterns. I hope the next release improves the choreography .", "The installation was buggy and kept crashing my gaming console. I spent several hours on tech support with no solution to my problem. I finally returned it and got my money back. I wish I could give it a zero star rating.", "The latest version of Dance Off improves upon the 8th Edition only slightly; still is one of the best dance-style games on the market.", -]; let reviewTitles = ["My Favorite Workout Game", "Poor Choreography", "Buggy with Poor Tech Support", "Nice Improvement"];
t for web warriors
1. Use your code editor to open the project03-04_txt.html and project03-04_txt.js files from the js03project04 folder. Enter your name and the date in the comment section of each file and save them as project03-04.html and project03-04.js, respectively.
2. Go to the project03-04.html file in your code editor and in the head section add a script element to load the project03-04.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes.
3. Go to the project03-04.js file in your code editor. At the bottom of the file, insert a function named starlmages() with a single parameter named rating. The purpose of the function is to generate the HTML tags of several star images based on the value of the rating parameter.
4. Within the starlmages() function add the following:
a. Declare a variable named image Text, setting its initial value to an empty text string.
b. Create a for loop with a counter that goes from 1 up to less than or equal to the value of the rating parameter, increasing the counter by 1 with each iteration.
c. In the for loop, add the text "<img src='star.png' alt= ">" to the value of the image Text variable with each iteration.
d. After the for loop, add a statement to return the value of image Text from the function.
5. Create a for loop with the counter variable ranging from 0 up to less than the length of the reviewers array, increasing the counter by 1 with each iteration. In this for loop you will generate the HTML code for a table that contains the review from each customer.
6. For each iteration within the for loop, do the following:
a. Declare a variable named reviewCode, setting its initial value to an empty text string.
b. Insert an else if statement that adds one of three possible text strings to the value of reviewCode: if the value of the reviewType for the current element in the array is equal to "P" then add the text string "<table class = 'prime">", else if the value of the reviewType for the
current element is equal to "N" then add the text string,"<table class='new'>" else add the text string, "<table>".
c. Add the following HTML code to the value of the reviewCode variable. (Hint: You may find it easier to break this code into several text strings that you add separately using the += assignment operator.)
Quick Tour Print Search Annotations Accessibility Bookmark
<caption>reviewTitles [1] </caption>
<tr><th>By</th><td>reviewers [1] </td></tr>
PREVIOUS PAGE
Review Questions
<tr><th>Review Date</th><td>reviewDates [1] </td></tr>
<tr><td colspan= '2'>reviews [1] </td></tr>
</table>
where review Titles [], reviewers [], reviewDates [], and reviews [] are the values from the reviewTitles, reviewers, reviewDates, and reviews arrays for the current element in the iteration.
d. Use the insertAdjacentHTML() method to insert the value of the reviewCode variable into the first (and only) <article> tag in the document, placing it directly before the closing tag. (Hint: Use the getElementsByTagName() method to reference the collection of article
elements in the document.)
7. Save your changes to the file and then load project03-04.html in your web browser, verify that all four reviews are shown as indicated in Figure 3-21.
NEXT PAGE >
Case Projects
Transcribed Image Text:t for web warriors 1. Use your code editor to open the project03-04_txt.html and project03-04_txt.js files from the js03project04 folder. Enter your name and the date in the comment section of each file and save them as project03-04.html and project03-04.js, respectively. 2. Go to the project03-04.html file in your code editor and in the head section add a script element to load the project03-04.js file, deferring the loading of the JavaScript source file until the entire HTML file is loaded. Study the contents of the HTML file and save your changes. 3. Go to the project03-04.js file in your code editor. At the bottom of the file, insert a function named starlmages() with a single parameter named rating. The purpose of the function is to generate the HTML tags of several star images based on the value of the rating parameter. 4. Within the starlmages() function add the following: a. Declare a variable named image Text, setting its initial value to an empty text string. b. Create a for loop with a counter that goes from 1 up to less than or equal to the value of the rating parameter, increasing the counter by 1 with each iteration. c. In the for loop, add the text "<img src='star.png' alt= ">" to the value of the image Text variable with each iteration. d. After the for loop, add a statement to return the value of image Text from the function. 5. Create a for loop with the counter variable ranging from 0 up to less than the length of the reviewers array, increasing the counter by 1 with each iteration. In this for loop you will generate the HTML code for a table that contains the review from each customer. 6. For each iteration within the for loop, do the following: a. Declare a variable named reviewCode, setting its initial value to an empty text string. b. Insert an else if statement that adds one of three possible text strings to the value of reviewCode: if the value of the reviewType for the current element in the array is equal to "P" then add the text string "<table class = 'prime">", else if the value of the reviewType for the current element is equal to "N" then add the text string,"<table class='new'>" else add the text string, "<table>". c. Add the following HTML code to the value of the reviewCode variable. (Hint: You may find it easier to break this code into several text strings that you add separately using the += assignment operator.) Quick Tour Print Search Annotations Accessibility Bookmark <caption>reviewTitles [1] </caption> <tr><th>By</th><td>reviewers [1] </td></tr> PREVIOUS PAGE Review Questions <tr><th>Review Date</th><td>reviewDates [1] </td></tr> <tr><td colspan= '2'>reviews [1] </td></tr> </table> where review Titles [], reviewers [], reviewDates [], and reviews [] are the values from the reviewTitles, reviewers, reviewDates, and reviews arrays for the current element in the iteration. d. Use the insertAdjacentHTML() method to insert the value of the reviewCode variable into the first (and only) <article> tag in the document, placing it directly before the closing tag. (Hint: Use the getElementsByTagName() method to reference the collection of article elements in the document.) 7. Save your changes to the file and then load project03-04.html in your web browser, verify that all four reviews are shown as indicated in Figure 3-21. NEXT PAGE > Case Projects
Expert Solution
trending now

Trending now

This is a popular solution!

steps

Step by step

Solved in 2 steps

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY