Objectives

In this assignment you will:

Demonstrate skills/techniques learned from earlier assignments.

Demonstrate the use of document.getElementById to read elements from the DOM.

Demonstrate the use of the textContent property to read the contents of an element.

Demonstrate the use of the Number() method to convert a string into a number.

Demonstrate the use of the textContent property to change the contents of an element.

Solve this Problem

Write a JavaScript program that solves the following problem:

Youie buys 3 items at the campus bookstore. A backpack, a calculator, and a textbook.

The backpack costs $56.99. The calculator costs $104.89. The textbook costs $51.97.

The bookstore charges 13% sales tax.

What is the subtotal amount for the 3 items?

What is the sales tax amount for the 3 items?

What is the total cost for the 3 items after the sales tax is added to the subtotal?

HTML for this Assignment

Use the following HTML for this assignment. Copy this HTML and paste it into your HTML file.

Replace "Your name here" (highlighted in yellow below) with your name.

                        
  
Changing the DOM by ID: getElementById  
  
Introduction  
In this assignment you will use JavaScript to read 3 item prices from the DOM.   Calculate a subtotal, the sales tax amount and the total cost.  Then you will update the DOM with the calculated values.  
  
In this assignment you will:  
  
Demonstrate skills/techniques learned from earlier assignments.  
Demonstrate the use of document.getElementById to read and change elements from the DOM.  
Demonstrate the use of textContents to read and change the text contents of an element in the DOM.  
  
  
  
Purchased Items                     
 
 
 
Item Name
 
Quantity
 
Item Price
 
 
 
 
 
Backpack
1
56.99
 
Calculator
1
104.89
 
Textbook
1
51.97
 
 
 
Subtotal
 
Tax
 
Total Cost
 
 
  
  
      

Instructions

In this assignment, you will read several HTML elements from the provided HTML file using getElementById method.

Then you will read the text content from the HTML elements using "textContent", convert the text into numbers using the Number() property.

Like in the previous assignments, you will do some calculations.

Unlike previous assignments, you will NOT output anything to the console. You will use "textContent" to change the contents of the DOM.

This program needs to be written as functions. Write small functions for this assignment. Break this program down into several functions.

There must be no variables declared or used in the global scope.

The program must meet these criteria:

Must follow the standards followed in previous programs: include meaningful comments. Use strict mode to enforce good coding practices. Variables are initialized at the beginning of each function. Uses "const" and "let" correctly. It does not use "var" to initialize variables. Variables are kept out of global scope by compartmentalizing them inside functions. The program must be well-formatted and easy to read and follow the Input, Processing, Output (IPO) pattern. The program must be broken up into small functions.

Use document.getElementById to read the prices of the 3 input elements from the DOM: back-price, calc-price, and text-price.

Use document.getElementById to read the prices of 3 output elements from the DOM: sub-total, tax-amount, and total.

Use the textContent property of the elements to read the text contents from those 3 input DOM elements.

Convert the text content from the 3 DOM input elements into numbers using the Number() method.

Calculate the sum of the item prices.

Calculate the amount of sales tax.

Calculate the total price.

Use the textContent property of the 3 output elements to output the subtotal, sales tax, and total price into the DOM. Use template literals to add a "$" to the output values. FYI, we'll soon learn a better way to format currency.

This is my code but it's not running, can you check it for me?

function declarePrices() {

let backPrice = Number(document.getElementById("back-price").textContent); // Used method "Number" to converts "textContent" into a number.

let calcPrice = Number(document.getElementById("calc-price").textContent);

let textPrice = Number(document.getElementById("text-price").textContent);

let pricestax = [backPrice, calcPrice, textPrice];

return pricestax;

}

// I used array to declare all the items price, so I can use the for loop to calc the sum

function prices(){

const itemsPrice = [56.99, 104.89, 51.97];

return prices;

}

function count() {

const pricescount = prices().length;

return pricescount;

}

// I used for loop to calc the subtotal.

function calcsubTotal(){

let subTotal = 0;

for (i = 0, i < prices.length, i++){

subTotal = subTotal + declarePrices()[i];

}

return subTotal;

}

// Calc sales tax

function calcsalesTax(){

const salestaxRate = 0.13;

let salesTax = 0;

salesTax = calcsubTotal() * salestaxRate;

return salesTax;

}

// Calc final cost

function calcfinalCost(){

let finalcostAmount = 0;

finalcostAmount = calcsubTotal() + calcsalesTax();

return finalcostAmount;

}

function printResults(){

let sumoftheitemPrices = calcsubTotal();

let salestaxAmount = calcsalesTax();

let total = calcfinalCost();

console.log("Sum of the item prices: ${sumoftheitemPrices}");

console.log("Sales tax: ${salestaxAmount}");

console.log("Total price: ${total}");

}

printResults();