Order List HTML coding

 Output

the code


<!DOCTYPE html>

<html>

<head>

Order List

</head>

<body>

<h1> Enter your details below </h1>

<fieldset>

<label for="name">Enter your name: </label>

<input type="text" placeholder="Enter name" onfocus="this.placeholder=' ' " name="Name" value=" " required> <br>

<label for="number"> Enter your order code: </label>

<input type="number" placeholder="enter order code" onfocus="this.placeholder=' '" name="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 </i> </label> <br>

<label for="number">Enter number of Days </label>

<input type="number" placeholder="Enter number of days" onfocus="this.placeholder=' '" name="Days" value=" " required> <br>

<button type="button" id="runthis" onclick="display() "> Display</button> <br> <br>

</fieldset>

<script>

function display ()

{

name=document.getElementbyId("name").value;

code=document.getElementbyId("code").value;

name=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 artists 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, with Make-up artists and stylists"

+"<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 footage, 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

Popular posts from this blog

Animation Transition Activity

Adding A Youtube Link Embed

let's talk about Sketches