JavaScript Help!!!! So I have my HTML but now I need help with JavaScript. So it

ID: 3778261 • Letter: J

Question

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"/>

           <input type="button" value="Clear"/>

</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 Clear

Explanation / Answer

<!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" />

<input type="button" value="Clear" />
</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>

Navigate

JavaScript Help So in my library file, I coded an object literal named coins tha

JavaScript I\'m having trouble increasing the size of this sketchpad when I incr

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

JavaScript Help!!!! So I have my HTML but now I need help with JavaScript. So it

Question

Explanation / Answer

Related Questions

Navigate