Chapter 9 Programming Assignment

We have spent the last few chapters really covering the basics. In Chapter 9 we are going to do a little more in depth project combining skills learned over the last several chapters. We are going to be creating a simple restaurant menu. The user will be presented with 3 checkboxes to choose what they want. Those checkboxes are Burgers, Fries, and/or Drinks. Once they click on a given checkbox, you will use JavaScript to show a hidden DIV providing them with other options. For example, when they click Drinks, they will be presented to choose Soda or Bottled Water. Once they choose the items they want, they will then click Compute Total. You will look at the items chosen and add them up, then display that result in the txtTotal output box so they can see their final price.

I have already created the HTML page and the JS page along with a CSS page for styling. I have also added your first event handler for the onchange event to detect when a checkbox has been changed for chkBurgers, as well as created a code snippet so you can see how to hide and show the other DIVs when the appropriate checkbox is clicked. I have also set the visibility to hidden on all 3 menu option DIVs. You can open the HTML page in a browser and click on the buger checkbox for a demonstration and better clarity.

HINT 1: When you compute the total, you can use an IF statement to check if a checkbox has been checked. If not, you know you don't have to worry about any items from that category being selected.

HINT 2: Be sure to set the total value variable to 0 when the Compute button is clicked before doing any addition as to start with a fresh slate everytime.

Chapter 9.css

body {

margin: 0;

}

.page {

width: 800px;

height: 800px;

margin: 20px auto;

border: solid 1px #0800C1;

}

.topbar {

clear: both;

height: 100px;

width: 800px;

margin: 0;

background-color: #0800C1;

color: #fff;

font-size: 48pt;

font-weight: bold;

text-align: center;

}

.row {

height: 200px;

width: 750px;

margin: 25px 25px 25px 0;

}

.cell {

height: 200px;

width: 250px;

float: left;

}

.clear {

clear: both;

}

Chapter 9.html

Menu

Burgers

Regular (4.19)

w/ Cheese (4.79)

w/ Bacon (4.79)

w/ Bacon and Cheese (5.39)

Fries

Small (2.39)

Medium (3.09)

Large (4.99)

Drinks

Soda (1.69)

Bottled Water (1.49)

Total Meal Cost:

Chapter 9.js

// COURSE: CIT 140 JavaScript

// NAME:

// DATE:

// PROJECT: Chapter 9 Programming Project

var total;

function ToggleBurgers() {

var checkbox = document.getElementById('chkBurgers');

var burgers = document.getElementById('divBurgers');

if (checkbox.checked) {

burgers.style.visibility = 'visible';

} else {

burgers.style.visibility = 'hidden';

}

}

function ComputeTotal() {

}

function init() {

var chkBurgers = document.getElementById('chkBurgers');

chkBurgers.onchange = ToggleBurgers;

var btnCompute = document.getElementById('btnCompute');

btnCompute.onclick = ComputeTotal;

}

window.onload = init;

I have included what directions I have along with all the separate files for this program.

I am needing the code for the function ComputeTotal() in the Chapter 9.js file.