NEED HELP DEBUGGING THE FOLLOW JS CODE JS CODE /* JavaScript 7th Edition Chapter 3 Project 03-05 Application to generate a horizontal bar chart Author: Date: Filename: project03-05.js */ // Array of phone models sold by the company let phones = ("Photon 6E", "Photon 6X", "Photon 7E", "Photon 7X", "Photon 8P"); // Units sold in the previous quarter let sales = (10281, 12255, 25718, 21403, 16142); // Variable to calculate total sales let totalSales = 0; // Use the forEach() method to sum the sales for each phone model and add it to the totalSales variable sales.forEach(addtoTotal); // For loop to generate bar chart of phone sales for (let i = 1; i <= phones.length; i++) { let barChart = ""; // Variable to store HTML code for table cells used to create bar chart // Calculate the percent of total sales for a particular phone model let barPercent = 100*sales/totalSales; let cellTag; // Variable that will define the class of td elements used in creating the bar chart cells. // Determine the table cell based on the value of the phone model switch (phones[i]) { case "Photon 6E" cellTag = ""; break; case "Photon 6X" cellTag = ""; break; case "Photon 7E" cellTag = ""; break; case "Photon 7X" cellTag = ""; break; case "Photon 8P" cellTag = ""; break; } // Table cell containing information on phone and total sales (formatted using a thousands-separator) barChart += "" + phones[i] + " (" + formatNumber(sales[i]) + ")"; // For loop to create a table cell, 1 for each percentage value in the barPercent variable for (let j = 0; j <= barPercent; j++) { barChart += cellTag + ""; } barChart += ""; // Insert the bChart HTML code into first tbody element in the web document document.getElementsByTagName("tbody").insertAdjacentHTML("beforeEnd", barChart); } // Callback function that adds the value of each array element to the totalSales variable function addToTotal(arrValue) { totalSales += arrValue; } // Function that takes a number value and returns it as a text string with a thousands separator function formatNumber(value) { return value.toLocaleString(); HTML CODE Hands-on Project 3-3 Hands-on Project 3-5 Cell Phone Sales Units Sold
NEED HELP DEBUGGING THE FOLLOW JS CODE
JS CODE
/* JavaScript 7th Edition
Chapter 3
Project 03-05
Application to generate a horizontal bar chart
Author:
Date:
Filename: project03-05.js
*/
// Array of phone models sold by the company
let phones = ("Photon 6E", "Photon 6X", "Photon 7E", "Photon 7X", "Photon 8P");
// Units sold in the previous quarter
let sales = (10281, 12255, 25718, 21403, 16142);
// Variable to calculate total sales
let totalSales = 0;
// Use the forEach() method to sum the sales for each phone model and add it to the totalSales variable
sales.forEach(addtoTotal);
// For loop to generate bar chart of phone sales
for (let i = 1; i <= phones.length; i++) {
let barChart = ""; // Variable to store HTML code for table cells used to create bar chart
// Calculate the percent of total sales for a particular phone model
let barPercent = 100*sales/totalSales;
let cellTag; // Variable that will define the class of td elements used in creating the bar chart cells.
// Determine the table cell based on the value of the phone model
switch (phones[i]) {
case "Photon 6E" cellTag = "<td class='group1'>"; break;
case "Photon 6X" cellTag = "<td class='group2'>"; break;
case "Photon 7E" cellTag = "<td class='group3'>"; break;
case "Photon 7X" cellTag = "<td class='group4'>"; break;
case "Photon 8P" cellTag = "<td class='group5'>"; break;
}
// Table cell containing information on phone and total sales (formatted using a thousands-separator)
barChart += "<tr><th>" + phones[i] + " (" + formatNumber(sales[i]) + ")</th>";
// For loop to create a table cell, 1 for each percentage value in the barPercent variable
for (let j = 0; j <= barPercent; j++) {
barChart += cellTag + "</td>";
}
barChart += "</tr>";
// Insert the bChart HTML code into first tbody element in the web document
document.getElementsByTagName("tbody").insertAdjacentHTML("beforeEnd", barChart);
}
// Callback function that adds the value of each array element to the totalSales variable
function addToTotal(arrValue) {
totalSales += arrValue;
}
// Function that takes a number value and returns it as a text string with a thousands separator
function formatNumber(value) {
return value.toLocaleString();
HTML CODE
<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 7th Edition
Chapter 3
Hands-on Project 3-5
Author:
Date:
Filename: project03-05.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-05_txt.js" defer></script>
</head>
<body>
<header>
<h1>
Hands-on Project 3-5
</h1>
</header>
<article>
<table>
<caption>Cell Phone Sales</caption>
<thead>
<tr><td>Units Sold</td></tr>
</thead>
<tbody></tbody>
</table>
</article>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 3 steps with 1 images
