cp_pizza

cp_pizza

by bryiantan

HTML

<h1>Pizza Place</h1>

<div class="size class">
	<p>What size pizza would you like?</p>

<input id="btnOrder" type="button" onclick="Receipt()" 
				value="Place Order">

<form id="pizzasize"> 

			<input class="Size" type="radio" name="size"  value="Personal Pizza">Personal  
			<input class="Size" type="radio" name="size"  value="Medium Pizza">Medium  
			<input class="Size" type="radio" name="size" value="Large Pizza">Large  
			<input class="Size" type="radio" name="size" value="Extra Large Pizza">Extra Large

		<div class="meat class">
		<p>Choose Meats</p>
		
<input class="Meat" type="checkbox" name="meat" value="Pepperoni"/>Pepperoni<br>
<input class="Meat" type="checkbox" name="meat" value="Sausage">Sausage<br>
<input class="Meat" type="checkbox" name="meat" value="Canadian Bacon">Canadian Bacon<br>
<input class="Meat" type="checkbox" name="meat" value="Ground Beef">Ground Beef<br>
<input class="Meat" type="checkbox" name="meat" value="Anchovy">Anchovy<br>
<input class="Meat" type="checkbox" name="meat" value="Chicken">Chicken<br>

</div>


<div class="veggies">
		<p>Add Veggies:</p>
		
			<input class="Veggie" type="checkbox" name="veggie" value="Tomatoes">Tomatoes<br>
<input class="Veggie"  type="checkbox" name="veggie" value="Onions">Onions<br>
<input class="Veggie" type="checkbox" name="veggie" value="Olives" checked>Olives<br>
<input class="Veggie" type="checkbox" name="veggie" value="Green Peppers">Green Peppers<br>
<input class="Veggie" type="checkbox" name="veggie" value="Mushrooms">Mushrooms<br>
<input class="Veggie" type="checkbox" name="veggie" value="Pineapple">Pineapple<br>
<input class="Veggie" type="checkbox" name="veggie" value="Spinach">Spinach<br>
<input class="Veggie" type="checkbox" name="veggie" value="Jalapeno">Jalapeno<br>


</div>

<div class="crusts">
	<p>Crust</p>
	<input class="Crust" type="radio" name="crust" value="Plain Crust">Plain Crust  
			<input class="Crust" type="radio" name="crust"value="Garlic Butter Crust">Garlic...

CSS

h1{text-align: center;font-size: 50pt;}
		p{font-size: 20pt; margin-left: 30px;}
		input[type="radio"] {margin-left: 30px;}
		input[type="checkbox"] {margin-left: 30px; margin-top: 20px;}
		body{background-color: yellow;}
		.float{display: inline-block;}
		.prices{font-size: 15pt;}
		button:hover{color:#000;font-weight:bold;border:2px solid#000;}
		.button {margin-left: 20px;}

JavaScript

function Receipt() {
    // This initializes our string so it can get passed from  
    // function to function, growing line by line into a full receipt

    var text1 = "<h3>You Ordered:</h3>";
    var runningTotal = 0;
    var sizeTotal = 0;
    var sizeArray = document.getElementsByClassName("Size");
    var selectedSize;
    for (var i = 0; i < sizeArray.length; i++) {
        if (sizeArray[i].checked) {
            selectedSize = sizeArray[i].value;
            text1 = text1 + selectedSize + "<br>";
        }
    }
    if (selectedSize === "Personal Pizza") {
        sizeTotal = 6;
    } else if (selectedSize === "Medium Pizza") {
        sizeTotal = 10;
    } else if (selectedSize === "Large Pizza") {
        sizeTotal = 14;
    } else if (selectedSize === "Extra Large Pizza") {
        sizeTotal = 16;
    }
    runningTotal = sizeTotal;
    console.log(selectedSize + " = $" + sizeTotal + ".00");
    console.log("size text1: " + text1);
    console.log("subtotal: $" + runningTotal + ".00");
    getMeat(runningTotal, text1); // All three of these variables will be passed on to each function
};

// With both the meat and veggie functions each item in the array will be
// 1 dollar but the first is going to be free so we can count the total
// of items in their array and subtract 1 to get the total item cost
//
// Now we can add the item cost to our running total to get the new
// running total and then pass this new running total to the next function
// Just keep up this process until we've added all items to the running total
function getMeat(runningTotal, text1) {
    var meatTotal = 0;
    var selectedMeat = [];
    var meatArray = document.getElementsByClassName("Meat");
    for (var j = 0; j < meatArray.length; j++) {
        if (meatArray[j].checked) {
            selectedMeat.push(meatArray[j].value);
            console.log("selected meat item: (" + meatArray[j].value + ")");
            text1 = text1 + meatArray[j].value + "<br>";
        }
    }
   ...