<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
<title> Best Eatery </title>
<style>
body {background-color: BlanchedAlmond; font-family: optima;
color: MidnightBlue; text-align: center}
p { font-size: 30px}
button {font-size: 20px; background-color: coral}
input { font-size: 20px}
</style>
</head>
<body>
<script>
/*
This function sets each element in its array parameter, p, to a random
number between 5.00 and 25.00 inclusive which will
be the price of the food item. It returns nothing.
*/
function setItemPrices(p)
{
//add code here
for(var i=0;i<p.length;i++)
{
p[i]=Math.floor(Math.random()*20)+5;
}
}
/*
This function sets each element in its array parameter, t, to to the product of
the corresponding array elements in the arrays q and p. It
returns nothing. For example: t[1] = q[1] * p[1]
*/
function getItemTotals(q, p,t)
{
//add code here
for(var i=0;i<q.length;i++)
{
t[i]=Number(q[i])*Number(p[i]);
}
}
/*
This function returns the sum of all of the elements in its array parameter,a.
You will be passing the array that holds your totals to
the parameter a.
*/
function getTotalBill(a)
{
//add code here
var sum=0;
for(var i=0;i<a.length;i++)
{
sum=sum+Number(a[i]);
}
return sum.toFixed(2);
}
/*
This function will find and return the POSITION of
the largest value in its parameter variable, array a.
*/
function findLargestPos(a)
{
//add code here
var largePos=0;
var largeValue=0;
for(var i=0;i<a.length;i++)
{
if(Number(a[i])>largeValue)
{
largePos=i;
largeValue=a[i];
}
}
return largePos;
}
/* This function clears all total textboxes */
function reset()
{
total0.value = '';
total1.value = "";
total2.value = "";
total3.value = "";
total4.value = "";
profit.value = "";
sumTotal.value = "";
}
// The array names holds the names of the food items.
var names = ["toast","butter","cake","fruits","Jam"] // assign an initializer list that holds 5 food items. Keep the names short.
//Complete the instruction below to declare a new array that will hold 5 elements
var quantities = new Array(5);
// Write a loop that will set all values of the quantities array to 0.
for(var i=0;i<quantities.length;i++)
quantities[i]=0;
//Complete the instruction below to declare new arrays that will hold 5 elements each.
var prices = new Array(0,0,0,0,0);
var totals = new Array(0,0,0,0,0);
</script>
<!-- Much of the following is completed for you
You need to complete JS code for the button total-->
<h1> Best Eatery Order Summary </h1>
<table id = "myTable" border="1"; align= "center">
<tr>
<!-- This button fills boxes with menu items from array names.-->
<th> <button id = "name" onclick = 'name0.value = names[0];
name1.value = names[1];
name2.value = names[2];
name3.value = names[3];
name4.value = names[4];'
>Food Item </button> </th>
<th> Enter Number Ordered </th>
<!-- This buttom fills the boxes with items from the array prices (random $ amounts)-->
<th><button id = "PriceEach" onclick = '
setItemPrices(prices);
price0.value = "$" + prices[0].toFixed(2);
price1.value = "$" + prices[1].toFixed(2);
price2.value = "$" + prices[2].toFixed(2);
price3.value = "$" + prices[3].toFixed(2);
price4.value = "$" + prices[4].toFixed(2);
reset();'>Price for each</button></th>
<!-- This button will fill the total amount owed for each food item. For example,
if names[0] = apple, quantity[0] = 2, prices[0] = 1.00, then
total[0] = 2.00 so the total spent on apples is $2.00. -->
<th><button id = "total" onclick = '
getItemTotals(quantities, prices, totals);
total0.value = "$" + totals[0].toFixed(2);
total1.value = "$" + totals[1].toFixed(2);
total2.value = "$" + totals[2].toFixed(2);
total3.value = "$" + totals[3].toFixed(2);
total4.value = "$" + totals[4].toFixed(2);
// Add code below.
sumTotal.value = "$" + getTotalBill(totals);//Call the approprite function to find the total bill amount.
//Display fixed to 2 decimal places
var position = findLargestPos(totals)// Call the apprpopriate function to find the position of the
// largest value in the totals array
profit.value = names[position] //assign the food item with that value to profit.value
' >Item Total</button> </th>
</tr>
<!-- This section deals with the textboxes n the table. There are four values for each
food item to account for: name, quantity, price, total. You do NOT have to
modify any code below.-->
<tr>
<td><input type="text" id="name0" size=10 style="background-color:cadetblue" value = '' onchange = ''></td>
<td><input type="text" id="quantity0" size=10 style = "text-align: center" value = '' onchange =
'quantities[0] = Number(quantity0.value)'></td>
<td><input type="text" id="price0" size=10 style="background-color:cadetblue"readonly></td>
<td><input type="text" id="total0" size=10 style="background-color:cadetblue" readonly></td>
</tr>
<tr>
<td><input type="text" id="name1" size=10 style="background-color:cadetblue" value = '' onchange = ''></td>
<td><input type="text" id="quantity1" size=10 style = "text-align: center" value = '' onchange ='quantities[1]=Number(quantity1.value)'></td>
<td><input type="text" id="price1" size=10 style="background-color:cadetblue"readonly></td>
<td><input type="text" id="total1" size=10 style="background-color:cadetblue" readonly></td>
</tr>
<tr>
<td><input type="text" id="name2" size=10 style="background-color:cadetblue" value = '' onchange = ''></td>
<td><input type="text" id="quantity2" size=10 style = "text-align: center" value = '' onchange ='quantities[2]=Number(quantity2.value)'></td>
<td><input type="text" id="price2" size=10 style="background-color:cadetblue" readonly></td>
<td><input type="text" id="total2" size=10 style="background-color:cadetblue" readonly></td>
</tr>
<tr>
<td><input type="text" id="name3" size=10 style="background-color:cadetblue" value = '' onchange = ''></td>
<td><input type="text" id="quantity3" size=10 style = "text-align: center" value = '' onchange ='quantities[3]=Number(quantity3.value)'></td>
<td><input type="text" id="price3" size=10 style="background-color:cadetblue" readonly></td>
<td><input type="text" id="total3" size=10 style="background-color:cadetblue" readonly></td>
</tr>
<tr>
<td><input type="text" id="name4" size=10 style="background-color:cadetblue" onchange=''></td>
<td><input type="text" id="quantity4" size=10 style = "text-align: center" value = '' onchange =
'quantities[4]=Number(quantity4.value)'></td>
<td><input type="text" id="price4" size=10 style="background-color:cadetblue" readonly></td>
<td><input type="text" id="total4" size=10 style="background-color:cadetblue" readonly></td>
</tr>
</table>
<p>
Total Amount Collected:
<input type = "text" id = "sumTotal" size = 10 = value = "" readonly />
</p>
<p>
Most Profitable Item:
<input type = "text" id = "profit" size = 10 value = "" readonly>
</p>
</body>
</html>
