Need 3 separate files HTML CSS and Javascript DO NOT COMBINE

Need 3 separate files (HTML, CSS, and Javascript -DO NOT COMBINE IN ONE FILE) to create the below class catalog maintenance application:

What this application should do

This application will build a list of classes that are offered by the GIT department. It will accept the user entries that are shown under the “Add a class” heading in the interface above.

Then, when the user clicks 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.

Of course, the data should be validated before it is added to the Classes table and local storage. At the least, the application should check that an entry has been made in each input and select control and that the start date is a valid date in the future. But it would also be good to check whether a class with a duplicate number is already in the table.

What you need to do

Build this application from scratch with separate files for the HTML, CSS, and JavaScript.

Development notes

Be creative: Try to create a user interface that’s more pleasing and user friendly than the one above. For instance, you might want to put the Classes table below the form for the class entries.

You decide what options should be offered in the three select controls (drop-down lists).

The form must be centered and formatted using CSS. An HTML table is only allowed for the Classes data.

You may not use jQuery Bootstrap or any type of WSYWIG to develop this app. And you may not rely on HTML5 attributes and CSS3 selectors for data validation. In other words, this assignment must be completely hand coded.

In the JavaScript, add appropriate comments to each function that you create.

Technical note

The starting html for the Classes table must have both a thead and tbody element. Otherwise, the th elements for the column headings may get written over by the JavaScript that adds the Class rows to the table.

The user interface should look something like this: 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 Web Design II IT 102 1/1/2017 10 MWF 14:00 JavaScript, jQuery, jQuery UI, and Bootstrap Add a class Class Name: Class Number: Start Date Class Length (in weeks Weekday and Time: Class Description Add Clear

style.css

/* style sheet for div in oneline */

.container {

width: 400px;

margin: auto;

}

.first {

width: 200px;

float: left;

height:50px;

display:inline;

}

.second {

width: 200px;

float: left;

height:50px;

display:inline;

}

op.js

// for adding user input to localstorage and displaying it in to the table

function add()

{

//getting the user input using the id of the input,select,text area element in html

var name=document.getElementById(\"name\").value;

var number=document.getElementById(\"number\").value

var length=document.getElementById(\"length\").value;

var date=document.getElementById(\"date\").value;

var day=document.getElementById(\"day\").value;

var time=document.getElementById(\"time\").value;

var dec=document.getElementById(\"dec\").value

//validation for string

var letters = /^[A-Za-z]+$/;

if(! letters.test(name))

{

alert(\"enter a valid string\")

return false;

}

//validation for number

var nums = /^[0-9]+$/;

if(!nums.test(number))

{

alert(\"enter a valid number\")

return false

}

//validation for date

var pattern =/^([0-9]{2})\\/([0-9]{2})\\/([0-9]{4})$/;

if(! pattern.test(date))

{

alert(\"Enter date in dd/mm/yyyy format\")

return false;

}

//setting a json object from the user input

var testObject = { \'name\': name, \'number\': number, \'date\': date,\'day\':day,\'length\': length, \'time\': time, \'dec\': dec};

if (sessionStorage.clickcount)

{

//Incrementing the varible if it is there

sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;

} else

{

//adding a varible in session count if it is not there

sessionStorage.clickcount = 1;

}

// inserting values into local storage session count varible as key

localStorage.setItem(sessionStorage.clickcount, JSON.stringify(testObject));

//getting the table object using id

var table = document.getElementById(\"myTable\");

//displaying the values in the table

for (var i = table.rows.length; i <=sessionStorage.clickcount+1; i++)

{

var new_row = table.rows[1].cloneNode(true);

var len = table.rows.length;

var ss=JSON.parse(localStorage.getItem(i-1))

new_row.cells[0].innerHTML = ss[\'name\'];

new_row.cells[1].innerHTML = ss[\'number\'];

new_row.cells[2].innerHTML = ss[\'date\'];

new_row.cells[3].innerHTML = ss[\'day\'];

new_row.cells[4].innerHTML = ss[\'length\'];

new_row.cells[5].innerHTML = ss[\'time\'];

new_row.cells[6].innerHTML = ss[\'dec\'];

table.appendChild(new_row)

}

// For the clearing the user input

function clr()

{

//clearing data from the input,select,text area

document.getElementById(\"name\").value=\"\";

document.getElementById(\"day\").value = \'MTWTF\';

document.getElementById(\"time\").value = 1;

document.getElementById(\"number\").value=\"\";

document.getElementById(\"length\").value=1;

document.getElementById(\"date\").value=\"\";

document.getElementById(\"dec\").value=\"\";

}

index.html

<%@ page language=\"java\" contentType=\"text/html; charset=UTF-8\"

pageEncoding=\"UTF-8\"%>

<!DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">

<html>

<head>

<title>

Course Table

</title>

</head>

<body>

<br>

<tr>

<th>

Name

</th>

<th>

Number

</th>

<th>

Start

</th>

<th>

Length

</th>

<th>

Week Day

</th>

<th>

Time

</th>

<th>

Description

</th>

</tr>

<tr>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

<td>

</td>

</tr>

</table>

<h2>Add a class</h2>

<div >

Class Name

</div>

</div>

Class Number

</div>

</div>

<br>

Class Date

</div>

</div>

<br>

Class Length in Weeks

</div>

</select>

</div>

<br>

<div class=\"first\">Week day and Time

</div>

<option selected value=\"MTWTF\">MTWTF</option>

</select>

</select>

</div>

Description

</div>

</textarea>

</div>

</div>

</div>

</body>

</html>

Need 3 separate files HTML CSS and Javascript DO NOT COMBINE

Solution

Get Help Now

Submit a Take Down Notice