Meetup Catering Calculator

by Walter Rumsby

HTML

<label>
    Number of RSVPs
    <input type="number" id="n"/>
</label>
<table>
    <tbody>
        <tr>
            <th>Pizza</th>
            <td id="pizza-units"></td>
            <td id="pizza-cost"></td>
        </tr>
        <tr>
            <th>Beer</th>
            <td id="beer-units"></td>
            <td id="beer-cost"></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td id="total-cost"></td>
        </tr>
    </tfoot>
</table>

CSS

body {
    font-family: sans-serif;
    line-height: 2.0;
    font-size: 13px;
}

input {
    font-size: 13px;
}

JavaScript

(function () {
    'use strict';
    
    var unitCost = {
        beer: 25,
        pizza: 20
    };
    
    function $(id) {
        return document.getElementById(id);
    }
    
    function calculatePizza (value) {
    	var pies = Math.floor(value / 3);
        
        return pies;
    }

    function calculateBeer (value) {
    	var dozen = Math.ceil(value / 12);
        
        return dozen;
    }
    
    var inputEl = $('n');
    var pizzaEl = $('pizza-units');
    var pizzaCostEl = $('pizza-cost');
    var beerEl = $('beer-units');
    var beerCostEl = $('beer-cost');
    var totalCostEl = $('total-cost');
    
    inputEl.addEventListener('change', function (e) {
       var value = +(inputEl.value);
       var pizzaUnits = calculatePizza(value);
       var pizzaPrice = pizzaUnits * unitCost.pizza;
       var beerUnits = calculateBeer(value);
       var beerPrice = beerUnits * unitCost.beer;
                                     
       pizzaEl.innerHTML = '' + pizzaUnits;
       pizzaCostEl.innerHTML = '$' + pizzaPrice;
       beerEl.innerHTML = '' + beerUnits;
       beerCostEl.innerHTML = '$' + beerPrice;
       totalCostEl.innerHTML = '$' + (pizzaPrice + beerPrice);
    });
    
}());