ZuoTi.Pro
Question

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 will need to get the value of each checked checkbox and add to a variable that you can display at the end. You can do that the same way we have gotten values from input boxes in past assignments. See the below line for an example.

document.getElementById('burger_1').value

HINT: When you calculate the total, you should consider that a user could uncheck an categories checkbox without unchecking the items within, i.e. They may uncheck Burgers without unchecking Cheeseburger. We should assume that if the main category is unchecked, they do not want an item within it. What that means for you, is that you should use a nested IF statement to first check if a category is checked at all, and then if so, add any checked items under it to your total.

Code:

<!DOCTYPE html>
<html>

<head>
<title>Week 12 & 13 Programming Assignment</title>


<style>
.container{
width:600px;
margin:0 auto;
border:solid 4px #000;
background:#555;
color:#fff;
}

.header{
margin:0;
border-bottom: solid 2px #fff;
background: #555;
color:#fff;
text-align:center;
}

.menu_section{
height:150px;
width:550px;
margin:10px auto;
border-bottom:solid 1px #fff;
}

.total_display{
width:275px;
float:left;
}

.total_button{
width:250px;
float:right;
}
  
button{
margin:10px;
}

.checkbox_section{
margin-top:20px;
}

.hide{
display:none;
}

</style>
</head>

<body>
<div class="container">
<div class="header">
<h1>Restaurant Menu</h1>
</div>
<div class="menu">
<div class="menu_section">
<input type="checkbox" id="toggle_burgers">Burgers
<div class="checkbox_section burgers_section hide" id="burgers_section">
<input type="checkbox" id="burger_1" value="3.99"> $3.99 Hamburger<br />
<input type="checkbox" id="burger_2" value="4.49"> $4.49 Cheeseburger<br />
<input type="checkbox" id="burger_3" value="5.99"> $5.99 Bacon Cheeseburger<br />
</div>
</div>
<div class="menu_section">
<input type="checkbox" id="toggle_fries">Fries
<div class="checkbox_section fries_section hide" id="fries_section">
<input type="checkbox" id="fries_1" value="1.99"> $1.99 Small Fries<br />
<input type="checkbox" id="fries_2" value="2.99"> $2.99 Large Fries<br />
<input type="checkbox" id="fries_3" value="4.99"> $4.99 Chilli Cheese Fries<br />
</div>
</div>
<div class="menu_section">
<input type="checkbox" id="toggle_drinks">Drinks
<div class="checkbox_section drinks_section hide" id="drinks_section">
<input type="checkbox" id="drink_1" value="0.99"> $0.99 Water<br />
<input type="checkbox" id="drink_2" value="1.99"> $1.99 Small Fountain Drink<br />
<input type="checkbox" id="drink_3" value="2.99"> $2.99 Large Fountain Drink<br />
</div>
</div>
<div class="menu_section">
<div class="total_display">
Total: <input type="text" id="txtTotal" />
</div>
<div class="total_button">
<button type="button" id="btnTotal">Calculate Total</button>
<button type="button" id="btnReset">Reset</button>
</div>
</div>
</div>
</div>


<script>
function Calculate_Total() {

}

function Toggle_Burgers() {
//Find Element By ID
var toggle_burgers = document.getElementById('toggle_burgers');
//Find Element By CSS Class
var burgers_section = document.querySelector('.burgers_section');

//If it's checked we need to display it by removing the Hide Class, otherwise, we hide it by adding the Hide class
if (toggle_burgers.checked) {
burgers_section.classList.remove('hide');
} else {
burgers_section.classList.add('hide');
}
}

function Toggle_Fries() {

}

function Toggle_Drinks() {

}

//Function to Uncheck all checkboxes on the page, clear the input box for total, and Toggle Visibility
function Reset_Order() {
var w = document.getElementsByTagName('input');
for (var i = 0; i < w.length; i++) {
if (w[i].type == 'checkbox') {
w[i].checked = false;

if (w[i].id == 'toggle_burgers') {
Toggle_Burgers();
}
if (w[i].id == 'toggle_fries') {
Toggle_Fries();
}
if (w[i].id == 'toggle_drinks') {
Toggle_Drinks();
}
}
if (w[i].type == "text") {
w[i].value = '';
}
}
}


/*************************************************************************
* The Function Below is to assign event handlers to the
* buttons and checkboxes on the page. You will not need to make any changes
* to this function
* *********************************************************************/
function init() {
var btnTotal = document.getElementById('btnTotal');
btnTotal.onclick = Calculate_Total;

var btnReset = document.getElementById('btnReset');
btnReset.onclick = Reset_Order;

var toggle_burgers = document.getElementById('toggle_burgers');
toggle_burgers.onchange = Toggle_Burgers;

var toggle_fries = document.getElementById('toggle_fries');
toggle_fries.onchange = Toggle_Fries;

var toggle_drinks = document.getElementById('toggle_drinks');
toggle_drinks.onchange = Toggle_Drinks;
}

