{ "key_pair_value_system": true, "answer_rating_count": "", "question_feedback_html": { "html_star": "", "html_star_feedback": "" }, "answer_average_rating_value": "", "answer_date_js": "2024-09-07T23:15:41-04:00", "answer_date": "2024-09-07 23:15:41", "is_docs_available": null, "is_excel_available": null, "is_pdf_available": null, "count_file_available": 0, "main_page": "student_question_view", "question_id": "9567284", "url": "\/study-help\/questions\/objectives-in-this-assignment-you-will-demonstrate-skillstechniques-learned-from-9567284", "question_creation_date_js": "2024-09-07T23:15:41-04:00", "question_creation_date": "Sep 07, 2024 11:15 PM", "meta_title": "[Solved] Objectives In this assignment you will: D | SolutionInn", "meta_description": "Answer of - Objectives In this assignment you will: Demonstrate skills\/techniques learned from earlier assignments. Demonstrate th | SolutionInn", "meta_keywords": "objectives,assignment,will,demonstrate,skills\/techniques,learned,earlier,assignments,documentgetelementbyid,read,elements,dom", "question_title_h1": "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", "question_title": "Objectives In this assignment you will: Demonstrate skills\/techniques learned from earlier assignments.", "question_title_for_js_snippet": "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 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 I want my code written in function and don't do the array, but also output into the DOM Here is my code It's still error use strict Get the elements from the DOM using getElementById function declarePrices() let backPrice document getElementById( back price ) textContent let calcPrice document getElementById( calc price ) textContent let textPrice document getElementById( text price ) textContent let pricesTax backPrice, calcPrice, textPrice return pricesTax function salestaxRate() const salestaxRate 0 13 return salestaxRate Calculate the subtotal function calcsubTotal() const subtotal declarePrices() 0 declarePrices() 1 declarePrices() 2 return subtotal Calc sales tax function calcsalesTax() let salesTax 0 salesTax calcsubTotal() salestaxRate() return salesTax Calc final cost function calcfinalCost() let finalcostAmount 0 finalcostAmount calcsubTotal() calcsalesTax() return finalcostAmount const subTotalElem document getElementById( sub total ) const taxAmountElem document getElementById( tax amount ) const totalElem document getElementById( total ) Update the elements with the calculated values subTotalElem textContent $ subtotal toFixed(2) taxAmountElem textContent $ taxAmount toFixed(2) totalElem textContent $ total toFixed(2) ", "question_description": "

Objectives<\/p>

In this assignment you will:<\/p>

Demonstrate skills\/techniques learned from earlier assignments.<\/p>

Demonstrate the use of document.getElementById<\/strong> to read elements from the DOM.<\/p>

Demonstrate the use of the textContent<\/strong> property to read<\/strong> the contents of an element.<\/p>

Demonstrate the use of the Number() <\/strong>method to convert a string into a number.<\/p>

Demonstrate the use of the textContent<\/strong> property to change<\/strong> the contents of an element.<\/p>

<\/p>

<\/p>

Solve this Problem<\/p>

Write a JavaScript program that solves the following problem:<\/p>

Youie buys 3 items at the campus bookstore. A backpack, a calculator, and a textbook.<\/em><\/strong><\/p>

The backpack costs $56.99. The calculator costs $104.89. The textbook costs $51.97.<\/em><\/strong><\/p>

The bookstore charges 13% sales tax.<\/em><\/strong><\/p>

What is the subtotal amount for the 3 items?<\/em><\/strong><\/p>

What is the sales tax amount for the 3 items?<\/em><\/strong><\/p>

What is the total cost for the 3 items after the sales tax is added to the subtotal?<\/em><\/strong><\/p>

<\/p>

HTML for this Assignment<\/p>

Use the following HTML for this assignment. Copy this HTML and paste it into your HTML file.<\/p>

Replace \"Your name here<\/strong>\" (highlighted in yellow below) with your name.<\/p> 

<\/strong> <\/strong> <\/strong>  <\/strong>  <\/strong>  Changing the DOM by ID: getElementById<\/title><\/strong> <strong> <meta name=\"description\" content=\"This assignment will use JavaScript to read the purchase.\"><\/strong> <strong> <meta name=\"author\" content=\"Your name here\"><\/strong> <strong> <link rel=\"icon\" type=\"image\/png\" href=\"https:\/\/documents.highline.edu\/highline\/favicon.png\"><\/strong> <strong> <!-- link to external CSS file --><\/strong> <strong> <link rel=\"stylesheet\" href=\"\/\/chelan.highline.edu\/~tpollard\/styles\/styles212.css\"><\/strong> <strong><\/head><\/strong> <strong><body><\/strong> <strong> <!-- Content of the page goes here. --><\/strong> <strong> <main><\/strong> <strong> <h1>Changing the DOM by ID: getElementById<\/h1><\/strong> <strong> <section><\/strong> <strong> <h2>Introduction<\/h2><\/strong> <strong> <p>In this assignment you will use JavaScript to read 3 item prices from the DOM. <\/strong> <strong> Calculate a subtotal, the sales tax amount and the total cost.<\/strong> <strong> Then you will update the DOM with the calculated values.<\/strong> <strong> <\/p><\/strong> <strong> <p>In this assignment you will:<\/p><\/strong> <strong> <ul><\/strong> <strong> <li>Demonstrate skills\/techniques learned from earlier assignments.<\/li><\/strong> <strong> <li>Demonstrate the use of document.getElementById to read and change elements from the DOM.<\/li><\/strong> <strong> <li>Demonstrate the use of textContents to read and change the text contents of an element in the DOM.<\/li><\/strong> <strong> <\/ul><\/strong> <strong> <\/section><\/strong> <strong> <section><\/strong> <strong> <h2>Purchased Items<\/h2><\/strong> <strong> <table><\/strong> <strong> <thead><\/strong> <strong> <tr><\/strong> <strong> <th scope=\"col\">Item Name<\/th><\/strong> <strong> <th scope=\"col\">Quantity<\/th><\/strong> <strong> <th scope=\"col\">Item Price<\/th><\/strong> <strong> <th><\/th><\/strong> <strong> <\/tr><\/strong> <strong> <\/thead><\/strong> <strong> <tbody><\/strong> <strong> <tr><td>Backpack<\/td><td class=\"quantity\">1<\/td><td id=\"back-price\" class=\"price\">56.99<\/td><td><\/td><\/tr><\/strong> <strong> <tr><td>Calculator<\/td><td class=\"quantity\">1<\/td><td id=\"calc-price\" class=\"price\">104.89<\/td><td><\/td><\/tr><\/strong> <strong> <tr><td>Textbook<\/td><td class=\"quantity\">1<\/td><td id=\"text-price\" class=\"price\">51.97<\/td><td><\/td><\/tr><\/strong> <strong> <\/tbody><\/strong> <strong> <tfoot><\/strong> <strong> <tr><td><\/td><td><\/td><td id=\"sub-total\" class=\"price-totals\"><\/td><td class=\"\">Subtotal<\/td><\/tr><\/strong> <strong> <tr><td><\/td><td><\/td><td id=\"tax-amount\" class=\"price-totals\"><\/td><td class=\"\">Tax<\/td><\/tr><\/strong> <strong> <tr><td><\/td><td><\/td><td id=\"total\" class=\"price-totals\"><\/td><td class=\"total\">Total Cost<\/td><\/tr><\/strong> <strong> <\/tfoot><\/strong> <strong> <\/table><\/strong> <strong> <\/section><\/strong> <strong> <\/main><\/strong> <strong> <!-- link to external JS file --><\/strong> <strong> <script src=\"js\/scripts.js\"><\/script><\/strong> <strong><\/body><\/strong> <strong><\/html><\/strong><\/pre> <p> <\/p> <p> <\/p> <p>Instructions<\/p> <p>In this assignment, you will read several HTML elements from the provided HTML file using <strong>getElementById<\/strong> method.<\/p> <p>Then you will read the text content from the HTML elements using \"<strong>textContent<\/strong>\", convert the text into numbers using the <strong>Number()<\/strong> property.<\/p> <p>Like in the previous assignments, you will do some calculations.<\/p> <p>Unlike previous assignments, you will <strong>NOT output anything to the console<\/strong>. You will use \"<strong>textContent<\/strong>\" to change the contents of the <strong>DOM<\/strong>.<\/p> <p>This program needs to be written as functions. Write small functions for this assignment. Break this program down into several functions.<\/p> <p>There must be no variables declared or used in the global scope.<\/p> <p><strong>The program must meet these criteria:<\/strong><\/p> <p>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.<\/p> <p>Use <strong>document.getElementById<\/strong> to read the prices of the 3 input elements from the DOM: <strong>back-price<\/strong>, <strong>calc-price<\/strong>, and <strong>text-price<\/strong>.<\/p> <p>Use <strong>document.getElementById<\/strong> to read the prices of 3 output elements from the DOM: <strong>sub-total<\/strong>, <strong>tax-amount<\/strong>, and <strong>total<\/strong>.<\/p> <p>Use the <strong>textContent<\/strong> property of the elements to read the text contents from those 3 input DOM elements.<\/p> <p>Convert the text content from the 3 DOM input elements into numbers using the <strong>Number()<\/strong> method.<\/p> <p>Calculate the <strong>sum of the item prices<\/strong>.<\/p> <p>Calculate the amount of <strong>sales tax<\/strong>.<\/p> <p>Calculate the <strong>total price<\/strong>.<\/p> <p>Use the <strong>textContent<\/strong> 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.<\/p> <p><strong>I want my code written in function and don't do the array, but also output into the DOM.<\/strong><\/p> <p><strong>Here is my code: It's still error<\/strong><\/p> <p>\"use strict\";<\/p> <p> <\/p> <p>\/\/ Get the elements from the DOM using getElementById<\/p> <p>function declarePrices() {<\/p> <p> let backPrice = document.getElementById(\"back-price\").textContent;<\/p> <p> let calcPrice = document.getElementById(\"calc-price\").textContent;<\/p> <p> let textPrice = document.getElementById(\"text-price\").textContent;<\/p> <p> let pricesTax = [backPrice, calcPrice, textPrice];<\/p> <p> return pricesTax;<\/p> <p>}<\/p> <p> <\/p> <p>function salestaxRate() {<\/p> <p> const salestaxRate = 0.13;<\/p> <p> return salestaxRate;<\/p> <p>}<\/p> <p> <\/p> <p>\/\/ Calculate the subtotal<\/p> <p>function calcsubTotal() {<\/p> <p> const subtotal = declarePrices()[0] + declarePrices()[1] + declarePrices()[2];<\/p> <p> return subtotal;<\/p> <p>}<\/p> <p> <\/p> <p>\/\/ Calc sales tax<\/p> <p>function calcsalesTax() {<\/p> <p> let salesTax = 0;<\/p> <p> salesTax = calcsubTotal() * salestaxRate();<\/p> <p> return salesTax;<\/p> <p>}<\/p> <p>\/\/ Calc final cost<\/p> <p>function calcfinalCost() {<\/p> <p> let finalcostAmount = 0;<\/p> <p> finalcostAmount = calcsubTotal() + calcsalesTax();<\/p> <p> return finalcostAmount;<\/p> <p>}<\/p> <p> <\/p> <p>const subTotalElem = document.getElementById(\"sub-total\");<\/p> <p>const taxAmountElem = document.getElementById(\"tax-amount\");<\/p> <p>const totalElem = document.getElementById(\"total\");<\/p> <p> <\/p> <p>\/\/ Update the elements with the calculated values<\/p> <p>subTotalElem.textContent = \"$\" + subtotal.toFixed(2);<\/p> <p>taxAmountElem.textContent = \"$\" + taxAmount.toFixed(2);<\/p> <p>totalElem.textContent = \"$\" + total.toFixed(2);<\/p> <p> <\/p>",
    "transcribed_text": "",
    "related_book": {
        "title": null,
        "isbn": null,
        "edition": null,
        "authors": null,
        "cover_image": null,
        "uri": null,
        "see_more_uri": ""
    },
    "free_related_book": {
        "isbn": "",
        "uri": "",
        "name": "",
        "edition": ""
    },
    "question_posted": "2024-09-07 23:15:41",
    "see_more_questions_link": null,
    "step_by_step_answer": "The Answer is in the image, click to view ...",
    "students_also_viewed": [
        {
            "url": "\/study-help\/modern-mathematical-statistics-with-applications\/219-suppose-that-x-and-y-are-random-variables-with-1987650",
            "description": "=+21.9. Suppose that X and Y are random variables with distribution functions F and G.",
            "stars": 0
        },
        {
            "url": "\/watson-company-has-a-product-that-passes-through-two-processes",
            "description": "Watson Company has a product that passes through two processes: grinding and polishing. During October, the grinding department transferred 20,000 units to the polishing department. The cost of the...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/items-a-through-frepresent-the-items-that-an-auditor-ordinarily-10096876",
            "description": "Items a through frepresent the items that an auditor ordinarily would find on a client-prepared bank reconciliation. The accompanying List of Auditing Procedures represents substantive auditing...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/suppose-the-value-of-the-sp-500-stock-index-is-8606893",
            "description": "Suppose the value of the S\\&P 500 Stock Index is currently $2,000. If the one-year T-bill rate is 4.5% and the expected dividend yield on the S\\&P 500 is 4.0%. a. What should the one-year maturity...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/n-2-determine-the-effective-rate-of-interest-1-764892",
            "description": "N 2. Determine the effective rate of interest. 1 & 3 to 5 Dropou P On January 1, 2024, Rodriguez Window and Pane issued $18.2 million of 10-year, zero-coupon bonds for $6,409,758. Required: Q",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/the-following-information-applies-to-the-questions-displayed-below-income-1032918",
            "description": "[The following information applies to the questions displayed below.] Income statement and balance sheet data for Great Adventures, Incorporated, are provided below. Net sales revenues Interest...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/according-to-the-data-the-weight-of-a-randomly-selected-1006402",
            "description": "According to the data, the weight of a randomly selected checked-in luggage has a normal distribution with a mean of 50 lbs and a standard deviation of 11.3 lbs. Let X be the weight of a randomly...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/a-in-what-area-of-your-graph-was-the-diode-1023937",
            "description": "A) In what area of your graph was the diode forward biased? Where was it reversed biased? B) How did your threshold voltage compare with the expected value (just a lot higher, a little higher, a...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/1does-the-leadership-team-of-your-organization-exercise-the-competencies-1009240",
            "description": "1.Does the leadership team of your organization exercise the competencies as discussed in the reading and videos? What examples can you provide that will substantiate your answer? If they do not,...",
            "stars": 3
        }
    ],
    "next_back_navigation": {
        "previous": "\/study-help\/questions\/topper-sports-incorporated-produces-highquality-sports-equipment-the-companys-racket-9567283",
        "next": "\/study-help\/questions\/overview-in-this-course-all-of-the-assignments-have-preconfigured-9567285"
    },
    "breadcrumbs": [
        {
            "name": "Study help",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers"
        },
        {
            "name": "Computer Science",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions-and-answers\/computer-science"
        },
        {
            "name": "Databases",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions\/computer-science-databases"
        },
        {
            "name": "Objectives In this assignment you will: Demonstrate skills\/techniques learned from earlier assignments.",
            "link": "https:\/\/www.solutioninn.com\/study-help\/questions\/objectives-in-this-assignment-you-will-demonstrate-skillstechniques-learned-from-9567284"
        }
    ],
    "skill_details": {
        "skill_id": "656",
        "skill_name": "Databases",
        "parent_id": "8"
    }
}