<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin-left: 280px;
font-family: "Consolas";
}
h4 {
margin-left: 285px;
font-family: Consolas;
}
p {
margin-left:40px;
}
label {
display: inline-block;
width: 150px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "Consolas";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #cbc6dc;
padding: 5px
font-family: "Consolas";
}
#demo {
position: relative;
margin-left: 280px;
margin-right: 280px;
}
#runthis {
margin-left: 105px;
margin-top:25px;
}
</style>
</head>
<body>
<h1 Order List </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-right: -20px;"> <1> Type "1" for Package 1 <br> Type "2" for Package 2 <br> Type "3" for Package 3 </1> </label> <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 = 2500
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, with Make-up Artist and Stylist"
+"<br> Prices: 25,000 per day"+"<br> Number of Days: "+days+"<br> Total amount due: "+total;
break;
case '3':
price = 15000;
total =price*days;
order ='3: 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>
Comments
Post a Comment