In JavaScript, Capture Pizza Orders With Error Handling 



<!DOCTYPE>
<html lang="en-US">
  <head>
    <title>Pizza Order</title>
    <style>
    label.error{
      color:red;
    }
    </style>
  </head>
  <body>
    <p>
      <label><select id="size">
        <option value=""></option>
        <option value="10.0">SMALL - $10.00</option>
        <option value="12.5">MEDIUM - $12.50</option>
        <option value="15.0">LARGE - $15.00</option>
      </select> Pizza Size</label>
    </p>

    <p>
      <label><input type="checkbox" name="topping" value="2.0"/>Extra Cheese</label>
      <label><input type="checkbox" name="topping" value="0.6"/>Red onions</label>
      <label><input type="checkbox" name="topping" value="3.2"/>Barbecue chicken</label>
      <label><input type="checkbox" name="topping" value="1.3"/>Mushrooms</label>
      <label><input type="checkbox" name="topping" value="0.8"/>Pepperoni</label>
      <label><input type="checkbox" name="topping" value="2.6"/>Olives</label>
    </p>

    <p>
      <label><input type="radio" value="0.0" name="delivery"/>Pickup</label>
      <label><input type="radio" value="3.0" name="delivery"/>Delivery</label>
    </p>
    
    <p>
      <button onclick="placeOrder()">Place Order</button>
    </p>

    <p id="order"></p>

    <script>
      function placeOrder(){
        var setError = function (el, err){
          var lb = el.parentNode;
          lb.className = '';
          if(err)lb.className = 'error';
        }
        var el = document.querySelector('#size');
        setError(el, !el.selectedIndex);
        var sum = 0;
        if(!el.selectedIndex){
          alert('select a pizza size');
          return;
        }
        var add = function(el){
            sum += parseFloat(el.value,10);
        };
        //charge as per size of pizza
        sum += parseFloat(el.options[el.selectedIndex].value,10);
        // find all checked toppings
        document.querySelectorAll('[name=topping]:checked').forEach(add);
        // 11.25% sales tax
        sum += (sum*0.1125);
        // find checked delivery
        el = document.querySelector('[name=delivery]:checked');
        document.querySelectorAll('[name=delivery]').forEach(function(_){
          setError(_, !el);
        });
        if(!el){
          alert('select delivery mode');
          return;
        }
        sum += parseFloat(el.value,10);
        document.querySelector('#order').textContent = 'Your total is: $'+sum.toFixed(2);
      }
    </script>
  </body>
</html>
Download

Comments

Post a Comment

Popular posts from this blog