Homework SourseJavaScript Help So I have my HTML but now I need help with J
JavaScript Help!!!! So I have my HTML but now I need help with JavaScript. So its an applicaiton to add classes so if when they click the Add button, a class will be added to the table that’s under the “Classes” heading. The data in this table will also be stored in local web storage. As a result, the class data will be displayed when the user restarts the application. No need to worry about CSS I just need help with JavaScript
<body>
<div class=\"main\">
<h1>Class Catalog Maintenance</h1>
<h1>Classes</h1>
<table id=\"table\">
<tr>
<th>Name</th>
<th>Number</th>
<th>Start</th>
<th>Length</th>
<th>Weekday</th>
<th>Time</th>
<th>Description</th>
</tr>
</table>
</div>
<h1>Add Classes</h1>
<div class=\"addClass\">
<form action=\"\">
<label>Class Name : </label> <input type=\"text\" id=\"name\" /> <br />
<label>Class Number: </label> <input type=\"text\" id=\"number\" /> <br />
<label> Start Date : </label> <input type=\"date\" id=\"date\" /> <br />
<label>Class Length</label><input type=\"number\" id=\"length\" /> <br />
<label>Weekdays and Time</label> <select
id=\"day\">
<option value=\"MW\">MW</option>
<option value=\"MWF\">MWF</option>
<option value=\"TTH\">TTH</option>
<option value=\"MTWTH\">MTWTH</option>
</select> <select id=\"time\">
<option value=\"10:00\">8:00 a.m.- 10:00 a.m.</option>
<option value=\"11:00\">11:30 a.m.- 1:00 p.m. </option>
<option value=\"9:30\">2:00 p.m.-3:00 p.m.</option>
<option value=\"11:30\">4:00 p.m.-5:30 p.m. </option>
</select> <br /> <br />
<label>Class
description:</label><br />
<textarea rows=\"10\" cols=\"100\" id=\"desc\"></textarea>
<br /> <input type=\"button\" value=\"Add\" onclick=\"append();\"/>
<input type=\"button\" value=\"Clear\" onclick=\"clear1();\"/>
</form>
</div>
</body>
Class Catalog Maintenance Classes Number Start Length Weekday Time Description Name MWF Web Design I IT 101 9/1/2016 10 10:00 HTML5 and CSS3 MWF Web Design II IT 102 1/1/2017 10 14:00 JavaScript, jQuery, jQuery UI, and Bootstrap Add a class Class Name: Class Number: Start Date Length (in weeks Weekday and Time: Class Description Add ClearSolution
<!DOCTYPE html>
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<title></title>
</head>
<body>
<div class=\"main\">
<h1>Class Catalog Maintenance</h1>
<h1>Classes</h1>
<table id=\"table\" border=\"1\">
<tr>
<th>Name</th>
<th>Number</th>
<th>Start</th>
<th>Length</th>
<th>Weekday</th>
<th>Time</th>
<th>Description</th>
</tr>
</table>
</div>
<h1>Add Classes</h1>
<div class=\"addClass\">
<form action=\"\">
<table>
<tr>
<td>
<label>Class Name : </label>
</td>
<td>
<input type=\"text\" id=\"name\" />
</td>
</tr>
<tr>
<td>
<label>Class Number: </label>
</td>
<td>
<input type=\"text\" id=\"number\" />
</td>
</tr>
<tr>
<td>
<label>Start Date : </label>
</td>
<td>
<input type=\"date\" id=\"date\" />
</td>
</tr>
<tr>
<td>
<label>Class Length</label>
</td>
<td>
<input type=\"number\" id=\"length\" />
</td>
</tr>
<tr>
<td>
<label>Weekdays and Time</label>
</td>
<td>
<select
id=\"day\">
<option value=\"MW\">MW</option>
<option value=\"MWF\">MWF</option>
<option value=\"TTH\">TTH</option>
<option value=\"MTWTH\">MTWTH</option>
</select>
<select id=\"time\">
<option value=\"10:00\">8:00 a.m.- 10:00 a.m.</option>
<option value=\"11:00\">11:30 a.m.- 1:00 p.m. </option>
<option value=\"9:30\">2:00 p.m.-3:00 p.m.</option>
<option value=\"11:30\">4:00 p.m.-5:30 p.m. </option>
</select>
</td>
</tr>
<tr>
<td>
<label>
Class
description:</label>
</td>
<td>
<textarea rows=\"10\" cols=\"100\" id=\"desc\"></textarea>
</td>
</tr>
</table>
<input type=\"button\" value=\"Add\" onclick=\"append();\" />
<input type=\"button\" value=\"Clear\" onclick=\"clear1();\" />
</form>
</div>
<script>
function append() {
//creat an html element we have to wride createElement in javascript
//create a tr element
var tr = document.createElement(\'tr\');
//create a td element
var td = document.createElement(\'td\');
td.innerHTML = document.getElementById(\"name\").value;
var td1 = document.createElement(\'td\');
td1.innerHTML = document.getElementById(\"number\").value;
var td2 = document.createElement(\'td\');
td2.innerHTML = document.getElementById(\"date\").value;
var td3 = document.createElement(\'td\');
td3.innerHTML = document.getElementById(\"length\").value;
var td4 = document.createElement(\'td\');
td4.innerHTML = document.getElementById(\"day\").value;
var td6 = document.createElement(\'td\');
td6.innerHTML = document.getElementById(\"time\").value;
var td5 = document.createElement(\'td\');
td5.innerHTML = document.getElementById(\"desc\").value;
tr.innerHTML = td.outerHTML + td1.outerHTML + td2.outerHTML + td3.outerHTML + td4.outerHTML + td6.outerHTML + td5.outerHTML;
//append the tr to table
document.getElementById(\"table\").appendChild(tr);
}
function clear1() {
document.getElementById(\"name\").value = \"\";
document.getElementById(\"number\").value = \"\";
document.getElementById(\"date\").value = \"\";
document.getElementById(\"length\").value = \"\";
document.getElementById(\"day\").value = \"MW\";
document.getElementById(\"time\").value = \"10:00\";
document.getElementById(\"desc\").value = \"\";
}
</script>
</body>
</html>
