ZuoTi.Pro
Question
i need the code that goes within the <script> opening and closing following the insturctions of the insturctions of the pasted assignment screen shots please.

<!DOCTYPE html>
<html>
<head>
<!--
JavaScript 6th Edition
Chapter 3
Hands-on Project 3-1

Filename: index.htm
-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Hands-on Project 3-1</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>

<body>
<header>
<h1>
Hands-on Project 3-1
</h1>
</header>

<article>
<h2>Lunch selections</h2>
<form>
<input type="checkbox" id="item1" value="8" />
<label for="item1">Fried chicken ($8.00)</label>
<input type="checkbox" id="item2" value="10" />
<label for="item2">Fried halibut ($10.00)</label>
<input type="checkbox" id="item3" value="8" />
<label for="item3">Hamburger ($8.00)</label>
<input type="checkbox" id="item4" value="13" />
<label for="item4">Grilled salmon ($13.00)</label>
<input type="checkbox" id="item5" value="6" />
<label for="item5">Side salad ($6.00)</label>
<input type="button" value="Submit" id="sButton" />
</form>
<div>
<p id="total"></p>
</div>
</article>
<script>
***I need the code that goes **HERE** between the script***
</script>
</body>
</html>

Hands-On Project 3-1 In this exercise, you will total the prices for items selected on an order form, using both a for statem
7. Below the closing for the function, enter the following code to the function, enter the following code to create an event
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Below s the solution:

code:

<!DOCTYPE html>

<html>

<head>

   <!--

      JavaScript 6th Edition

      Chapter 3

      Hands-on Project 3-1

      Author: Lisa Kilker

      Date:  April 12, 2018

      Filename: index.htm

   -->

   <meta charset="utf-8" />

   <meta name="viewport" content="width=device-width,initial-scale=1.0">

   <title>Hands-on Project 3-1</title>

   <link rel="stylesheet" href="styles.css" />

   <script src="modernizr.custom.05819.js"></script>

</head>

<body>

   <header>

      <h1>

         Hands-on Project 3-1

      </h1>

   </header>

   <article>

      <h2>Lunch selections</h2>

      <form>

         <input type="checkbox" id="item1" value="8" />

         <label for="item1">Fried chicken ($8.00)</label>

         <input type="checkbox" id="item2" value="10" />

         <label for="item2">Fried halibut ($10.00)</label>

         <input type="checkbox" id="item3" value="8" />

         <label for="item3">Hamburger ($8.00)</label>

         <input type="checkbox" id="item4" value="13" />

         <label for="item4">Grilled salmon ($13.00)</label>

         <input type="checkbox" id="item5" value="6" />

         <label for="item5">Side salad ($6.00)</label>

         <input type="button" value="Submit" id="sButton" />

      </form>

      <div>

         <p id="total"></p>

      </div>

   </article>

   <script>

      function calcTotal(){   //function that will calculate the total of al the checked items   

         var itemTotal = 0; //declare and set to 0

         var items = document.getElementsByTagName("input"); //get the name of id using tag name

         for (var i = 0; i < 5; i++){

            if (items[i].checked){ //chekc for the which item is checked

               itemTotal += (items[i].value * 1); //total the sum of cheked items

            }

         }

         document.getElementById("total").innerHTML = "Your order total is $" + itemTotal + ".00"; //display the total price

      }

      //add event listener to the submit button

      var submitButton = document.getElementById("sButton");//get the name of the submit button

      if (submitButton.addEventListener){ //add a event listener

            submitButton.addEventListener("click", calcTotal, false); //add the event listener

      } else if (submitButton.attachEvent){ //check if the event listene is attached

            submitButton.attachEvent("onclick", calcTotal);

      }

      </script>

   </body>

</html>

sample output:

Hands-on Project 3-1 Lunch selections Fried chicken ($8.00) Fried halibut ($10.00) Your order total is $14.00 Hamburger ($8.0

0 0
Add a comment
Know the answer?
Add Answer to:
i need the code that goes within the <script> opening and closing following the insturctions of...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • JavaScript (Please debug this code) When a user enters a string in the input box, the...

    JavaScript (Please debug this code) When a user enters a string in the input box, the program is designed to add the string to an array. When the array reaches a certain length, the program displays all the users' entries in a list on the page. When you finish debugging, the user's entry in the input box should be cleared each time the submit button is clicked. Additionally, after five strings are submitted, the entire list of submitted strings should...

  • I can't figure this one out at all. Any help would be appreciated. Here's the question:...

    I can't figure this one out at all. Any help would be appreciated. Here's the question: You will need to complete the functions to Toggle the Fries and Drinks sections by adding or removing the 'hide' CSS class I created. I have already created the function to Toggle Burgers and you can use that as an example to build out the full functionality. I have also made created the function to reset the form. Finally, to calculate the total, you...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:   ...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 8 Hands-on Project 8-1 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Hands-on Project 8-1</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.65897.js"></script> </head> <body> <header> <h1> Hands-on Project 8-1 </h1> </header> <article> <h2>New Account Information</h2> <form> <fieldset id="deliveryinfo"> <label for="fnameinput">First Name</label> <input type="text" id="fnameinput" name="fname" /> <label for="lnameinput">Last Name</label> <input type="text" id="lnameinput" name="lname" /> <label for="addrinput">Street Address</label> <input type="text" id="addrinput" name="address" /> <label for="cityinput">City</label> <input type="text" id="cityinput" name="city"...

  • a. Create a new script section. At the bottom of the document, before the closing body...

    a. Create a new script section. At the bottom of the document, before the closing body tag code an opening script tag <script>, insert a blank line, and code the closing script tag </script> b. Within the script section, enter the following event listener: var btn = document.getElementById('placebutton'); if (btn.addEventListener){ btn.addEventListener("click", processPlaces, false); } else if (btn.attachEvent) { btn.attachEvent("onclick", processPlaces); } This event listener listens to the ID "placebutter" to see if it has been clicked Once clicked, it calls...

  • I have some code for HTML/Javascript but I need to change it up a bit. Heres...

    I have some code for HTML/Javascript but I need to change it up a bit. Heres the assignment and what I have. The part in the bold is what I need help with. I need a button called new timer for when it reaches zero... Thank you. Assignment For this assignment, you will write a timer application in HTML and JavaScript. Your HTML document should contain the following elements/features: HTML tags: An <input> tag labeled "Timer Duration" with the initial...

  • Create an HTML5 page that contains a form to collect the following data. The text in...

    Create an HTML5 page that contains a form to collect the following data. The text in bold indicates the id value that should be assigned to each html control: Product (drop down list) product – iPad, iPhone 6S, Galaxy 5S, Moto X, and so on Quantity (number) quantity Unit price (number) unit_price Discount (%)(number) discount_rate Date (date)   order_date First Name (text box)   first_name Last Name (text box)   last_name Payment type (drop down list)   payment_type – Visa, Master, Discover, Amex, and...

  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

  • I need to complete 3 validation cases in this Javascript code. I need to validate email,...

    I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Week 10: Regular Expressions</title> <style type="text/css"> span { padding: 2px; } .success { color: #008000; background: #99cc99; } .failure { color: #ff0000; background: #ff9999; } </style> <script type="text/javascript"> function validateInput(form) { var result0 = document.getElementById('result0'), result1 = document.getElementById('result1'), result2 = document.getElementById('result2'),...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
Active Questions
ADVERTISEMENT