Exercise #6: Order List
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin-left: 280px;
font-family: "Century Gothic";
}
h4 {
margin-left: 285px;
font-family: Century Gothic;
}
P {
margin-left:40px;
}
label {
display: inline-block;
width: 200px;
height: 30px;
padding:20px;
margin-left: 20px;
font-family: "Century Gothic";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #635fb0;
padding: 5px;
font-family: "Century Gothic";
}
#demo {
position: relative;
margin-left: 280px;
margin-right: 280px;
}
#runthis {
margin-left: 205px;
margin-top:25px;
}
</style>
</head>
<body>
<h1>OrderList </h1>
<h4>Please enter your details below </h4>
<fieldset>
<label for="name">Enter your Name: </label>
<input type="text" placeholder="Enter name" onfocus="this.placeholder=''" name="Name" id="name" value="" required> <br>
<label for="number">Enter your order code: </label>
<input type="number" placeholder="Enter order code" onfocus="this.placeholder=''" name="Code" id="code" value="" required><br>
<label style="margin-top:-22px;"> <i><br><br> Type "1" for Package 1 <br> Type "2" for Package 2 <br> Type "3" for Package 3 </i> </label> <br><br>
<label for="number">Enter number of days: </label>
<input type="number" placeholder="Enter number of days" onfocus="this.placeholder=''" name="Days" id="days" value="" required> <br>
<button type="button" id="runthis" onclick="display()">Display</button> <br><br>
</fieldset>
<p id="demo"></p>
<script>
function display()
{
name=document.getElementById("name").value;
code=document.getElementById("code").value;
days=document.getElementById("days").value;
switch(code)
{
case '1':
price = 10000;
total = price*days
order = "1: Photo Shoot";
document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+
"<br> Package: 200 Printed photos, copy of digital photos with Make-up Artist and Stylist"
+"<br>.Price: 10,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;
break;
case '2':
price = 25000;
total = price*days
order = "2: Photo and Video Coverage";
document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+
"<br> Package: 300 Printed photos, copy of digital photos / 1 edited video, copy of raw video footages"
+"<br>.Price: 25,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;
break;
case '3':
price = 15000;
total = price*days
order = "2: Video Coverage";
document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+
"<br> Package: 1 edited video, copy of raw video footages, with Make-up Artist and Stylist"
+"<br>.Price: 15,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;
break;
default:
document.getElementById("demo").innerHTML = "No package found!";
break;
}
}
</script>
</body>
</html>
No comments:
Post a Comment