window.onload = init;
</script>

</body>

</html>

engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

I have changed thinks in these functions only you can easily understand just by looking at them:

  • Toggle_Drinks()
  • Toggle_Fries()
  • Calculate_Total()

<!DOCTYPE html>
<html>

<head>
<title>Week 12 & 13 Programming Assignment</title>


<style>
.container{
width:600px;
margin:0 auto;
border:solid 4px #000;
background:#555;
color:#fff;
}

.header{
margin:0;
border-bottom: solid 2px #fff;
background: #555;
color:#fff;
text-align:center;
}

.menu_section{
height:150px;
width:550px;
margin:10px auto;
border-bottom:solid 1px #fff;
}

.total_display{
width:275px;
float:left;
}

.total_button{
width:250px;
float:right;
}
  
button{
margin:10px;
}

.checkbox_section{
margin-top:20px;
}

.hide{
display:none;
}

</style>
</head>

<body>
<div class="container">
<div class="header">
<h1>Restaurant Menu</h1>
</div>
<div class="menu">
<div class="menu_section">
<input type="checkbox" id="toggle_burgers">Burgers
<div class="checkbox_section burgers_section hide" id="burgers_section">
<input type="checkbox" id="burger_1" value="3.99"> $3.99 Hamburger<br />
<input type="checkbox" id="burger_2" value="4.49"> $4.49 Cheeseburger<br />
<input type="checkbox" id="burger_3" value="5.99"> $5.99 Bacon Cheeseburger<br />
</div>
</div>
<div class="menu_section">
<input type="checkbox" id="toggle_fries">Fries
<div class="checkbox_section fries_section hide" id="fries_section">
<input type="checkbox" id="fries_1" value="1.99"> $1.99 Small Fries<br />
<input type="checkbox" id="fries_2" value="2.99"> $2.99 Large Fries<br />
<input type="checkbox" id="fries_3" value="4.99"> $4.99 Chilli Cheese Fries<br />
</div>
</div>
<div class="menu_section">
<input type="checkbox" id="toggle_drinks">Drinks
<div class="checkbox_section drinks_section hide" id="drinks_section">
<input type="checkbox" id="drink_1" value="0.99"> $0.99 Water<br />
<input type="checkbox" id="drink_2" value="1.99"> $1.99 Small Fountain Drink<br />
<input type="checkbox" id="drink_3" value="2.99"> $2.99 Large Fountain Drink<br />
</div>
</div>
<div class="menu_section">
<div class="total_display">
Total: <input type="text" id="txtTotal" />
</div>
<div class="total_button">
<button type="button" id="btnTotal">Calculate Total</button>
<button type="button" id="btnReset">Reset</button>
</div>
</div>
</div>
</div>


<script>
function Calculate_Total() {
   var burger_1 = document.getElementById('burger_1');
   var burger_2 = document.getElementById('burger_2');
   var burger_3 = document.getElementById('burger_3');
   var fries_1 = document.getElementById('fries_1');
   var fries_2 = document.getElementById('fries_2');
   var fries_3 = document.getElementById('fries_3');
   var drink_1 = document.getElementById('drink_1');
   var drink_2 = document.getElementById('drink_2');
   var drink_3 = document.getElementById('drink_3');
   var total = 0;

   var total_display = document.getElementById('txtTotal');

   var toggle_burgers = document.getElementById('toggle_burgers');
   var toggle_fries = document.getElementById('toggle_fries');
   var toggle_drinks = document.getElementById('toggle_drinks');

   if (toggle_burgers.checked) {
       if (burger_1.checked) {
           total+=parseFloat(burger_1.value);
       }
       if (burger_2.checked) {
           total+=parseFloat(burger_2.value);
       }
       if (burger_3.checked) {
           total+=parseFloat(burger_3.value);
       }
      
   }
   if (toggle_fries.checked) {
       if (fries_1.checked) {
           total+=parseFloat(fries_1.value);
       }
       if (fries_2.checked) {
           total+=parseFloat(fries_2.value);
       }
       if (fries_3.checked) {
           total+=parseFloat(fries_3.value);
       }
      
   }
   if (toggle_fries.checked) {
       if (drink_1.checked) {
           total+=parseFloat(drink_1.value);
       }
       if (drink_2.checked) {
           total+=parseFloat(drink_2.value);
       }
       if (drink_3.checked) {
           total+=parseFloat(drink_3.value);
       }
      
   }

   total_display.value = total;


}

