Description
Demonstrate skills/techniques learned from earlier assignments.
Demonstrate use of a conditional statement,
document.readyState,
and a
DOMContentLoaded event listener
to wait for the DOM to load before running the program.
-
Demonstrate the use of
document.getElementsByClassName
to read elements from the DOM. -
Demonstrate looping through a
node list
to process each
node
.
Demonstrate the use of the
textContent
property to output values to the DOM.
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?
Set Up This Assignment
You will create new files for this assignment.
Follow these steps to create the files for this assignment:
Create a
“classname.html”
file in the ”
week5
” folder. ?This file will be the main page for this assignment.
Create a ”
classname.js
” file in the ”
week5/js
” folder. ?This file will contain all the JavaScript for this assignment.
HTML for this Assignment
Use this 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.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Changing the DOM by Class: getElementsClassName</title>
<meta name=”description” content=”This assignment will use JavaScript to read the purchase.”>
<meta name=”author” content=”Your name here”>
<link rel=”icon” type=”image/png” href=”//documents.highline.edu/highline/favicon.png”>
<!– link to external CSS file –>
<link rel=”stylesheet” href=”//chelan.highline.edu/~tpollard/styles/styles212.css”>
</head>
<body>
<!– Content of the page goes here. –>
<main>
<h1>Changing the DOM by ID: getElementById</h1>
<section class=”intro”>
<h2>Introduction</h2>
<p>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.
</p>
<p>In this assignment you will:</p>
<ul>
<li>Demonstrate skills/techniques learned from earlier assignments.</li>
<li>Demonstrate the use of document.getElementsByClassName to read the prices, and getElementById to change elements from the DOM.</li>
<li>Demonstrate the use of textContent to read and change the text contents of an element in the DOM.</li>
</ul>
</section>
<section class=””>
<h2>Purchased Items</h2>
<table>
<thead>
<tr>
<th scope=”col”>Item Name</th>
<th class=”quantity” scope=”col”>Quantity</th>
<th class=”price-heading” scope=”col”>Item Price</th>
<th></th>
</tr>
</thead>
<tbody>
<tr><td>Backpack</td><td class=”quantity”>1</td><td id=”back-price” class=”price”>56.99</td><td></td></tr>
<tr><td>Calculator</td><td class=”quantity”>1</td><td id=”calc-price” class=”price”>104.89</td><td></td></tr>
<tr><td>Textbook</td><td class=”quantity”>1</td><td id=”text-price” class=”price”>51.97</td><td></td></tr>
</tbody>
<tfoot>
<tr><td></td><td></td><td id=”sub-total” class=”price-totals”></td><td class=””>Subtotal</td></tr>
<tr><td></td><td></td><td id=”tax-amount” class=”price-totals”></td><td class=””>Tax</td></tr>
<tr><td></td><td></td><td id=”total” class=”price-totals”></td><td class=””>Total Cost</td></tr>
</tfoot>
</table>
</section>
</main>
<!– link to external JS file –>
<script src=”js/classname.js”></script>
</body>
</html>
Instructions
In this assignment, you will read several HTML elements from the provided HTML file using
getElementsByClassName
method – which reads several elements at the same time.
You will loop through the elements, use textContent to get the text content from each element and convert the text to numbers.
Like in the previous assignments, you will do some calculations.
You will
NOT output anything to the console
. ?You will use ”
textContent
” to change the text contents of the
DOM
elements.
This program needs to be written as small reusable 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. 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 is well-formatted and easy to read. ?The program uses small reusable functions.
The program must wait until the DOM is loaded using code based on the example given on this page:
Waiting for the Page to Load
Use
document.getElementsByClassName
to read the 3 elements that have a
class attribute
of ”
price
” from the DOM.
Loop through the elements and use the
textContent
property of each element to read the text content.
Convert the text content from the 3 DOM 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
getElementById
and the
textContent
property to output the results to the DOM
:
Output the subtotal into the text content of the element with the id of
sub-total
,
Output the sales tax amount into the text content of the element with the id of
tax-amount,
Output the total cost into the text content of the element with the id of
total.
