Hands-On Project 7-5

In this project, you'll expand on the work you did in Hands-on Project 7-4 to create a custom object containing the order information entered on the pizza delivery order form, and then display those object property values in the confirmation section.

1. In the file manager for your operating system, copy the completed contents of the HandsOnProject7-4 folder to the HandsOnProject7-5 folder.

2. In your text editor, open the index.htm file from the HandsOnProject7-5 folder, change Hands-on Project 7-4 to Hands-on Project 7-5 in the comment section, in the title element, and in the h1 element, and then save your changes.

3. Open script.js, and then in the comment section, change Hands-on Project 7-4 to Hands-on Project 7-5.

4. In the script.js file, declare two additional global variables: foodInfo, an empty object, and foodSummary, which points to the element with the id value order.

5. Create a function with the name processFood(). Within the function, do the following:

a. Declare five local variables: prop; crustOpt, which references the elements with the name crust; toppings, which has a value of 0; toppingBoxes, which references the elements with the name toppings; and instr, which references the element with the id value instructions.

b. Add an if/else statement that checks if the first item in the crustOpt array is checked. If so, the crust property of the foodInfo object should be assigned the value of the first item in the crustOpt array; otherwise, the crust property of the foodInfo object should be assigned the value of the second item in the crustOpt array.

c. Add a statement that assigns the value of the element with the id value sizeas the value of the size property of the foodInfo object.

d. Create a for statement that sets a counter variable to 0, repeats the loop as long as the counter is less than the length of the toppingBoxes array, and increments the counter variable by one after each loop. Within the forstatement, add an if statement that checks if the element of the toppingBoxesarray at the index of the counter variable is checked. If the condition is true, increment the toppings variable by 1, and create a new property in the foodInfo object using the name topping plus the value of the toppingsvariable, and set the new property's value to the value of the current element in the toppingBoxes array.

e. Add an if statement that checks if the element referenced by the instrvariable has any content, and if so, creates an instructions property for the foodInfo object and sets its value to the value of the element referenced by the instr variable.

f. Add the following statements to add the object properties to the Order Summary sidebar:

6. In the previewOrder() function, add a call to the processFood() function after the existing call to the processDeliveryInfo() function.

7. Save your changes to script.js, open index.htm in a browser, enter fictitious information in all the boxes in the Delivery Information section, complete all the boxes in the Order section, and then click Preview Order. A summary of the information you entered should be displayed on the right side of the page, as shown in Figure 7-23.

Hands-on Project 7-4

Pizza Order Form

Delivery Information

Name

Street Address

City

Email

Phone

Order

Crust

Thin Crust

Deep Dish

Size

Small

Medium

Large

Extra Large

Topping(s)

Pepperoni

Sausage

Green Peppers

Onions

Extra Cheese

Special Instructions

Order Summary

Deliver to

Order

script.js

/*

JavaScript 6th Edition

Chapter 7

Hands-on Project 7-4

Author: Your name here

Date: Today's date

Filename: script.js

*/

"use strict"; //Strict mode

var delivInfo = [];

var delivSummary = document.getElementById('deliverTo');

var delivOrder = document.getElementById('order');

function processDeliveryInfo(){

//Getting values of all the fields by their respective ids and storing it into an delivInfo array

delivInfo[0] = document.getElementById('nameinput').value;

delivInfo[1] = document.getElementById('addrinput').value;

delivInfo[2] = document.getElementById('cityinput').value;

delivInfo[3] = document.getElementById('emailinput').value;

delivInfo[4] = document.getElementById('phoneinput').value;

//Storing the checked value only

if (document.getElementById('thin').checked) {

delivInfo[5] = document.getElementById('thin').value;

}else if (document.getElementById('thick').checked) {

delivInfo[5] = document.getElementById('thick').value;

}

delivInfo[6] = document.getElementById('size').value;

//Storing all the values which are checked

var toppings = document.getElementsByName('toppings');

var topping = "";

for (var i=0, n=toppings.length;i

{

if (toppings[i].checked)

{

topping += ","+toppings[i].value;

}

}

if (topping) topping = topping.substring(1);

delivInfo[7] = topping;

delivInfo[8] = document.getElementById('instructions').value;

var prop;

//Printing delivery address

for (prop = 0; prop

delivSummary.innerHTML +="

" + delivInfo[prop] +"

";<>

}

//Printing the order summary

for (prop = delivInfo.length -4; prop

delivOrder.innerHTML +="

" + delivInfo[prop] +"

";

}

}

//This invokes when user click on preview order

function previewOrder(){

processDeliveryInfo();//Calling processdeliveryinfo to process the order

document.getElementsByTagName("section")[0].style.display = "block"; //Displaying section as a block

}