Pizza_Project/Pizza.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="PIZZA_JAVASCRIPT/Pizza.js" defer></script>
    <link rel="stylesheet" type="text/css" href="PIZZA_CSS/Pizza.css" />
    <title>Pizza Drill Demo</title>
  </head>
  <body>
    <div id="menuBG">
      <!-- All other components rest inside this <div> -->
      <h1 style="margin: 0 0px 0 150px">Pizza Drill Tutorial</h1>
      <!-- Menu's "title" -->
      <input id="btnOrder" type="button" onClick="getReceipt()" value="Place Order" />
      <form id="frmMenu">
        <!-- Interactive part of the menu -->
        <div class="menu left">
          <!-- These radio buttons allow selection of only one choice -->
          <h3>Size:</h3>
          <input class="size" type="radio" name="Size" value="Personal Pizza" />Personal Pizza<br />
          <input class="size" type="radio" name="Size" value="Small Pizza" />Small Pizza<br />
          <input class="size" type="radio" name="Size" value="Medium Pizza" />Medium Pizza<br />
          <input class="size" type="radio" name="Size" value="Large Pizza" />Large Pizza<br />
          <input class="size" type="radio" name="Size" value="Extra Large Pizza" />Extra LargePizza<br />
        </div>
        <div class="menu center">
          <!-- These checkboxes allow selection of multiple choices -->
          <h3>Vegetables:</h3>
          <input class="toppings" type="checkbox" name="Topping" value="Mushrooms" />Mushrooms<br />
          <input class="toppings" type="checkbox" name="Topping" value="Onions" />Onions<br />
          <input class="toppings" type="checkbox" name="Topping" value="Tomatoes" />Tomatoes<br />
          <input class="toppings" type="checkbox" name="Topping" value="Olives" />Olives<br />
          <input class="toppings" type="checkbox" name="Topping" value="Green Peppers" />Green Peppers<br />
          <input class="toppings" type="checkbox" name="Topping" value="Pineapple" />Pineapple<br />
        </div>
        <div class="menu right">
          <!-- These checkboxes allow selection of multiple choices -->
          <h3>Meats:</h3>
          <input class="toppings" type="checkbox" name="Topping" value="Pepperoni" />Pepperoni<br />
          <input class="toppings" type="checkbox" name="Topping" value="Sausage" />Sausage<br />
          <input class="toppings" type="checkbox" name="Topping" value="Canadian Bacon" />Canadian Bacon<br />
          <input class="toppings" type="checkbox" name="Topping" value="Ground Beef" />Ground Beef<br />
          <input class="toppings" type="checkbox" name="Topping" value="Ham" />Ham<br />
          <input class="toppings" type="checkbox" name="Topping" value="Anchovy" />Anchovy<br />
          <input class="toppings" type="checkbox" name="Topping" value="Chicken" />Chicken<br />
        </div>
        <div id="cart">
          <!-- Responsive part of the menu -->
          <div id="showText"></div>
          <div id="totalPrice"></div>
        </div>
      </form>
    </div>
  </body>
</html>