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 the textContent property to output values to the DOM.
Solve this Problem
Youie buys 3 items at the campus bookstore. A backpack, a calculator, and a textbook.
The bookstore charges 13% sales tax.
What is the subtotal amount for the 3 items?
What is the total cost for the 3 items after the sales tax is added to the subtotal?
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.
Calculate the sum of the item prices.
Calculate the amount of sales tax.
Calculate the total price.
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.
Delivering a high-quality product at a reasonable price is not enough anymore.
That’s why we have developed 5 beneficial guarantees that will make your experience with our service enjoyable, easy, and safe.
You have to be 100% sure of the quality of your product to give a money-back guarantee. This describes us perfectly. Make sure that this guarantee is totally transparent.
Read moreEach paper is composed from scratch, according to your instructions. It is then checked by our plagiarism-detection software. There is no gap where plagiarism could squeeze in.
Read moreThanks to our free revisions, there is no way for you to be unsatisfied. We will work on your paper until you are completely happy with the result.
Read moreYour email is safe, as we store it according to international data protection rules. Your bank details are secure, as we use only reliable payment systems.
Read moreBy sending us your money, you buy the service we provide. Check out our terms and conditions if you prefer business talks to be laid out in official language.
Read more
Recent Comments