Help with JavaScript and jQuery 1.Display all the classes that are in web storag

ID: 3821742 • Letter: H

Question

Help with JavaScript and jQuery

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.

what I have so far

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="validation.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>

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;
}

javascript catalog.js so far:

"use strict";
var $ = function (id) { return document.getElementById(id); };

// add string to local storage, or concat with a tilde delimiter (~),
// based on whether any classes are already in local storage
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
var table = $("classes_table");
var tBody = table.tBodies[0];

// 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() {
showClasses();
$("add_class").onclick = addClass;
$("clear_form").onclick = clear;
};

validate.js file

"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 for Classes First Name: Last Name: Phone: Email: Zip Code: Select Classes: Web Design IIIT 101I1/9/2017l10 MWFI10:00 HTML5 and CSS3 Web Design IIIIT 102 1/9/2017 10ITHI13:00l JavaScript and jQuery Web Design IIIIIT 103 1/9/2017 10 MWFI08:00IPHP and MySQL. Clear Register

Explanation / Answer

HTML File:

<!DOCTYPE html>
<html>
    <head>
        <title>Register for classes</title>
        <link type="text/css" rel="stylesheet" href="catalog.css">
        <script type="text/javascript" src="catalog.js"></script>
        <script type="text/javascript" src="validation.js"></script>
    </head>
    <body>
      <main>
        <form id="form">
        <h1>Register for classes</h1>
        <section>
            
            <table id="classes_table">
                <thead>
                    <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Phone</th>
                        <th>Email</th>
                        <th>Zip Code</th>
                        <th>Classes</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </section>
        <section>
            <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>
      </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;
}
.checkbox_classes {
    width: auto;
    margin-top: 10px;
}

catalog.js

"use strict";
var $ = function (id) { return document.getElementById(id); };

        // add string to local storage, or concat with a tilde delimiter (~),
        // based on whether any classes are already in local storage
        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
    var table = $("classes_table");
    var tBody = table.tBodies[0];

    // 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() {
    showClasses();
    $("register_std").onclick = registStd;
    $("clear_form").onclick = clear;
};

validatation.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;
}
}

Navigate

Help with JavaScript and JQuery Review the HTML for the application, and notice

Help with Javascript! I have to make a do-while loop that will call this functio

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Help with JavaScript and jQuery 1.Display all the classes that are in web storag

Question

Explanation / Answer

Related Questions

Navigate