<!
-- RIFQI RACHMANDA ERYAWAN - 001201700004 -->
<html>
<head>
<title>CSIP FOOD ORDER!</title>
<style type="text/css">
body {background-image:
url("[Link]
h1 {text-align: center; color: white; font-family: segoe ui;
font-size: 50;}
p {color: white; font-family: segoe ui;}
hr {width: 100%; height: 20; border-color: white; background-
color: white;}
td {font-family: segoe ui; font-size: 20; color: white; text-
align: center;}
table, tr, td {border: 2px solid white; border-collapse:
collapse;}
[Link] {color: white; font-family: segoe ui; font-size: 20}
button {background-color: #2196F3;border: none; color:
white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-
block;font-size: 16px;margin: 4px 2px;cursor: pointer;font-family: futura hv bt;}
input[type=text] {width: 100px;padding: 12px 20px;margin: 8px
0;box-sizing: border-box;border: 3px solid #ccc;-webkit-transition:
0.5s;transition: 0.5s;outline: none;}
input[type=text]:focus {border: 3px solid #555;}
</style>
</head>
<body>
<div id="input_div">
<h1>< CRINGEY CHEESE CAFE ></h1>
<hr align="center">
<table align="center">
<tr>
<td width="400px">CAFE MENU</td>
<td width="200px">PRICE</td>
<td width="200px">QUANTITY</td>
<td width="200px">SUBTOTAL</td>
</tr>
<tr>
<td>A. MACARONI AND CHEESE</td>
<td>Rp. 20.000</td>
<td><button onclick="decreaseA()">-</button><button
onclick="increaseA()">+</button><input type="text" id="aa" value="0"></td>
<td><input type="text" id="one" value="0"></td>
</tr>
<tr>
<td>B. CHEESE LASAGNA</td>
<td>Rp. 30.000</td>
<td><button onclick="decreaseB()">-</button><button
onclick="increaseB()">+</button><input type="text" id="bb" value="0"></td>
<td><input type="text" id="two" value="0"></td>
</tr>
<tr>
<td>C. MOZZARELLA CHEESE OMELETTE</td>
<td>Rp. 40.000</td>
<td><button onclick="decreaseC()">-</button><button
onclick="increaseC()">+</button><input type="text" id="cc" value="0"></td>
<td><input type="text" id="three" value="0"></td>
</tr>
<tr>
<td>D. OREO CHEESECAKE</td>
<td>Rp. 30.000</td>
<td><button onclick="decreaseD()">-</button><button
onclick="increaseD()">+</button><input type="text" id="dd" value="0"></td>
<td><input type="text" id="four" value="0"></td>
</tr>
<tr>
<td>E. OREO MILKSHAKE</td>
<td>Rp. 20.000</td>
<td><button onclick="decreaseE()">-</button><button
onclick="increaseE()">+</button><input type="text" id="ee" value="0"></td>
<td><input type="text" id="five" value="0"></td>
</tr>
<tr>
<td colspan="4"><hr align="center"></td>
<tr>
<td colspan="3">GRAND TOTAL</td>
<td id="total"></td>
</tr>
<script type="text/javascript">
var aa = 0;
function increaseA(){
aa += 20000;
[Link]('one').value = aa;
[Link]('aa').value = aa/20000;
bill();
}
function decreaseA(){
if(aa > 0){
aa -= 20000;
[Link]('one').value = aa;
[Link]('aa').value = aa/20000;
bill();
}
}
var bb = 0;
function increaseB(){
bb += 30000;
[Link]('two').value = bb;
[Link]('bb').value = bb/30000;
bill();
}
function decreaseB(){
if(bb > 0){
bb -= 30000;
[Link]('two').value = bb;
[Link]('bb').value = bb/30000;
bill();
}
}
var cc = 0;
function increaseC(){
cc += 40000;
[Link]('three').value = cc;
[Link]('cc').value = cc/40000;
bill();
}
function decreaseC(){
if(cc > 0){
cc -= 40000;
[Link]('three').value = cc;
[Link]('cc').value = cc/40000;
bill();
}
}
var dd = 0;
function increaseD(){
dd += 30000;
[Link]('four').value = dd;
[Link]('dd').value = dd/30000;
bill();
}
function decreaseD(){
if(dd > 0){
dd -= 30000;
[Link]('four').value = dd;
[Link]('dd').value = dd/30000;
bill();
}
}
var ee = 0;
function increaseE(){
ee += 20000;
[Link]('five').value = ee;
[Link]('ee').value = ee/20000;
bill();
}
function decreaseE(){
if(ee > 0){
ee -= 20000;
[Link]('five').value = ee;
[Link]('ee').value = ee/20000;
bill();
}
}
function bill() {
total1= aa + bb + cc + dd + ee;
[Link]("total").innerHTML = total1;
}
function list() {
if(aa>0)
[Link]("MAC").innerHTML = "MACARONI AND CHEESE
("+aa/20000 + ")";
if(bb>0)
[Link]("LAS").innerHTML = "CHEESE LASAGNA
("+bb/30000 + ")";
if(cc>0)
[Link]("OME").innerHTML = "MOZZARELLA CHEESE
OMELETTE ("+cc/40000 + ")";
if(dd>0)
[Link]("OCH").innerHTML = "OREO CHEESECAKE
("+dd/30000 + ")";
if(ee>0)
[Link]("OMI").innerHTML = "OREO MILKSHAKE
("+ee/20000 + ")";
[Link]("lister").innerHTML = total1;
emp();
}
function emp() {
aa = 0;
[Link]('one').value = 0;
[Link]('aa').value = 0;
bb = 0;
[Link]('two').value = 0;
[Link]('bb').value = 0;
cc = 0;
[Link]('three').value = 0;
[Link]('cc').value = 0;
dd = 0;
[Link]('four').value = 0;
[Link]('dd').value = 0;
ee = 0;
[Link]('five').value = 0;
[Link]('ee').value = 0;
}
</script>
</table>
</div>
<center><button onclick="list()">Submit</button></center>
<center><p>Invoice :</p></center>
<p><div class="invoice" id="MAC" align="center" ></div></p>
<p><div class="invoice" id="LAS" align="center"></div></p>
<p><div class="invoice" id="OME" align="center"></div></p>
<p><div class="invoice" id="OCH" align="center"></div></p>
<p><div class="invoice" id="OMI" align="center"></div></p>
<p><div class="invoice" id="lister" align="center"></div></p>
</body>
</html>
<!-- RIFQI RACHMANDA ERYAWAN - 001201700004 -->