JavaScript and jQuery Help: We have to create a Class Maintenance application. I
ID: 3831132 • Letter: J
Question
JavaScript and jQuery Help: We have to create a Class Maintenance application. I have done all of the following steps except one, which is have the register.html page display the classes that were entered in the catalog.html page, as shown in the "Register for Classes" photo below. That's the only thing I have a problem with.
The steps for the two pages are as follows:
For the catalog.html page,
JavaScript and jQuery Help
1.Display all the classes that are in web storage at the top of the page.
2.Accept and validate the entry fields for a new class.
3. Add each new class offering to web storage and then sort and display the table for all the classes when the user clicks the Add button.
Technical specifications
- As you enhance this application, create separate library files for the code that works with web storage, data validation, and class maintenance.
- Use objects in each of the libraries, and choose which type of object to use based on the following:
- There should be only one instance of the object that validates data, and it doesn’t need to protect any private state.
- You should be able to create multiple instances of the object that gets items in and out of local storage (one instance per key).
- There should be only one instance of the object that adds and retrieves classes. This object should use one or more instances of the web storage object to get classes in and out of web storage, and it should have private state to protect the objects and variables it uses to work with web storage.
- Use a namespace in your libraries to keep the objects out of the global namespace.
For the register.html page,
1.Display all the classes that are in web storage below the five entry fields so the user can select one or more. There are only three above, but you can add more to web storage by using the Class Maintenance page.
2.Accept and validate the five entry fields for a student.
3.Display the student data and the selected classes when the student clicks the Register button.
Technical specifications:
- Use function libraries for web storage, validation, and classes.
CATALOG.HTML
<!DOCTYPE html>
<html>
<head>
<title>Class Catalog Maintenance</title>
<link type="text/css" rel="stylesheet" href="catalog.css">
<script type="text/javascript" src="catalog.js"></script>
<script type="text/javascript" src="validate_catalog.js"></script>
</head>
<body>
<main>
<form id="form">
<h1>Class Catalog Maintenance</h1>
<section>
<h2>Classes</h2>
<table id="classes_table">
<thead>
<tr>
<th>Name</th>
<th>Number</th>
<th>Start</th>
<th>Length</th>
<th>Weekday</th>
<th>Time</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
</table>
</section>
<section>
<h2>Add a class</h2>
<label for="class_name">Class Name:</label>
<input type="text" name="class_name" id="class_name" maxlength="50"><br>
<label for="class_number">Class Number:</label>
<input type="text" name="class_number" id="class_number" maxlength="10"><br>
<label for="start_date">Start Date:</label>
<input type="text" name="start_date" id="start_date" maxlength="10"><br>
<label for="class_length">Class Length (in weeks):</label>
<select name="class_length" id="class_length">
<option></option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select><br><br>
<label for="week_day">Weekday and Time:</label>
<select name="week_day" id="week_day">
<option></option>
<option>MWF</option>
<option>TH</option>
</select>
<select name="class_time" id="class_time">
<option></option>
<option>08:00</option>
<option>09:00</option>
<option>10:00</option>
<option>11:00</option>
<option>13:00</option>
<option>14:00</option>
<option>15:00</option>
<option>16:00</option>
<option>17:00</option>
<option>19:00</option>
<option>20:00</option>
</select><br><br>
<label for="class_desc">Class Description</label><br>
<textarea name="class_desc" id="class_desc" rows="6" cols="50"></textarea><br>
<input type="button" name="add_class" id="add_class" value="Add">
<input type="reset" name="clear_form" id="clear_form" value="Clear">
</section>
</form>
</main>
</body>
</html>
CATALOG.CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 1000px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
h2 {
font-size: 120%;
margin-bottom: .25em;
}
label {
float: left;
width: 9em;
}
input, select {
width: 20em;
margin-left: 1em;
margin-bottom: 1em;
}
textarea {
margin: .5em;
}
.error { color: red; }
.show { display: block; }
.hide { display: none; }
th, td {
text-align: left;
padding: .2em .7em;
}
VALIDATE_CATALOG.JS
"use strict";
// Form validation file
var validateSpace = {}; // Form validation namespace
validateSpace.validateForm = function () {
if (classSpace !== undefined) { // See if class namespace is defined
var msg = ""; // Create empty message string
// validate and store data from page
if ($("class_name").value.length === 0) {
msg = msg.concat("Class name is required. ");
}
else {
classSpace.class.class_name = ($("class_name").value);
}
if ($("class_number").value.length === 0) {
msg = msg.concat("Class number is required. ");
} else {
classSpace.class.class_number = ($("class_number").value);
}
if ($("start_date").value.length === 0) {
msg = msg.concat("Start Date is required. ");
} else {
var val = $("start_date").value;
var isValid = true;
// check for formatting
if (val.indexOf("/") === -1) {
isValid = false;
}
var year = val.substring(val.length - 4);
if (isNaN(year)) {
isValid = false;
}
// check for valid date
var date = new Date(val);
if (date.toString() === "Invalid Date") {
isValid = false;
} else {
// check for future date
var today = new Date();
var diff = date.getTime() - today.getTime();
if (diff < 0) {
isValid = false;
}
}
if (isValid) {
classSpace.class.start_date = ($("start_date").value);
} else {
msg = msg.concat("Start Date must be a future date in MM/DD/YYYY format. ");
}
}
if ($("class_length").value.length === 0) {
msg = msg.concat("Class length is required. ");
}
else {
classSpace.class.class_length = ($("class_length").value);
}
if ($("week_day").value.length === 0 || $("class_time").value.length === 0) {
msg = msg.concat("Weekday and Time are required. ");
}
else {
classSpace.class.week_day = ($("week_day").value);
classSpace.class.class_time = ($("class_time").value);
}
if ($("class_desc").value.length === 0) {
msg = msg.concat("Class description is required. ");
}
else {
classSpace.class.class_desc = ($("class_desc").value);
}
return msg;
}
}
REGISTER.HTML
<!DOCTYPE html>
<html>
<head>
<title>Register for Classes</title>
<link type="text/css" rel="stylesheet" href="catalog.css">
</head>
<body>
<main>
<form id="form">
<h1>Register for Classes</h1>
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" maxlength="50"><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" maxlength="20"><br>
<label for="phone_number">Phone:</label>
<input type="text" name="phone_number" id="phone_number" maxlength="10"><br>
<label for="email_id">Email:</label>
<input type="text" name="email_id" id="email_id" maxlength="50"><br>
<label for="zip_code">Zip Code:</label>
<input type="text" name="zip_code" id="zip_code" maxlength="10"><br>
<label for="regi_classes">Select classes:</label><br>
<input type="checkbox" name="regi_classes[]" value="HTML5 and CSS3" class="checkbox_classes"> HTML5 and CSS3<br>
<input type="checkbox" name="regi_classes[]" value="Javascript and jQuery" class="checkbox_classes" > Javascript and jQuery<br>
<input type="checkbox" name="regi_classes[]" value="PHP and MYSQL" class="checkbox_classes"> PHP and MYSQL<br>
<input type="button" name="register_std" id="register_std" value="Register">
<input type="reset" name="clear_form" id="clear_form" value="Clear">
</form>
<table id="classes_table">
<tbody>
</tbody>
</table>
</main>
<script type="text/javascript" src="register.js"></script>
<script type="text/javascript" src="validate_register.js"></script>
</body>
</html>
CATALOG.CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: white;
width: 1000px;
margin: 0 auto;
border: 3px solid blue;
padding: 0 2em 1em;
}
h1 {
font-size: 150%;
color: blue;
margin-bottom: .5em;
}
h2 {
font-size: 120%;
margin-bottom: .25em;
}
label {
float: left;
width: 9em;
}
input, select {
width: 20em;
margin-left: 1em;
margin-bottom: 1em;
}
textarea {
margin: .5em;
}
.error { color: red; }
.show { display: block; }
.hide { display: none; }
th, td {
text-align: left;
padding: .2em .7em;
}
REGISTER.JS
"use strict";
var $ = function (id) { return document.getElementById(id); };
// function for register
var registStd = function() {
// array object made
var newClass = [];
// creates empty message string
var msg = "";
// validates and stores data from page, includign first and last name, phone #, e-mail, and zip code
if ($("first_name").value.length === 0) {
msg = msg.concat("First name is required. ");
} else {
newClass.push($("first_name").value);
}
if ($("last_name").value.length === 0) {
msg = msg.concat("Last name is required. ");
}
else {
newClass.push($("last_name").value);
}
if ($("phone_number").value.length === 0) {
msg = msg.concat("Phone number is required. ");
}
else {
var numbers = /^[0-9]+$/;
if($("phone_number").value.match(numbers)) {
newClass.push($("phone_number").value);
}
else if ($("phone_number").value.length < 10) {
msg = msg.concat("Phone number should be a mininum or maximum number of 10. ");
}
else {
msg = msg.concat("Phone number should be numeric. ");
}
}
if ($("email_id").value.length === 0) {
msg = msg.concat("Email ID is required. ");
}
else {
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
var emailflag = emailReg.test( $("email_id").value );
if(emailflag) {
newClass.push($("email_id").value);
}
else {
msg = msg.concat("Invalid email ID. ");
}
}
if ($("zip_code").value.length === 0) {
msg = msg.concat("Zip code is required. ");
}
else {
var numbers = /^[0-9]+$/;
if($("zip_code").value.match(numbers)) {
newClass.push($("zip_code").value);
}
else {
msg = msg.concat("Zip code should be numeric. ");
}
}
var checkedValue = '';
var inputElements = document.getElementsByClassName('checkbox_classes');
for(var i=0; inputElements[i]; ++i) {
if(inputElements[i].checked) {
checkedValue += inputElements[i].value+",";
}
}
checkedValue = checkedValue.slice(0, -1);
newClass.push(checkedValue);
// informs user of any validation errors
if (msg.length > 0) {
alert(msg);
} else {
// converts the class array to a string
var classString = newClass.join("|");
// adds the string to local storage determining whether any classes are already located in local storage
localStorage.setItem("classes", "");
if (localStorage.classes !== undefined) {
localStorage.classes = classString; // insert
} else {
localStorage.classes += "~" + classString;
}
// clears form and displays classes again
clear();
showClasses();
}
};
// function created to display the classes stored
var showClasses = function() {
// gets table from the catalog.html and tbody elements from table
if(localStorage.classes) {
var tBody = document.getElementById("classes_table");
// clears previous rows from tbody element
tBody.innerHTML = "";
// get classes from local storage
var storedClasses = localStorage.classes || "";
if (storedClasses.length > 0) {
// splits string of classes already stored to get array of class strings
var classStrings = storedClasses.split("~");
// loops class strings and creates html for rows
for (var s in classStrings) {
// creates a new row element
var row = tBody.insertRow(-1);
// splits string and acquires the class array
var individualClass = classStrings[s].split("|");
// joins array create html for the row
var html = "<tr><td>" + individualClass.join("</td><td>") + "</td></tr>";
row.innerHTML = html;
}
}
}
};
var clear = function() {
$("form").reset();
};
window.onload = function() {
$("register_std").onclick = registStd;
$("clear_form").onclick = clear;
};
showClasses();
VALIDATE_REGISTER.JS
"use strict"
// Form validation file
var validateSpace = {}; // Form validation namespace
validateSpace.validateForm = function () {
if (classSpace !== undefined) { // See if class namespace is defined
var msg = ""; // Create empty message string
// validate and store data from page
if ($("first_name").value.length === 0) {
msg = msg.concat("First name is required. ");
} else {
classSpace.class.first_name = ($("first_name").value);
}
if ($("last_name").value.length === 0) {
msg = msg.concat("Last name is required. ");
}
else {
classSpace.class.last_name = ($("last_name").value);
}
if ($("phone_number").value.length === 0) {
msg = msg.concat("Phone number is required. ");
}
else {
var numbers = /^[0-9]+$/;
if($("phone_number").value.match(numbers)) {
classSpace.class.phone_number = ($("phone_number").value);
}
else if ($("phone_number").value.length < 10) {
msg = msg.concat("Phone should be min or max 10 numbers. ");
}
else {
msg = msg.concat("Phone number should be numeric. ");
}
}
if ($("email_id").value.length === 0) {
msg = msg.concat("Email id is required. ");
}
else {
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
var emailflag = emailReg.test( $("email_id").value );
if(emailflag) {
classSpace.class.phone_number = ($("email_id").value);
}
else {
msg = msg.concat("Invalid email id. ");
}
}
if ($("zip_code").value.length === 0) {
msg = msg.concat("Zip code is required. ");
}
else {
var numbers = /^[0-9]+$/;
if($("zip_code").value.match(numbers)) {
classSpace.class.phone_number = ($("zip_code").value);
}
else {
msg = msg.concat("Zip code should be numeric. ");
}
}
var checkedValue = '';
var inputElements = document.getElementsByClassName('checkbox_classes');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue += inputElements[i].value+",";
}
}
checkedValue = checkedValue.slice(0, -1);
classSpace.class.regi_classes = checkedValue;
return msg;
}
}
Class Catalog Maintenance Classes Number Start Length Weekday Time Description Name Web Design I IT 101 1/9/2017 10 MWF 10:00 HTML5 and CSS3 Web Design II IT 102 1/9/2017 10 13:00 JavaScript and jQuery TH MWF Web Design III IT 103 1/9/2017 10 08:00 PHP and MySQL Add a class Class Name: Class Number: Start Date Class Length (in weeks): weekday and Time: Class Description Add ClearExplanation / Answer
<!DOCTYPE html>
<html>
<head>
<title>Register for Classes</title>
<link type="text/css" rel="stylesheet" href="catalog.css">
</head>
<body>
<main>
<form id="form">
<h1>Register for Classes</h1>
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name" maxlength="50"><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name" maxlength="20"><br>
<label for="phone_number">Phone:</label>
<input type="text" name="phone_number" id="phone_number" maxlength="10"><br>
<label for="email_id">Email:</label>
<input type="text" name="email_id" id="email_id" maxlength="50"><br>
<label for="zip_code">Zip Code:</label>
<input type="text" name="zip_code" id="zip_code" maxlength="10"><br>
<label for="regi_classes">Selected Classes:</label><br>
<input type="checkbox" name="regi_classes[]" value="HTML5 and CSS3" class="checkbox_classes"> HTML5 and CSS3<br>
<input type="checkbox" name="regi_classes[]" value="Javascript and jQuery" class="checkbox_classes" > Javascript and jQuery<br>
<input type="checkbox" name="regi_classes[]" value="PHP and MYSQL" class="checkbox_classes"> PHP and MYSQL<br>
<input type="button" name="register_std" id="register_std" value="Register">
<input type="reset" name="clear_form" id="clear_form" value="Clear">
</section>
</form>
<table id="classes_table">
<tbody>
</tbody>
</table>
</main>
<script type="text/javascript" src="register.js"></script>
<script type="text/javascript" src="validate_register.js"></script>
</body>
</html>
-------------------register.js------------------------
"use strict";
var $ = function (id) { return document.getElementById(id); };
var registStd = function() {
// create new array object
var newClass = [];
// create empty message string
var msg = "";
// validate and store data from page
if ($("first_name").value.length === 0) {
msg = msg.concat("First name is required. ");
} else {
newClass.push($("first_name").value);
}
if ($("last_name").value.length === 0) {
msg = msg.concat("Last name is required. ");
}
else {
newClass.push($("last_name").value);
}
if ($("phone_number").value.length === 0) {
msg = msg.concat("Phone number is required. ");
}
else {
var numbers = /^[0-9]+$/;
if($("phone_number").value.match(numbers))
newClass.push($("phone_number").value);
else if ($("phone_number").value.length < 10) {
msg = msg.concat("Phone should be min or max 10 numbers. ");
}
else
msg = msg.concat("Phone number should be numeric. ");
}
if ($("email_id").value.length === 0) {
msg = msg.concat("Email id is required. ");
}
else {
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
var emailflag = emailReg.test( $("email_id").value );
if(emailflag)
newClass.push($("email_id").value);
else
msg = msg.concat("Invalid email id. ");
}
if ($("zip_code").value.length === 0) {
msg = msg.concat("Zip code is required. ");
}
else {
var numbers = /^[0-9]+$/;
if($("zip_code").value.match(numbers))
newClass.push($("zip_code").value);
else
msg = msg.concat("Zip code should be numeric. ");
}
var checkedValue = '';
var inputElements = document.getElementsByClassName('checkbox_classes');
for(var i=0; inputElements[i]; ++i){
if(inputElements[i].checked){
checkedValue += inputElements[i].value+",";
}
}
checkedValue = checkedValue.slice(0, -1);
newClass.push(checkedValue);
// notify user if there are validation errors
if (msg.length > 0) {
alert(msg);
} else {
// convert the class array to a string with a pipe delimiter (|)
var classString = newClass.join("|");
// add string to local storage, or concat with a tilde delimiter (~),
// based on whether any classes are already in local storage
localStorage.setItem("classes", "");
if (localStorage.classes !== undefined) {
localStorage.classes = classString; // insert
} else {
localStorage.classes += "~" + classString; // concat with tilde delimiter
}
// clear form and re-display classes
clear();
showClasses();
}
};
var showClasses = function() {
// get table from page and tbody element from table
if(localStorage.classes){
var tBody = document.getElementById("classes_table");
// clear any previous rows from tbody element
tBody.innerHTML = "";
// get classes from local storage
var storedClasses = localStorage.classes || "";
if (storedClasses.length > 0) {
// split stored classes string by tilde delimiter to get array of class strings
var classStrings = storedClasses.split("~");
// loop class strings and create html for table rows
for (var s in classStrings) {
// create a new row element
var row = tBody.insertRow(-1);
// split string by pipe delimiter to get class array
var individualClass = classStrings[s].split("|");
// join array with html delimiters to create html for row
var html = "<tr><td>" + individualClass.join("</td><td>") + "</td></tr>";
row.innerHTML = html;
/* Another way to create rows
// split string by pipe delimiter to get class array
var individualClass = classStrings[s].split("|");
// join array with html delimiters to create html for row
tBody.innerHTML = tBody.innerHTML.concat(
"<tr><td>" + individualClass.join("</td><td>") + "</td></tr>");
*/
}
}
}
};
var clear = function() {
$("form").reset();
};
window.onload = function() {
$("register_std").onclick = registStd;
$("clear_form").onclick = clear;
};
showClasses();
If you have any queries or doubts regarding this solution then please do comment.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.