Chapter 9 Programming Assignment We have spent the last few chapters really cove
ID: 3807850 • Letter: C
Question
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
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<div class="page">
<div class="topbar">
Menu
</div>
<div class="row">
<!--Burgers CheckBox-->
<div class="cell">
<input type="checkbox" name="chkBurgers" id="chkBurgers" /><label for="chkBurgers">Burgers</label>
</div>
<!--Cell Containing Burger Menu-->
<div class="cell" id="divBurgers">
<input type="radio" name="radBurgers" id="radBurgerRegular" /><label for="radBurgerRegular">Regular (4.19)</label><br />
<input type="radio" name="radBurgers" id="radBurgerCheese" /><label for="radBurgerCheese">w/ Cheese (4.79)</label><br />
<input type="radio" name="radBurgers" id="radBurgerBacon" /><label for="radBurgerBacon">w/ Bacon (4.79)</label><br />
<input type="radio" name="radBurgers" id="radBurgerBaconCheese" /><label for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br />
</div>
</div>
<div class="clear"></div>
<div class="row">
<!--Fries CheckBox-->
<div class="cell">
<input type="checkbox" name="chkFries" id="chkFries" /><label for="chkFries">Fries</label>
</div>
<!--Cell Containing Fries Menu-->
<div class="cell" id="divFries">
<input type="radio" name="radFries" id="radFriesSmall" /><label for="radFriesSmall">Small (2.39)</label><br />
<input type="radio" name="radFries" id="radFriesMedium" /><label for="radFriesMedium">Medium (3.09)</label><br />
<input type="radio" name="radFries" id="radFriesLarge" /><label for="radFriesSmall">Large (4.99)</label><br />
</div>
</div>
<div class="clear"></div>
<div class="row">
<!--Drinks CheckBox-->
<div class="cell">
<input type="checkbox" name="chkDrinks" id="chkDrinks" /><label for="chkDrinks">Drinks</label>
</div>
<!--Cell Containing Drink Menu-->
<div class="cell" id="divDrinks">
<input type="radio" name="radDrinks" id="radDrinkSoda" /><label for="radDrinkSoda">Soda (1.69)</label><br />
<input type="radio" name="radDrinks" id="radDrinkWater" /><label for="radDrinkWater">Bottled Water (1.49)</label><br />
</div>
<!--Cell Containing Compute Button and Total Field-->
<div class="cell">
Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br />
<button id="btnCompute" name="btnCompute">Compute Total</button>
</div>
</div>
<div class="clear"></div>
</div>
<link rel="stylesheet" type="text/css" href="Chapter9.css">
<script src="Chapter9.js"></script>
</body>
</html>
Chapter 9.js
// COURSE: CIT 140 JavaScript
// NAME: <NAME>
// DATE: <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.
Explanation / Answer
HTML File:
<!DOCTYPE html>
<html>
<head>
<title>Restaurant Menu</title>
</head>
<body>
<div class="page">
<div class="topbar">
Menu
</div>
<div class="row">
<!--Burgers CheckBox-->
<div class="cell">
<input type="checkbox" name="chkBurgers" id="chkBurgers" /><label for="chkBurgers">Burgers</label>
</div>
<!--Cell Containing Burger Menu-->
<div class="cell" id="divBurgers">
<input type="radio" name="radBurgers" id="radBurgerRegular" value=4.19 /><label for="radBurgerRegular">Regular (4.19)</label><br />
<input type="radio" name="radBurgers" id="radBurgerCheese" value=4.79 /><label for="radBurgerCheese">w/ Cheese (4.79)</label><br />
<input type="radio" name="radBurgers" id="radBurgerBacon" value=4.79 /><label for="radBurgerBacon">w/ Bacon (4.79)</label><br />
<input type="radio" name="radBurgers" id="radBurgerBaconCheese" value=5.39 /><label for="radBurgerBaconCheese">w/ Bacon and Cheese (5.39)</label><br />
</div>
</div>
<div class="clear"></div>
<div class="row">
<!--Fries CheckBox-->
<div class="cell">
<input type="checkbox" name="chkFries" id="chkFries" /><label for="chkFries">Fries</label>
</div>
<!--Cell Containing Fries Menu-->
<div class="cell" id="divFries">
<input type="radio" name="radFries" id="radFriesSmall" value=2.39 /><label for="radFriesSmall">Small (2.39)</label><br />
<input type="radio" name="radFries" id="radFriesMedium" value=3.09 /><label for="radFriesMedium">Medium (3.09)</label><br />
<input type="radio" name="radFries" id="radFriesLarge" value=4.99 /><label for="radFriesSmall">Large (4.99)</label><br />
</div>
</div>
<div class="clear"></div>
<div class="row">
<!--Drinks CheckBox-->
<div class="cell">
<input type="checkbox" name="chkDrinks" id="chkDrinks" /><label for="chkDrinks">Drinks</label>
</div>
<!--Cell Containing Drink Menu-->
<div class="cell" id="divDrinks">
<input type="radio" name="radDrinks" id="radDrinkSoda" value=1.69 /><label for="radDrinkSoda">Soda (1.69)</label><br />
<input type="radio" name="radDrinks" id="radDrinkWater" value=1.49 /><label for="radDrinkWater">Bottled Water (1.49)</label><br />
</div>
<!--Cell Containing Compute Button and Total Field-->
<div class="cell">
Total Meal Cost: <input type="text" name="txtTotal" id="txtTotal" /><br /><br />
<button id="btnCompute" name="btnCompute">Compute Total</button>
</div>
</div>
<div class="clear"></div>
</div>
<link rel="stylesheet" type="text/css" href="Chapter9.css">
<script src="Chapter9.js"></script>
</body>
</html>
CSS File:
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;
}
JavaScript File:
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 ToggleFries() {
var checkbox = document.getElementById('chkFries');
var fries = document.getElementById('divFries');
if (checkbox.checked) {
fries.style.visibility = 'visible';
} else {
fries.style.visibility = 'hidden';
}
}
function ToggleDrinks() {
var checkbox = document.getElementById('chkDrinks');
var drinks = document.getElementById('divDrinks');
if (checkbox.checked) {
drinks.style.visibility = 'visible';
} else {
drinks.style.visibility = 'hidden';
}
}
function ComputeTotal() {
var total = 0;
var BillTextField = document.getElementById('txtTotal');
var Burgers = document.getElementById('chkBurgers');
var Fries = document.getElementById('chkFries');
var Drinks = document.getElementById('chkDrinks');
if (Burgers.checked)
{
var RegularBurger = document.getElementById('radBurgerRegular');
var BurgerCheese = document.getElementById('radBurgerCheese');
var BurgerBacon = document.getElementById('radBurgerBacon');
var BurgerBaconCheese = document.getElementById('radBurgerBaconCheese');
if(RegularBurger.checked)
{
total = total + Number(RegularBurger.value);
}
else if (BurgerCheese.checked)
{
total = total + Number(BurgerCheese.value);
}
else if (BurgerBacon.checked)
{
total = total + Number(BurgerBacon.value);
}
else if (BurgerBaconCheese.checked)
{
total = total + Number(BurgerBaconCheese.value);
}
}
if(Fries.checked)
{
var FriesSmall = document.getElementById('radFriesSmall');
var FriesMedium = document.getElementById('radFriesMedium');
var FriesLarge = document.getElementById('radFriesLarge');
if(FriesSmall.checked)
{
total = total + Number(FriesSmall.value);
}
else if (FriesMedium.checked)
{
total = total + Number(FriesMedium.value);
}
else if (FriesLarge.checked)
{
total = total + Number(FriesLarge.value);
}
}
if(Drinks.checked)
{
var DrinkSoda = document.getElementById('radDrinkSoda');
var DrinkWater = document.getElementById('radDrinkWater');
if(DrinkSoda.checked)
{
total = total + Number(DrinkSoda.value);
}
else if (DrinkWater.checked)
{
total = total + Number(DrinkWater.value);
}
}
BillTextField.value = total;
}
function init() {
var chkBurgers = document.getElementById('chkBurgers');
chkBurgers.onchange = ToggleBurgers;
var chkFries = document.getElementById('chkFries');
chkFries.onchange = ToggleFries;
var chkDrinks = document.getElementById('chkDrinks');
chkDrinks.onchange = ToggleDrinks;
var btnCompute = document.getElementById('btnCompute');
btnCompute.onclick = ComputeTotal;
}
window.onload = init;