Guidelines for doing the extra exercises · For all the extra exercises, you will
ID: 3862996 • Letter: G
Question
Guidelines for doing the extra exercises
· For all the extra exercises, you will start with the HTML and CSS for the user interface. Then, you supply the JavaScript or jQuery that’s required to get the desired results.
· Unless an exercise specifies that you need to modify the HTML or CSS, you won’t have to do that.
· Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important.
· Feel free to copy and paste code from the book applications or exercises that you’ve already done.
· Use your book as a guide to coding.
Complete the exercise below. Place your files in a single zip file and attach for grading by clicking on the assignment link in the Seminar 5 folder.
Guidelines for doing the extra exercises
· For all the extra exercises, you will start with the HTML and CSS for the user interface. Then, you supply the JavaScript or jQuery that’s required to get the desired results.
· Unless an exercise specifies that you need to modify the HTML or CSS, you won’t have to do that.
· Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important.
· Feel free to copy and paste code from the book applications or exercises that you’ve already done.
· Use your book as a guide to coding.
Due: Wednesday
Points Possible: 40
Complete the exercise below. Place your files in a single zip file and attach for grading by clicking on the assignment link in the Seminar 5 folder.
Guidelines for doing the extra exercises
· For all the extra exercises, you will start with the HTML and CSS for the user interface. Then, you supply the JavaScript or jQuery that’s required to get the desired results.
· Unless an exercise specifies that you need to modify the HTML or CSS, you won’t have to do that.
· Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important.
· Feel free to copy and paste code from the book applications or exercises that you’ve already done.
· Use your book as a guide to coding.
Due: Wednesday
Points Possible: 40
Complete the exercise below. Place your files in a single zip file and attach for grading by clicking on the assignment link in the Seminar 5 folder.
Extra 12-2 Add validation to the Reservation application
1. Open the HTML and JavaScript files in this folder:
exercises_extrach12 eservation
Then, run the application to see the user interface shown above. Click on the Submit Reservation button and notice it lets you submit anything you want.
2. In the index.html file, notice that there are now span tags next to the text boxes, and the spans have the same name as the text boxes, with “_error” appended.
3. Also notice that there are script tags for three library files. Open each of these files to see that they all contain some starter code. Refer to the Register application in chapter 12 to complete the code for these files. Note that the date validation code in the Register application validates dates in “mm/yyyy” format, so you’ll want to change that. Also, you might want to add checks for dates like 13/22/2016 or 12/39/2015.
4. In the main JavaScript file, add code to the saveReservation function that validates the form before storing and submitting the data.
5. Test the application to make sure the data validation is working correctly
index.html
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="library_fields.js"></script>
<script src="library_validate.js"></script>
<script src="library_validate_form.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date">
<span id="arrival_date_error"> </span><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights">
<span id="nights_error"> </span><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<span id="name_error"> </span><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<span id="email_error"> </span><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone">
<span id="phone_error"> </span><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation">
<input type="button" id="clear" value="Clear"><br>
</form>
</main>
</body>
</html>
library_fields.js
"use strict";
var fields = {
arrival_date : {},
nights: {},
name: {},
email: {},
phone: {}
};
library_validate_form.js
"use strict";
var RegisterForm = function() { };
RegisterForm.prototype = new Validate(); //inherit
// Method to validate individual field
RegisterForm.prototype.validateField = function(fieldName, text) {
var field = fields[fieldName];
// add code to test various fields and throw error if test fails
if (field.required) {}
if (field.isNumber) {}
if (field.isDate) {}
if (field.isEmail) {}
if (field.isPhone) {}
};
// Error message methods
RegisterForm.prototype.setError = function( fieldName, message ) {
$(fieldName + "_error").setAttribute("class", "error");
$(fieldName + "_error").firstChild.nodeValue = message;
};
RegisterForm.prototype.clearError = function( fieldName, message ) {
$(fieldName + "_error").setAttribute("class", "");
$(fieldName + "_error").firstChild.nodeValue = message || "";
};
// Form methods
RegisterForm.prototype.resetForm = function() {
for ( var fieldName in fields ) {
this.clearError(fieldName, fields[fieldName].message);
$(fieldName).value = ""; //clear corresponding textbox
}
};
RegisterForm.prototype.validateForm = function() {
var isOK = true;
for ( var fieldName in fields ) {
this.clearError(fieldName);
// add try/catch block to validate field
}
return isOK;
};
library_validate.js
"use strict";
var Validate = function() {};
Validate.prototype.isBlank = function(text) {
};
Validate.prototype.isNumber = function(text) {
};
Validate.prototype.isDate = function(text) {
};
Validate.prototype.isEmail = function(text) {
};
Validate.prototype.isPhone = function(text) {
};
reservation.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 10px 20px;
}
fieldset {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
legend {
color: blue;
font-weight: bold;
font-size: 85%;
margin-bottom: .5em;
}
label {
float: left;
width: 90px;
}
input, select {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
}
input {
width: 14em;
}
input[type="radio"], input[type="checkbox"] {
width: 1em;
padding-left: 0;
margin-right: 0.5em;
}
reservation.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
var frm;
var saveReservation = function() {
sessionStorage.arrivalDate = $("arrival_date").value;
sessionStorage.nights = $("nights").value;
sessionStorage.adults = $("adults").value;
sessionStorage.children = $("children").value;
sessionStorage.roomType = $("standard").value; // default value
if ($("business").checked) {
sessionStorage.roomType = $("business").value;
}
if ($("suite").checked) {
sessionStorage.roomType = $("suite").value;
}
sessionStorage.bedType = $("king").value; //default value
if ($("double").checked) {
sessionStorage.bedType = $("double").value;
}
if ($("smoking").checked) {
sessionStorage.smoking = "yes";
} else {
sessionStorage.smoking = "no";
}
sessionStorage.name = $("name").value;
sessionStorage.email = $("email").value;
sessionStorage.phone = $("phone").value;
// submit form
$("reservation_form").submit();
};
var clearForm = function() {
frm.resetForm();
$("arrival_date").focus();
};
window.onload = function() {
frm = new RegisterForm();
frm.resetForm();
$("submit_request").onclick = saveReservation;
$("clear").onclick = clearForm;
$("arrival_date").focus();
};
response.html
<!DOCTYPE html>
<html>
<head>
<title>Reservation Request</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<main>
<script>
document.write("<h3>The following reservation has been submitted</h3>");
document.write("Name: ", sessionStorage.name, "<br>");
document.write("Phone: ", sessionStorage.phone, "<br>");
document.write("Email: ", sessionStorage.email, "<br>");
document.write("Arrival Date: ", sessionStorage.arrivalDate, "<br>");
document.write("Nights: ", sessionStorage.nights, "<br>");
document.write("Adults: ", sessionStorage.adults, "<br>");
document.write("Children: ", sessionStorage.children, "<br>");
document.write("Room Type: ", sessionStorage.roomType, "<br>");
document.write("Bed Type: ", sessionStorage.bedType, "<br>");
document.write("Smoking: ", sessionStorage.smoking, "<br>");
</script>
</main>
</body>
</html>
Reservation Request rGeneral Information Arrival date 12/39/2016 Arrival date is invalid. Nights three Nights must be a number Adults Children r Preferences Room type Standard O Business O Suite Bed type King Double Double Smoking Contact Information Name Name is required. Email Email address is invalid. graceyahoo.com Phone Phone number is invalid. 123-456-789 Clear Submit ReservationExplanation / Answer
index.html
<!DOCTYPE html>
<html>
<head>
<title>Reservation request</title>
<link rel="stylesheet" href="reservation.css">
<script src="library_fields.js"></script>
<script src="library_validate.js"></script>
<script src="library_validate_form.js"></script>
<script src="reservation.js"></script>
</head>
<body>
<main>
<h1>Reservation Request</h1>
<form action="response.html" method="get"
name="reservation_form" id="reservation_form">
<fieldset>
<legend>General Information</legend>
<label for="arrival_date">Arrival date:</label>
<input type="text" name="arrival_date" id="arrival_date">
<span id="arrival_date_error"> </span><br>
<label for="nights">Nights:</label>
<input type="text" name="nights" id="nights">
<span id="nights_error"> </span><br>
<label>Adults:</label>
<select name="adults" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<label>Children:</label>
<select name="children" id="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label>Room type:</label>
<input type="radio" name="room" id="standard" value="standard" checked>Standard
<input type="radio" name="room" id="business" value="business">Business
<input type="radio" name="room" id="suite" value="suite">Suite<br>
<label>Bed type:</label>
<input type="radio" name="bed" id="king" value="king" checked>King
<input type="radio" name="bed" id="double" value="double">Double Double<br>
<input type="checkbox" name="smoking" id="smoking" value="smoking">Smoking<br>
</fieldset>
<fieldset>
<legend>Contact Information</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<span id="name_error"> </span><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email">
<span id="email_error"> </span><br>
<label for="phone">Phone:</label>
<input type="text" name="phone" id="phone">
<span id="phone_error"> </span><br>
</fieldset>
<input type="button" id="submit_request" value="Submit Reservation">
<input type="button" id="clear" value="Clear"><br>
</form>
</main>
</body>
</html>
library_fields.js
"use strict";
var fields = {
arrival_date : {},
nights: {},
name: {},
email: {},
phone: {}
};
library_validate_form.js
"use strict";
var RegisterForm = function() { };
RegisterForm.prototype = new Validate(); //inherit
// Method to validate individual field
RegisterForm.prototype.validateField = function(fieldName, text) {
var field = fields[fieldName];
// add code to test various fields and throw error if test fails
if (field.required) {}
if (field.isNumber) {}
if (field.isDate) {}
if (field.isEmail) {}
if (field.isPhone) {}
};
// Error message methods
RegisterForm.prototype.setError = function( fieldName, message ) {
$(fieldName + "_error").setAttribute("class", "error");
$(fieldName + "_error").firstChild.nodeValue = message;
};
RegisterForm.prototype.clearError = function( fieldName, message ) {
$(fieldName + "_error").setAttribute("class", "");
$(fieldName + "_error").firstChild.nodeValue = message || "";
};
// Form methods
RegisterForm.prototype.resetForm = function() {
for ( var fieldName in fields ) {
this.clearError(fieldName, fields[fieldName].message);
$(fieldName).value = ""; //clear corresponding textbox
}
};
RegisterForm.prototype.validateForm = function() {
var isOK = true;
for ( var fieldName in fields ) {
this.clearError(fieldName);
// add try/catch block to validate field
}
return isOK;
};
library_validate.js
"use strict";
var Validate = function() {};
Validate.prototype.isBlank = function(text) {
};
Validate.prototype.isNumber = function(text) {
};
Validate.prototype.isDate = function(text) {
};
Validate.prototype.isEmail = function(text) {
};
Validate.prototype.isPhone = function(text) {
};
reservation.css
body {
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 auto;
width: 600px;
border: 3px solid blue;
padding: 10px 20px;
}
fieldset {
margin-top: 1em;
margin-bottom: 1em;
padding: .5em;
}
legend {
color: blue;
font-weight: bold;
font-size: 85%;
margin-bottom: .5em;
}
label {
float: left;
width: 90px;
}
input, select {
margin-left: 1em;
margin-right: 1em;
margin-bottom: .5em;
}
input {
width: 14em;
}
input[type="radio"], input[type="checkbox"] {
width: 1em;
padding-left: 0;
margin-right: 0.5em;
}
reservation.js
"use strict";
var $ = function(id) { return document.getElementById(id); };
var frm;
var saveReservation = function() {
sessionStorage.arrivalDate = $("arrival_date").value;
sessionStorage.nights = $("nights").value;
sessionStorage.adults = $("adults").value;
sessionStorage.children = $("children").value;
sessionStorage.roomType = $("standard").value; // default value
if ($("business").checked) {
sessionStorage.roomType = $("business").value;
}
if ($("suite").checked) {
sessionStorage.roomType = $("suite").value;
}
sessionStorage.bedType = $("king").value; //default value
if ($("double").checked) {
sessionStorage.bedType = $("double").value;
}
if ($("smoking").checked) {
sessionStorage.smoking = "yes";
} else {
sessionStorage.smoking = "no";
}
sessionStorage.name = $("name").value;
sessionStorage.email = $("email").value;
sessionStorage.phone = $("phone").value;
// submit form
$("reservation_form").submit();
};
var clearForm = function() {
frm.resetForm();
$("arrival_date").focus();
};
window.onload = function() {
frm = new RegisterForm();
frm.resetForm();
$("submit_request").onclick = saveReservation;
$("clear").onclick = clearForm;
$("arrival_date").focus();
};
response.html
<!DOCTYPE html>
<html>
<head>
<title>Reservation Request</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<main>
<script>
document.write("<h3>The following reservation has been submitted</h3>");
document.write("Name: ", sessionStorage.name, "<br>");
document.write("Phone: ", sessionStorage.phone, "<br>");
document.write("Email: ", sessionStorage.email, "<br>");
document.write("Arrival Date: ", sessionStorage.arrivalDate, "<br>");
document.write("Nights: ", sessionStorage.nights, "<br>");
document.write("Adults: ", sessionStorage.adults, "<br>");
document.write("Children: ", sessionStorage.children, "<br>");
document.write("Room Type: ", sessionStorage.roomType, "<br>");
document.write("Bed Type: ", sessionStorage.bedType, "<br>");
document.write("Smoking: ", sessionStorage.smoking, "<br>");
</script>
</main>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.