Chapter 14 - JavaScript Pizzeria - Start

The starting point for the project from Chapter 14 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland

by rosakaufman

HTML

<h1>JavaScript Pizzeria</h1>

<div id="orderForm">
    <label>How many pizzas do you want?
        <input type="number" id="numPizzas" />
    </label>
    <br />
    <br />
    <label>What kind of pizzas?
        <select id="typePizza">
            <option value="cheese">Cheese</option>
            <option value="pepperoni">Pepperoni</option>
        </select>
    </label>
    <br />
    <br />
    <label>Where do you live?
        <select id="deliveryCity">
            <option value="Anytown">Anytown</option>
        </select>
    </label>
        <br />
        <br />

        <button type="button" id="placeOrder">Place Order</button>
</div>
<div id="displayTotal"></div>

CSS

body {
    font-family: Arial, sans-serif;
}
h1 {
    text-align: center;
}
#orderForm {
    background-color: #eeeeee;
    border: 4px solid yellow;
    border-radius: 4px;
    padding: 8px;
    margin: 8px;
    box-shadow: 10px 10px 5px #888888;
}

JavaScript

// listen for button clicks
document.getElementById("placeOrder").addEventListener("click", placeOrder);

/**
 * gets form values
 * calculates prices
 * produces output
 */
function placeOrder() {
    // get form values
    var numPizzas = document.getElementById("numPizzas").value;
    var typePizza = document.getElementById("typePizza").value;
    var deliveryCity = document.getElementById("deliveryCity").value;

    // get the pizza price
    var orderPrice = calculatePrice(numPizzas, typePizza);

    // get the delivery price
    var deliveryPrice = calculateDelivery(orderPrice, deliveryCity);

    // create the output
    var theOutput = "<p>Thank you for your order.</p>";

    // todo: output the delivery price, if there is one

    theOutput += "<p>Your total is: $" + (orderPrice + deliveryPrice);

    // display the output
    document.getElementById("displayTotal").innerHTML = theOutput;
}

/**
 * calculates pizza price
 */
function calculatePrice(numPizzas, typePizza) {
    var orderPrice = Number(numPizzas) * 10;
    var extraCharge = 0;
    
    // todo: calculate extraCharge, if there is one.
    
    orderPrice += extraCharge;
    return orderPrice;
}

/**
 * calculates delivery price
 */
function calculateDelivery(orderPrice, deliveryCity) {
    var deliveryPrice = 0;
    
    // todo: calculate delivery price, if there is one
    
    return deliveryPrice;
}