Dodgy Brakes Car Rental
var client_data = [];
var total = parseInt(0);
var vehicle_size = "";
var addtional_options = "";
window.onload = initial_function;
function initial_function() {
var today = new Date();
document.getElementById("time").innerHTML = today;
}
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 {
var name = first_name + " " + last_name;
if (!checkName(name))
{
alert("full name is invalid");
return;
}
if (!checkPostalCode(postal_code))
{
alert("postal code is invalid");
return;
}
if (!checkTelephone(phone))
{
alert("phone is invalid");
return;
}
if (!checkEmail(email))
{
alert("email is invalid");
return;
}
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;
}
//functions with regular expressions
function checkName(formname) {
//pattern variable
var pattern = /^[a-zA-Z][^0-9]+$/;
//test forname against pattern and return true or false
return pattern.test(formname);//returns boolean true or false
}
function checkPostalCode(postalcode) {
var pattern = /[ABCEGHJKLMNPRSTVXY][0-9][ABCEGHJKLMNPRSTVWXYZ][0-9][ABCEGHJKLMNPRSTVWXYZ][0-9]/;
//change everything to upper case
postalcode = postalcode.toUpperCase();
return pattern.test(postalcode);//returns either true or false
}
function checkTelephone(telephone) {
//pattern checks for North American area codes and phone number
//first number cannot be a '1'
var pattern = /[2-9]{1}[0-9]{9}$/;
return pattern.test(telephone);
}
function checkEmail(email) {
pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
return pattern.test(email);
}
------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>assignment final</title>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="all">
<link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
</head>
<body>
<h2 id="title">Dodgy Brakes Car Rental</h2>
<div id="banner"></div>
<label id="time"></label>
<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" placeholder="T2N1N4"/>
</td>
</tr>
<tr>
<td>
<label>phone # : </label>
</td>
<td>
<input type="tel" id="phone" class="form-control" placeholder="4031234567"/>
</td>
</tr>
<tr>
<td>
<label>email : </label>
</td>
<td>
<input type="email" id="email" class="form-control" placeholder="yourname@company.net"/>
</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>
No comments:
Post a Comment