{ "key_pair_value_system": true, "answer_rating_count": "", "question_feedback_html": { "html_star": "", "html_star_feedback": "" }, "answer_average_rating_value": "", "answer_date_js": "2024-08-07T20:02:55-04:00", "answer_date": "2024-08-07 20:02:55", "is_docs_available": null, "is_excel_available": null, "is_pdf_available": null, "count_file_available": 0, "main_page": "student_question_view", "question_id": "7820284", "url": "\/study-help\/questions\/objectives-in-this-assignment-you-will-demonstrate-skillstechniques-learned-from-7820284", "question_creation_date_js": "2024-08-07T20:02:55-04:00", "question_creation_date": "Aug 07, 2024 08:02 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 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() ", "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>This is my code but it's not running, can you check it for me?<\/p> <p>function declarePrices() {<\/p> <p> let backPrice = Number(document.getElementById(\"back-price\").textContent); \/\/ Used method \"Number\" to converts \"textContent\" into a number.<\/p> <p> let calcPrice = Number(document.getElementById(\"calc-price\").textContent);<\/p> <p> let textPrice = Number(document.getElementById(\"text-price\").textContent);<\/p> <p> let pricestax = [backPrice, calcPrice, textPrice];<\/p> <p> return pricestax;<\/p> <p>}<\/p> <p> <\/p> <p>\/\/ I used array to declare all the items price, so I can use the for loop to calc the sum<\/p> <p>function prices(){<\/p> <p> const itemsPrice = [56.99, 104.89, 51.97];<\/p> <p> return prices;<\/p> <p>}<\/p> <p> <\/p> <p>function count() {<\/p> <p> const pricescount = prices().length;<\/p> <p> return pricescount;<\/p> <p> <\/p> <p>}<\/p> <p> <\/p> <p>\/\/ I used for loop to calc the subtotal.<\/p> <p>function calcsubTotal(){<\/p> <p> let subTotal = 0;<\/p> <p> for (i = 0, i < prices.length, i++){<\/p> <p> subTotal = subTotal + declarePrices()[i];<\/p> <p> }<\/p> <p> return subTotal;<\/p> <p>}<\/p> <p> <\/p> <p>\/\/ Calc sales tax<\/p> <p>function calcsalesTax(){<\/p> <p> const salestaxRate = 0.13;<\/p> <p> let salesTax = 0;<\/p> <p> salesTax = calcsubTotal() * salestaxRate;<\/p> <p> return salesTax;<\/p> <p>}<\/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>function printResults(){<\/p> <p> let sumoftheitemPrices = calcsubTotal();<\/p> <p> let salestaxAmount = calcsalesTax();<\/p> <p> let total = calcfinalCost();<\/p> <p> <\/p> <p> console.log(\"Sum of the item prices: ${sumoftheitemPrices}\");<\/p> <p> console.log(\"Sales tax: ${salestaxAmount}\");<\/p> <p> console.log(\"Total price: ${total}\");<\/p> <p>}<\/p> <p> <\/p> <p>printResults();<\/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-08-07 20:02:55",
    "see_more_questions_link": null,
    "step_by_step_answer": "The Answer is in the image, click to view ...",
    "students_also_viewed": [
        {
            "url": "\/study-help\/psychology-2e\/outline-the-contributions-of-socrates-to-psychology-1985067",
            "description": "Outline the contributions of Socrates to psychology.",
            "stars": 0
        },
        {
            "url": "\/lyon-center-began-operations-on-july-1-it-uses-a",
            "description": "Lyon Center began operations on July 1. It uses a perpetual inventory system. During July, the company had the following purchases and sales. Instructions (a) Determine the ending inventory under a...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/which-datto-product-suite-offers-msps-protection-for-their-clients-9364242",
            "description": "which datto product suite offers MSPs protection for their clients data",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/assume-your-tax-rate-is-21-and-that-your-wacc-824776",
            "description": "Assume your tax rate is 21% and that your WACC is 10%. You purchase an asset with a 4-year life today for $1,000,000. The salvage value at the end of 4 years is $0. Calculate the PV of the...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/if-a-group-of-people-was-placed-in-a-crowded-1431809",
            "description": "If a group of people was placed in a crowded room, one person per two square feet of area, given a math exam and most did poorly, this would not demonstrate that crowding causes poor math performance...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/what-does-stickiest-refer-to-in-regard-to-social-media-2155685",
            "description": "What does stickiest refer to in regard to social media",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/a-scientific-study-on-lift-strength-gives-the-following-data-2155832",
            "description": "A scientific study on lift strength gives the following data table Lift strength Tons 46 47 51 55 56 Time to move load seconds 159 166 123 128 117 Using technology it was determined that the total...",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/which-of-the-following-jobs-has-the-greatest-risk-of-2160941",
            "description": "Which of the following jobs has the greatest risk of death? a. Firefighter b. Compliance officer c. Event coordinator d. Taxi driver e. Airline pilot",
            "stars": 3
        },
        {
            "url": "\/study-help\/questions\/katsu-perceives-that-gloria-only-pays-attention-to-the-wealthiest-2162707",
            "description": "Katsu perceives that Gloria only pays attention to the wealthiest customers who she expects to leave large tips. Katsu reminds Gloria that they are supposed to rotate based on when customers enter...",
            "stars": 3
        }
    ],
    "next_back_navigation": {
        "previous": "\/study-help\/questions\/21-an-important-feature-of-the-socalled-waterfall-model-of-7820283",
        "next": "\/study-help\/questions\/thanks-preston-company-acquired-80-of-sparkle-corporations-stock-for-7820285"
    },
    "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-7820284"
        }
    ],
    "skill_details": {
        "skill_id": "656",
        "skill_name": "Databases",
        "parent_id": "8"
    }
}