Scribd
Upload
95 views5 pages

Pizza JS

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.

Uploaded by

Argon Boron
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
95 views5 pages

Pizza JS

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.

Uploaded by

Argon Boron
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 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/[email protected]/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