EXERCISE 6 ORDER LIST CODE
PACKAGE 1
PACKAGE 2
PACKAGE 3
NO PACKAGE FOUND ( IF YOU PUT INCORRECT PACKAGE NUMBER)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin-left: 280px;
font-family: "verdana";
}
h4 {
margin-left: 285px;
font-family: verdana;
}
p {
margin-left: 40px;
}
label {
display: inline-block;
width: 150px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "verdana";
}
fieldset {
margin-left: 280px;
margin-right: 280px;
background: #6495ED;
padding: 5px;
font-family: "verdana";
}
#demo {
position: relative;
margin-left: 280px;
margin-right: 280px;
}
#runthis {
margin-left: 205px;
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> <or>
<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> 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 = 25000;
total = price*days;
order = "2: photo and video coverage";
document.getElementById("demo").innerHTML = "Name: "+name+"<br> Order: "+order+
"<br> package: 300 Printed photo, copy of digital photos / 1 edited video, copy of raw video footages, with Make up artist and stylist"
+"<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 = "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