function Toggle_Burgers() {
//Find Element By ID
var toggle_burgers = document.getElementById('toggle_burgers');
//Find Element By CSS Class
var burgers_section = document.querySelector('.burgers_section');

//If it's checked we need to display it by removing the Hide Class, otherwise, we hide it by adding the Hide class
if (toggle_burgers.checked) {
burgers_section.classList.remove('hide');
} else {
burgers_section.classList.add('hide');
}
}

function Toggle_Fries() {
   var toggle_fries = document.getElementById('toggle_fries');
   var fries_section = document.querySelector('.fries_section');

//If it's checked we need to display it by removing the Hide Class, otherwise, we hide it by adding the Hide class
if (toggle_fries.checked) {
fries_section.classList.remove('hide');
} else {
fries_section.classList.add('hide');
}
}

function Toggle_Drinks() {
   var toggle_drinks = document.getElementById('toggle_drinks');
   var drinks_section = document.querySelector('.drinks_section');

   //If it's checked we need to display it by removing the Hide Class, otherwise, we hide it by adding the Hide class
   if (toggle_drinks.checked) {
   drinks_section.classList.remove('hide');
   } else {
   drinks_section.classList.add('hide');
   }
}

//Function to Uncheck all checkboxes on the page, clear the input box for total, and Toggle Visibility
function Reset_Order() {
var w = document.getElementsByTagName('input');
for (var i = 0; i < w.length; i++) {
if (w[i].type == 'checkbox') {
w[i].checked = false;

if (w[i].id == 'toggle_burgers') {
Toggle_Burgers();
}
if (w[i].id == 'toggle_fries') {
Toggle_Fries();
}
if (w[i].id == 'toggle_drinks') {
Toggle_Drinks();
}
}
if (w[i].type == "text") {
w[i].value = '';
}
}
}


/*************************************************************************
* The Function Below is to assign event handlers to the
* buttons and checkboxes on the page. You will not need to make any changes
* to this function
* *********************************************************************/
function init() {
var btnTotal = document.getElementById('btnTotal');
btnTotal.onclick = Calculate_Total;

var btnReset = document.getElementById('btnReset');
btnReset.onclick = Reset_Order;

var toggle_burgers = document.getElementById('toggle_burgers');
toggle_burgers.onchange = Toggle_Burgers;

var toggle_fries = document.getElementById('toggle_fries');
toggle_fries.onchange = Toggle_Fries;

var toggle_drinks = document.getElementById('toggle_drinks');
toggle_drinks.onchange = Toggle_Drinks;
}

window.onload = init;
</script>

</body>

</html>

0 0
Add a comment
Know the answer?
Add Answer to:
I can't figure this one out at all. Any help would be appreciated. Here's the question:...
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

  • NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

    NEED HELP with HTML with Javascript embedding for form validation project below. I have my code below but I'm stuck with validation. If anyone can fix it, I'd really appreciate. ****************************************************************************** CODE: <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <head> <title>Nice</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> var textFromTextArea; function getWords(){ var text =...

  • 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...

  • Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of...

    Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of moves made. Solving the Hanoi tower. Please post correct Javascript. This is used in jsfiddle. HTML: html> <schript src="TowerOfHanoi.js"</script> </script> <h1> Tower of Hanoi </h1> Enter the number of disks (Disk amount must be < 7): <br> <br> <input id = 'uInput' type = 'textbox' size = 10 > <button id = 'setup' onClick = 'insertDisks()'> Set up Tower of Hanoi </button> <button id=calc onClick = 'runHanoi(stackA,...

  • 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 have the code buts its not working as this below instruction can anyone help Use...

    I have the code buts its not working as this below instruction can anyone help Use the requirements from the pizza part of Assignment 6 and do the following using CSS and an internal style sheet: 1.     Your Javascript function should be in an external file (don’t forget to move it up to studentweb too) 2.     Put a red border of 300px in width around the form 3.     There should be three Div sections: header, main_body, and footer. 4.     Center the name of your...

  • i need the code that goes within the <script> opening and closing following the insturctions of...

    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"...

  • 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 need help, I have my page set up, I just need help with some aesthetics,...

    I need help, I have my page set up, I just need help with some aesthetics, and getting the clear button to work, and get a popup when they click submit that says success along as all fields are filled out correctly. Any help would be fantastic. <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styleSheet.css" /> <title>2020-2021 Student-Athlete Registration Form - Weber State University</title> </head> <body> <header> <h1>WEBER STATE UNIVERSITY</h1> </header> <div class="link"> <ul> <li><a href="page 1.html"><span class="text">Home</span></a></li> </ul> </div>...

  • I need HELP to get the code to do these function: If I keep clicking "Generate"...

    I need HELP to get the code to do these function: If I keep clicking "Generate" multiple times, the list keeps on getting bigger. The number of rows should always be equal to the number of columns. Also make the code to show both table at the same time? Here is the code I got some far : Code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Testing</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> </head> <style> td...

  • <!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"...

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
ADVERTISEMENT