Instructions
Requirements and Specifications
Source Code
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #F3EFE0;
font-family: arial;
color: #217C7E;
}
#contentwrap {
border: 8px #9A3334 solid;
padding: 20px;
width: 700px;
margin: 40px auto 0px auto;
border-radius: 25px;
background: white;
background-image: url("http://newton.ncc.edu/gansonj/ite154/img/wonderpets.png");
background-repeat: no-repeat;
background-position: right 110px;
}
#heading {
font-size: 2.2em;
border-bottom: 6px #217C7E double;
padding: 10px 0px 10px 0px;
color: darkred;
text-align: center;
}
#formdiv {
padding-top: 25px;
}
.formtext {
font-size: 1em;
margin-top: 20px;
margin-bottom: 2px;
}
.formfield {
border: 2px darkred solid;
background: lightyellow;
color: darkred;
font-size: 1.1em;
padding: 2px;
}
#orderbutton {
border: 2px purple solid;
background-color: lightyellow;
font-size: 1.25em;
border-radius: 25px;
padding: 2px 10px 2px 10px;
}
#orderbutton:hover {
color: lightyellow;
border: 2px lightyellow solid;
background-color: purple;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function()
{
} ); // ends document.ready
</script>
</head>
<body>
<div id="contentwrap">
<div id="heading">Online Event Order Form</div>
<div id="formdiv">
<form>
<div class="formtext">Choose a show</div>
<select class="formfield" style="width:280px;" id="show">
<option value="s">Sesame Street Live ( $29.99 )</option>
<option value="w">The Wiggles Live ( $35.49 )</option>
<option value="d">Dora Live in Concert ( $49.95 )</option>
</select>
<div class="formtext">Enter number of tickets</div>
<input type="text" class="formfield" id="numtix">
<div class="formtext">Are you a VIP member</div>
<input type="checkbox" id="vipmem" /> Yes I am ($10.00 discount on total order)
<div style="margin-top:20px;">
<input type="button" value="Order Tickets" id="orderbutton" onclick="buttonPressed()"/>
</div>
<!-- Add the JavaScript function here -->
<script>
function buttonPressed()
{
// First, get the show selected and its cost
var event = document.getElementById("show");
var show_val = event.value;
var event_str = event.options[event.selectedIndex].text;
// We will split the event_name so we extract only the name of the show without the price
var event_data = event_str.split("(");
var event_name = event_data[0];
var cost = 0.0
if(show_val == "s")
cost = 29.99
else if(show_val == "w")
cost = 35.49
else
cost = 49.95
// Get the number of tickets
var n_tickets = document.getElementById("numtix").value
if(n_tickets > 0) // Continue only if the number of tickets is positive
{
// Check if user is a VIP member
var vip_discount = 0.0;
var is_vip = document.getElementById("vipmem")
if(is_vip.checked)
vip_discoun = 10.00;
// Finally, display invoice
var output = document.getElementById("output")
output.innerHTML = "";
output.innerHTML += "Results of your order<br>"
output.innerHTML += "Selected event: " + event_name + "<br>"
output.innerHTML += "Price per ticket: $" + cost +"<br>"
output.innerHTML += "Number of tickets ordered: " + n_tickets + "<br>"
if(is_vip.checked)
{
output.innerHTML += "VIP member discount was applied<br>"
vip_discount = 10.00;
}
else
output.innerHTML += "VIP member discount not applied<br>"
// Calculate total cost
var total_cost = n_tickets*cost - vip_discount
// Display total cost
output.innerHTML += "Total cost of order: $" + total_cost
}
}
</script>
</form>
<div id="output"></div>
</div> <!-- ends div#formdiv -->
</div> <!-- ends div#contentwrap -->
</body>
</html>