figuring the price of espresso drinks so baristas can have time to chat Juliette Is Pulling For Us Latte ESPRESSO Clear LATTE CAPPUCCINO Total 4 AMERICANO 3.10 1. 2. 3.
PLEASE HELP ME TO FIX THIS. THIS HAS TO BE THE SAME TO THE IMAGE UPLOADED. I CHANGE THE COLORS
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>"The Bean Counter"</title>
<style type="text/css">
body { background-color : blue; color : silver;
font-family : helvetica; text-align : center}
hr {width: 25%; color: blue;}
h1 {color : white;}
section {margin-left: auto; margin-right : auto; text-align : center;
background-color: #4169E1; border-style : solid;
border-color : MidnightBlue; border-width: medium; padding : 8px;}
.drinkBtn {width 110px;}
.otherBtn {width: 60px;}
.total {border: solid black;}
</style>
</head>
<body>
<h1>"The Bean Counter"</h1>
<hr/>
<p><b>Figuring the price of espresso drinks<br/>
so baristas can have time to chat!</b></p>
<br/>
<section style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell; padding: 3px;;"></div>
<div style="display: table-cell; padding: 3px;"></div>
<div style="display: table-cell; padding: 3px; border: solid silver;">
<form name="emp">
<select id="employee" >
<option value="-">-Sign In-</option>
<option value="C"> Charlie </option>
<option value="J"> Juliette </option>
<option value="M"> Mike </option>
<option value="O"> Oscar </option>
<option value="R"> Romeo </option>
<option value="V"> Victor </option>
</select> Is Pulling For Us
</form>
</div>
<div style="display: table-cell; padding: 3px;"></div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; padding: 3px;">
<input class="echo" type="text" form="esp" id="shotpic" value=" " size="1"/></div>
<div style="display: table-cell; padding: 3px;">
<input class="echo" type="text" form="esp" id="sizepic" value=" " size="1"/></div>
<div style="display: table-cell; padding: 3px;">
<input class="echo" type="text" form="esp" id="coffee" value=" " size="10"/></div>
<div style="display: table-cell; padding: 3px;"></div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;padding: 3px;">
<button form="esp" onclick="shots=1"> 1 </button>
</div>
<div style="display: table-cell;padding: 3px;">
<button form="esp" onclick="ounce=8"> S </button>
</div>
<div style="display: table-cell;padding: 3px;">
<button class="drinkBtn" form="esp" onclick="drink="espresso"> ESPRESSO </button>
</div>
<div style="display: table-cell;padding: 3px;">
<button class="otherBtn" form="esp" onclick="
shots = 1;
drink = "none";
ounce = 0;
disp.value="0.00"
">Clear</button>
</div>
</div>
<!– repeat the table-row div 3 more times -->
<div style="display: table-row;">
<div style="display: table-cell; padding: 3px;"><button form="esp" onclick='shots = 2; shotpic.value="2"'> 2 </button></div>
<div style="display: table-cell; padding: 3px;">
<button form="esp" onclick='ounce = 12; sizepic.value="T"'> T </button></div>
<div style="display: table-cell; padding: 3px;">
<button class="drinkBtn" form="esp" onclick='drink = "latte"; coffee.value="Latte"'> LATTE </button></div>
<div style="display: table-cell;padding: 3px;"></div>
</div>
<div style="display: table-row;">
<div style="display: table-cell; padding: 3px;"><button form="esp" onclick='shots = 3; shotpic.value="3"'> 3 </button></div>
<div style="display: table-cell; padding: 3px;">
<button form="esp" onclick='ounce=16; sizepic.value="G"'> G </button></div>
<div style="display: table-cell; padding: 3px;">
<button class="drinkBtn" form="esp" onclick='drink = "capuccino"; coffee.value="Capuccino"'> CAPUCCINO </button></div>
<div style="display: table-cell; padding: 3px;">
<button class="otherBtn" form="esp" onclick='
var taxRate = 0.075;
var price=0.0;
if (drink == "espresso")
price = 1.40;
if (drink == "latte"||drink=="cappuccino"){
if (ounce == 8)
price = 1.95;
if (ounce == 12)
price = 2.35;
if (ounce == 16)
price = 2.75;
}
if (drink == "americano")
price = 1.20 + 0.30*(ounce/8);
if (drink == "expresso")
price = price + (shots-1)*.50;
price = price+price*taxRate;
disp.value = (Math.round(price*100)/100).toFixed(2);
'> Total </button></div>
</div>
<div style="display: table-row;">
<div style="display: table-cell;padding: 3px;"><button> 4 </button></div>
<div style="display: table-cell;padding: 3px;"></div>
<div style="display: table-cell;padding: 3px;"><button> AMERICANO </button></div>
<div style="display: table-cell;padding: 3px;">
<form name="esp">
<input class="total" type="text" id="disp" value="0.00" size="3" onchange=''/>
</form></div>
</div>
</section>
</script>
</body>
</html>
Trending now
This is a popular solution!
Step by step
Solved in 5 steps with 6 images
