HTML Basic Pizza Ordering Demo

<!doctype html>
<html>

<head>
    <title>HTML Basic Pizza Ordering Demo</title>

</head>

<body>

<style>
fieldset {
    font-family: arial, sans-serif;
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

td {
    border: 1px solid #999999;
    text-align: left;
    padding: 8px;
}

tr {
    background-color: #dddddd;
}
</style>

<body>

<form action="#" method="post" class="demoForm" id="demoForm">
    <fieldset>
    <legend><b>Hello Pizza World!</b></legend>

    <table id="sizes">
        <tr>
        <label>Choose Pizza Size:</label><br>
        <td><input type="radio" name="size" id="Extra Large" size="16" value="12.75">Extra Large ($12.75)</td>
        <td><input type="radio" name="size" id="Large" size="12" value="10.50">Large ($10.50)</td>
        <td><input type="radio" name="size" id="Medium" size="10" value="8.25" checked>Medium ($8.25)</td>
        <td><input type="radio" name="size" id="Small" size="8" value="6">Small ($6)</td>
        </tr>
    </table>
    <br>
    <table id="toppings">
        <tr>
        <label>Toppings:</label><br>
        <td><input type="checkbox" name="extra cheese" value="1.00" /> Extra Cheese (+1.00)</td>
        <td><input type="checkbox" name="beef" value=".60" /> Beef (+0.60)</td>
        <td><input type="checkbox" name="chicken" value=".60" /> Chicken (+0.60)</td>
        <td><input type="checkbox" name="green peppers" value=".30" /> Green Peppers (+0.30)</td>
        <td><input type="checkbox" name="bacon" value=".50" /> Bacon (+0.50)</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="mushrooms" value=".40" /> Mushrooms (+0.40)</td>
        <td><input type="checkbox" name="onions" value=".30" /> Onions (+0.30)</td>
        <td><input type="checkbox" name="black olives" value=".40" /> Black Olives (+0.40)</td>
        <td><input type="checkbox" name="sausage" value=".50" /> Sausage (+0.50)</td>
        <td><input type="checkbox" name="pepperoni" value=".50" /> Pepperoni (+0.50)</td>
        </tr>
    </table>

    <p>
        <i><font color="red">
        TOTAL: $<label id="total">8.25</label></i></font>
        <br><br>
        SIZE: <label id="pizza">Medium</label><br><br>
        ITEMS:<br><label id="items">***</label>
    </p>
    </fieldset>

</form>

<script>

var hl = "rgb(153, 204, 255)"
var hl_x = hl + " none repeat scroll 0% 0%"

// get reference to element containing toppings checkboxes
var cb = document.getElementById('toppings');

// get reference to input elements in toppings container element
var tops = cb.getElementsByTagName('input');

// get reference to input elements in toppings container element
var cells = cb.getElementsByTagName('td');

// assign updateChecks function to onclick property of each checkbox
for (var i=0, len=tops.length; i<len; i++) {
    cells[i].index = i
    cells[i].addEventListener('click', function (e) {
        var i = this.index;
        if ( this.style.background === hl_x ) {
        this.style.background = "#DDDDDD";
        tops[i].checked = false;
        } else {
        this.style.background = hl;
        tops[i].checked = true;
        }
        updateTotal();
    });
}

// get reference to element containing sizes radiobuttons
var rb = document.getElementById("sizes");

// get reference to input elements in toppings container element
var sizes = rb.getElementsByTagName('input');

// assign updateChecks function to onclick property of each checkbox
for (var i=0, len=sizes.length; i<len; i++) {
    sizes[i].onclick = updateTotal;
}

// called onclick of toppings checkboxes
function updateTotal(e) {
    var size = "";
    var text = "";
    var val = 0.009;

    // to show which size got selected
    for (var i=0, len=sizes.length; i<len; i++) {
        if ( sizes[i].checked ) {
            size = sizes[i].id;
            val += parseFloat(sizes[i].value);
        }
    }

    // to show which toppings were selected
    for (var i=0, len=tops.length; i<len; i++) {
        if ( tops[i].checked ) {
            text += tops[i].name + "<br>";
            val += parseFloat(tops[i].value);
        }
    }
    if ( text === "" ) {
        text = "***";
    }

    document.getElementById("pizza").innerHTML = size;
    document.getElementById("items").innerHTML = text.toUpperCase();

    // formats val to 2 decimal places
    val = "" + parseInt(val*100)
    val = val.slice(0,-2) + "." + val.slice(-2,);

    // format val with correct number of decimal places
    // and use it to update value of total text box
    document.getElementById("total").innerHTML = val;
}


</script>

</body>

</html>