EXERCISE 6 ORDER LIST CODE

 PACKAGE 1 


PACKAGE 2 



PACKAGE 3


 

NO PACKAGE FOUND ( IF YOU PUT INCORRECT PACKAGE NUMBER




THE CODES: 

<!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

Popular posts from this blog