INTERACTIVE MEDIA DESIGN(Midterms): Order List Code
ASSIGNMENT 2.1
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
header {
position:fixed;
font-family: 'century gothic';
top:0px;
left:0px;
width:100%;
height:10%;
color:#FFFFFF;
background-color: rgb(0,0,0);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200% 50%;
font-size: 50px;
padding:15px;
font-color: rgb(255,255,255);
}
body {
margin-top: 120px;
margin-left: 100px;
margin-right: 100px;
font-family: "century gothic";
background-color: #5B091870;
}
footer {
text-align: center;
padding: 25px;
background-color: #FFFFFF00;
color: white;
font-size: 12px;
}
label {
display: inline-block;
width: 150px;
height: 20px;
padding: 10px;
margin-left: 30px;
font-family: "century gothic";
}
fieldset {
margin-left: 100px;
margin-right: 100px;
background: #5B091899;
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>
<header>ORDER LIST</header>
<h5> Please enter your details below </h5>
<fieldset>
<label for="name">ENTER YOUR FULL NAME: </label>
<input type="text" placeholder="Enter name" onfocus="this.placeholder=''" name="Name" id="name" value="" required> <br>
<label for="number">ENTER ORDER CODE: </label>
<input type="number" placeholder="Enter order code" onfocus="this.placeholder=''" name="Code" id="code" value="" required><br>
<label style="margin-top:-5px; margin-left: 30px; margin-right: 100px; font-size: 13px; "> <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" 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, 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>
<footer>
<p>MY ONLINE PORTFOLIO</p>
<p><a href="https://aquire2021.blogspot.com/">ACQUIRE</a></p>
<p><a href="https://www.youtube.com/channel/UCNKLrukAG3xUyn8czAHrSmw">YOUTUBE</a></p>
<p><a href="https://www.instagram.com/enhance.gee/">INSTAGRAM</a></p>
</footer>
</body>
</html>
RESULT:
Comments
Post a Comment