Dodgy Brakes Car Rental
<html>
<head>
<title>chen assignment 4</title>
<script type="text/javascript">
var client_data = [];
var total = parseInt(0);
var vehicle_size = "";
var addtional_options = "";
function storeClientData() {
var title = document.getElementById("select_title").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var street = document.getElementById("street").value;
var city = document.getElementById("city").value;
var province = document.getElementById("province").value;
var postal_code = document.getElementById("postal_code").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
if (title == "" || first_name == "" || last_name == "" || street == "" || city == ""
|| province == "" || postal_code == "" || phone == "" || email == "") {
alert("data is missing");
}
else {
client_data[0] = title;
client_data[1] = first_name;
client_data[2] = last_name;
client_data[3] = street;
client_data[4] = city;
client_data[5] = province;
client_data[6] = postal_code;
client_data[7] = phone;
client_data[8] = email;
document.getElementById("reservation_form").style.visibility = "visible";
}
}
function slider_value() {
document.getElementById("slider_value").innerHTML = document.getElementById("duration").value;
}
function vehicle_select() {
for (var i = parseInt(0); i < document.reservation.vehicle_type.length; i++) {
if (document.reservation.vehicle_type[i].checked) {
document.getElementById("vehicle_cost").innerHTML = "$" + document.reservation.vehicle_type[i].value.split(" ")[0];
vehicle_size = document.reservation.vehicle_type[i].value.split(" ")[1];
}
}
}
function calculate_rental() {
total = 0;
addtional_options = "";
var vehicle_cost = document.getElementById("vehicle_cost").innerHTML;
if (vehicle_cost != undefined && vehicle_cost != "") {
total += parseInt(vehicle_cost.substring(1));
}
if (document.reservation.navigation.checked)
{
total += 10;
addtional_options += "navigation $10 per day <br/>";
}
if (document.reservation.child_seat.checked) {
total += 5;
addtional_options += "child seat $5 per day <br/>";
}
if (document.reservation.roof_rack.checked) {
total += 15;
addtional_options += "roof rack $15 per day <br/>";
}
if (document.reservation.bicycle_rack.checked) {
total += 15;
addtional_options += "bicycle $15 per day <br/>";
}
total *= document.getElementById("duration").value;
var receipt ="";
receipt = client_data[0] + " " + client_data[1] + " " + client_data[2] + "<br/>";
receipt = receipt + client_data[3] + " " + client_data[4] + " " + client_data[5] + "<br/>";
receipt = receipt + "Contact: " + client_data[7] + "<br/><br/>";
receipt = receipt + "Rental information: <br/>";
receipt = receipt + "car: " + vehicle_size + " " + document.getElementById("vehicle_cost").innerHTML + " per day<br/>";
receipt = receipt + "Options: " +addtional_options;
receipt = receipt + "Duration: " + document.getElementById("duration").value +" days<br/>";
receipt = receipt + "Cost of Rental: $" + total;
document.getElementById("receipt").innerHTML = receipt;
}
</script>
<style>
#title{
text-align:center;
}
#banner {
height: 100px;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKl0MAHu2D9P_FXxFV8blnLZ0dtcSypRgRKKWtn6O0IZe4Uq0A4EsNFiSs3mmYKv4pyEH9Q_dI7N5CkJUBaMy6BrXe4LKsmu2xCX93g2s5psDUeplldzzDdOWhF_aExrr2Fm83Qkcnb6w/s320/dodge.jpg');
background-repeat:repeat-x;
background-size:auto 100px;
}
.submit_button {
background-color: green;
color: yellow;
}
#reservation_form{
visibility:visible;
}
.col-md-6{
}
.form-control{
}
</style>
</head>
<body>
<h2 id="title">Dodgy Brakes Car Rental</h2>
<div id="banner"></div>
<form class="col-md-6">
<h3>Regisration form</h3>
<table class="table table-striped">
<tr>
<td>
<label>title: </label>
</td>
<td>
<select id="select_title" class="form-control">
<option value="">please select one</option>
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
<option value="Dr.">Dr.</option>
</select>
</td>
</tr>
<tr>
<td>
<label>first name: </label>
</td>
<td>
<input type="text" id="first_name" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>last name: </label>
</td>
<td>
<input type="text" id="last_name" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>street address : </label>
</td>
<td>
<input type="text" id="street" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>city : </label>
</td>
<td>
<input type="text" id="city" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>province : </label>
</td>
<td>
<input type="text" id="province" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>postal code : </label>
</td>
<td>
<input type="text" id="postal_code" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>phone # : </label>
</td>
<td>
<input type="tel" id="phone" class="form-control" />
</td>
</tr>
<tr>
<td>
<label>email : </label>
</td>
<td>
<input type="email" id="email" class="form-control" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="form-control submit_button" value="submit" onclick="storeClientData()" />
</td>
</tr>
</table>
</form>
<form class="col-md-6" name="reservation" id="reservation_form">
<h3>Reservation form</h3>
<table class="table table-striped">
<tr>
<td>
<label>duration (days)</label><br />
<span id="slider_value"></span>
</td>
<td>
<input id="duration" type="range" min ="1" max="30" step="1" onchange="slider_value()"/>
</td>
</tr>
<tr>
<td>
<label>type of vehicle</label><br />
<span id="vehicle_cost"></span>
</td>
<td>
<input type="radio" name="vehicle_type" value="25 small" onclick="vehicle_select()" />small<br />
<input type="radio" name="vehicle_type" value="35 mid-size" onclick="vehicle_select()"/>mid-size<br />
<input type="radio" name="vehicle_type" value="45 full-size" onclick="vehicle_select()"/>full-size<br />
<input type="radio" name="vehicle_type" value="50 van" onclick="vehicle_select()"/>van<br />
</td>
</tr>
<tr>
<td>
<label>additional options</label>
<span id="additional"></span>
</td>
<td>
<input type="checkbox" name="navigation" />navigation system $10<br />
<input type="checkbox" name="child_seat" />child seat $5<br />
<input type="checkbox" name="roof_rack" />roof rack $15<br />
<input type="checkbox" name="bicycle_rack" />bicycle rack $15<br />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="form-control submit_button" value="calculate rental" onclick="calculate_rental()" />
</td>
</tr>
</table>
</form>
<p id="receipt"></p>
</body>
</html>
reference:
http://www.html5tutorial.info/html5-range.php
No comments:
Post a Comment