Help with HTML, CSS and Javascrip (you may not use jQuery Bootstrap or any type
ID: 3571662 • Letter: H
Question
Help with HTML, CSS and Javascrip (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.Must be completely hand coded. This application 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 table and data need to be coded in JavaScript to 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. Make an error message saying that they need to fill everything out. Also they need to be able to clear all the fields not just the things they fill out, but the entire thing.
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 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 Class Length (in weeks Weekday and Time: Class Description Add ClearExplanation / Answer
Hi,
Please see below the HTML with proper css and javascripts. Please comment for any quesries/feedback.
Thanks,
Anita
<html>
<head>
<style>
.mainHeading{
color:blue;
}
.formTable{
line-height: 31px;
}
.options{
width: 175px;
}
.formButton{
width:175px;
}
.description{
height: 82px;
width: 293px;
}
.error{
color:red;
}
</style>
</head>
<body>
<div id="Main">
<h2 id="mainHeading" class="mainHeading">Class Catalog Maintenance</h2>
<h3 id="classesHeading">Classes</h3>
<div id="content">
</div>
<div id=""classForm>
<h3><b>Add a Class</b></h3>
<span id="error" class="error"></span>
<table id="formTable" class="formTable">
<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="text" id="date"/></td></tr>
<tr><td><label>Class Length(in weeks):</label></td>
<td><select class="options"id="length">
<option value=""></option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
</select></td></tr>
<tr><td><label>Weekaday and Time:</label></td>
<td><select class="options" id="day">
<option value=""></option>
<option value="MWF">MWF</option>
<option value="FSS">FSS</option>
</select></td>
<td><select class="options" id="time">
<option value=""></option>
<option value="10:00">10:00</option>
<option value="14:00">14:00</option>
<option value="16:00">16:00</option>
</select><td></tr>
</table>
<label>Class Description:</label><br><br>
<textarea id="description" class="description"></textarea>
<br>
<input class="formButton" type="button" value="Add"/>
<input class="formButton" type="button" value="Clear"/>
</div>
</div>
</body>
</html>
<script>
var classArr =[];
function submitForm(){
//Need to check all the fields are filled. Finction isvalid() will check any of the fieds are null
//If all the fields are not filled, Error message will be shown on top
if(isValid()){
var classObj= new Object();
classObj.name =document.getElementById("name").value;
classObj.number =document.getElementById("number").value;
classObj.date =document.getElementById("date").value;
classObj.length =document.getElementById("length").value;
classObj.day =document.getElementById("day").value;
classObj.time =document.getElementById("time").value;
classObj.desc =document.getElementById("description").value;
classArr.push(classObj);
displayClass(classArr);
document.getElementById("error").innerHTML="";
}
else{
document.getElementById("error").innerHTML="All fields need to be filled out.";
}
}
function displayClass(myArray){
var htmlStr="<table><tr><td><b>Name</b></td><td><b>Number</b></td><td><b>Start</b>";
htmlStr=htmlStr+"</td><td><b>Length</b></td><td><b>Weekday</b></td>";
htmlStr=htmlStr+"<td><b>Time</b></td><td><b>Description</b></td><tr>";
for(var i=0; i<myArray.length;i++){
htmlStr = htmlStr+"<tr><td>"+myArray[i].name+"</td>";
htmlStr = htmlStr+"<td>"+myArray[i].number+"</td>";
htmlStr = htmlStr+"<td>"+myArray[i].date +"</td>";
htmlStr = htmlStr+"<td>"+myArray[i].length+"</td>";
htmlStr = htmlStr+"<td>"+myArray[i].day+"</td>";
htmlStr = htmlStr+"<td>"+myArray[i].time+"</td>";
htmlStr = htmlStr+"<td>"+myArray[i].desc+"</td></tr>";
}
htmlStr =htmlStr + "</table>"
document.getElementById("content").innerHTML =htmlStr ;
document.getElementById("content").style.display="";
document.getElementById("classesHeading").style.display="";
}
function clearAll(){
document.getElementById("name").value="";
document.getElementById("number").value="";
document.getElementById("date").value="";
document.getElementById("length").value="";
document.getElementById("day").value="";
document.getElementById("time").value="";
document.getElementById("description").value="";
//Clearing the class display
document.getElementById("content").innerHTML ="" ;
document.getElementById("content").style.display="none";
document.getElementById("classesHeading").style.display="none";
classArr =[];
}
//validation for all the mandatory fields
function isValid(){
var isValid = false;
if(null!= document.getElementById("name").value && "" !=document.getElementById("name").value
&& null!=document.getElementById("number").value && "" !=document.getElementById("number").value
&& null!=document.getElementById("date").value && "" != document.getElementById("date").value
&& null!=document.getElementById("length").value && "" != document.getElementById("length").value
&& null!=document.getElementById("day").value && "" !=document.getElementById("day").value
&& null!=document.getElementById("time").value && "" !=document.getElementById("time").value
&& null!=document.getElementById("description").value && "" != document.getElementById("description").value)
{
isValid = true;
}
else{
isValid = false;
}
return isValid;
}
</script>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.