Scribd Logo
Upload

Welcome to Scribd!

  • 73 views

    Pizza JS

    Uploaded by

    Argon Boron
    This document contains JavaScript code to build an order tracking web application for a pizza shop. It defines functions to initialize the interface, add new orders, and update summary tables tracking pizza sizes and stuffing selections in real-time. User input is stored in arrays and localStorage, and the display is updated after each new order is added.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Pizza JS

    Uploaded by

    Argon Boron
    73 views5 pages
    This document contains JavaScript code to build an order tracking web application for a pizza shop. It defines functions to initialize the interface, add new orders, and update summary tables tracking pizza sizes and stuffing selections in real-time. User input is stored in arrays and localStorage, and the display is updated after each new order is added.

    Original Title

    pizzaJS

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document contains JavaScript code to build an order tracking web application for a pizza shop. It defines functions to initialize the interface, add new orders, and update summary tables tracking pizza sizes and stuffing selections in real-time. User input is stored in arrays and localStorage, and the display is updated after each new order is added.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    73 views5 pages

    Pizza JS

    Uploaded by

    Argon Boron
    This document contains JavaScript code to build an order tracking web application for a pizza shop. It defines functions to initialize the interface, add new orders, and update summary tables tracking pizza sizes and stuffing selections in real-time. User input is stored in arrays and localStorage, and the display is updated after each new order is added.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    You are on page 1of 5

    <html>

    <head>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>

    <script>
    //INJECT SCRIPT HERE

    var sales = [];


    var sizes = [];
    var stuffings = [];

    var size9 = 0;
    var size12 = 0;
    var size14 = 0;

    var stuff_no = 0;
    var stuff_cheese = 0;
    var stuff_sausage = 0;

    var tblSalesListHeader="<thead><tr><th> # </th><th> Customer </th><th> Dine


    </th><th> Size </th><th> Stuffing </th></tr></thead>";
    var tblSizesSummaryDefault = "<tr><td> 9 Inches </td><td> 0
    </td></tr><tr><td> 12 Inches </td><td> 0 </td></tr><tr><td> 14 Inches </td><td> 0
    </td></tr>";
    var tblStuffingsSummaryDefault = "<tr><td> No </td><td> 0 </td></tr><tr><td>
    Cheese </td><td> 0 </td></tr><tr><td> Sausage </td><td> 0 </td></tr>";
    function initComponents(){
    var tblSalesList = document.getElementById("tblSalesList");
    var tblSizesSummary = document.getElementById("tblSizesSummary");
    var tblStuffingsSummary = document.getElementById("tblStuffingsSummary");
    tblSalesList.innerHTML += tblSalesListHeader;
    tblSizesSummary.innerHTML += tblSizesSummaryDefault;
    tblStuffingsSummary.innerHTML += tblStuffingsSummaryDefault;
    updateAllTables()
    }

    function updateTblCustomer(){
    mySales = localStorage.getItem("Sales");
    mySizes = localStorage.getItem("Sizes");
    myStuffings = localStorage.getItem("Stuffings");

    mySales == null ? mySales = sales : sales = JSON.parse(mySales);


    mySizes == null ? mySizes = sales : sizes = JSON.parse(mySizes);
    myStuffings == null ? myStuffings = stuffings : stuffings =
    JSON.parse(myStuffings);

    var tbl = document.getElementById("tblSalesList");


    tbl.innerHTML = tblSalesListHeader;
    for (var x = 0; x < sales.length; x++){
    tbl.innerHTML += "<tr>" +
    "<td>" + x + "</td>" +
    "<td>" + sales[x].name + "</td>" +
    "<td>" + sales[x].dine + "</td>" +
    "<td>" + sales[x].size + "</td>" +
    "<td>" + sales[x].stuff + "</td>" +
    "</tr>";
    }
    }

    function updateTblSizesSummary(){
    var tbl = document.getElementById("tblSizesSummary");
    for (var x = 0; x < sales.length; x++){
    tbl.innerHTML = "<tr><td> 9 Inches </td><td>" + sizes[x].size9 +
    "</td></tr>" +
    "<tr><td> 12 Inches </td><td>" + sizes[x].size12 + "</td></tr>" +
    "<tr><td> 14 Inches </td><td>" + sizes[x].size14 + "</td></tr>"
    }
    }

    function updateTblStuffingsSummary(){
    var tbl = document.getElementById("tblStuffingsSummary");
    for (var x = 0; x < sales.length; x++){
    tbl.innerHTML = "<tr><td> No </td><td>" + stuffings[x].no + "</td></tr>"
    +
    "<tr><td> Cheese </td><td>" + stuffings[x].cheese + "</td></tr>" +
    "<tr><td> Sausage </td><td>" + stuffings[x].sausage + "</td></tr>"
    }
    }

    function updateAllTables(){
    updateTblCustomer();
    updateTblSizesSummary();
    updateTblStuffingsSummary();
    }

    function addOrder(){
    var id = 0;
    var name = document.getElementById("tbxCustomer").value;
    var dine = document.querySelector("input[name='dine']:checked").value;
    var pizzaSize =
    document.querySelector("input[name='pizzaSize']:checked").value;
    var stuff = document.querySelector("input[name='stuff']:checked").value;

    var _sale={
    "id": id,
    "name": name,
    "dine": dine,
    "size": pizzaSize,
    "stuff": stuff,
    };

    // Separate Sizes
    if (pizzaSize == "9 in"){
    size9++;
    }else if (pizzaSize == "12 in"){
    size12++;
    }else{
    size14++;
    }

    var _size={
    "size9": size9,
    "size12": size12,
    "size14": size14,
    };

    //Separate Stuffings

    if (stuff == "No"){
    stuff_no++;
    }else if (stuff == "Cheese"){
    stuff_cheese++;
    }else{
    stuff_sausage++;
    }

    var _stuffing={
    "no": stuff_no,
    "cheese": stuff_cheese,
    "sausage": stuff_sausage,
    };

    sales.push(_sale);
    sizes.push(_size);
    stuffings.push(_stuffing);
    window.localStorage.setItem("Sales", JSON.stringify(sales));
    window.localStorage.setItem("Sizes", JSON.stringify(sizes));
    window.localStorage.setItem("Stuffings", JSON.stringify(stuffings));
    updateAllTables();

    </script>

    </head>

    <body onload="initComponents()">
    <div class="h-50 mt-5 pt-3 px-5 mx-auto bg-light" style="width:700px;">
    <table id="tblCustomerInput" class="table table-borderless">
    <tr>
    <td>Customer</td>
    <td><input type="String" id="tbxCustomer"></td>
    </tr>
    <tr>
    <td>Dine</td>
    <td>
    <input type="radio" id="radDineIn" name="dine" value="Dine in" checked>
    <label for="radDineIn"> Dine-in </label>
    <input type="radio" id="radTakeOut" name="dine" value="Take out">
    <label for="radTakeOut"> Take out </label>
    </td>
    </tr>
    <tr>
    <td>Pizza Size</td>
    <td>
    <input type="radio" id="rad9In" name="pizzaSize" value="9 in" checked>
    <label for="rad9In"> 9 In </label>
    <input type="radio" id="rad12In" name="pizzaSize" value="12 in">
    <label for="rad12In"> 12 In </label>
    <input type="radio" id="rad14In" name="pizzaSize" value="14 in">
    <label for="rad14In"> 14 In </label>
    </td>
    </tr>
    <tr>
    <td>Stuff Crust</td>
    <td>
    <input type="radio" id="radNo" name="stuff" value="No" checked>
    <label for="radNo"> No </label>
    <input type="radio" id="radCheese" name="stuff" value="Cheese">
    <label for="radCheese"> Cheese </label>
    <input type="radio" id="radSausage" name="stuff" value="Sausage">
    <label for="radSausage"> Sausage </label>
    </td>
    </tr>
    <tr>
    <td>
    <button type="button" class="btn btn-primary" onclick="addOrder()">Add
    to List</button>
    <button type="button" class="btn btn-danger" onclick="reset()">Reset
    List</button>
    </td>
    </tr>
    </table>
    </div>

    <div class="mt-3 w-75 mx-auto">

    <h4> Sales List </h4>

    <table id="tblSalesList" class="table table-bordered table-sm">


    <!-- NO CONTENT YET -->
    </table>

    <h4> Sizes Summary </h4>

    <table id="tblSizesSummary" class="table table-bordered table-sm">


    <!-- NO CONTENT YET -->

    </table>

    <h4> Stuffings Summary </h4>

    <table id="tblStuffingsSummary" class="table table-bordered table-sm">


    <!-- NO CONTENT YET -->
    </table>

    </div>

    </body>
    </html>

    You might also like