Homework SourseUse provided HTML file Create JavaScript file to validate us
Use provided HTML file.
Create *JavaScript file* to validate user input and process user input.
Show the conformation window for Valid Submission.
Title is required field.
Description is required field.
City is required field.
Rate this photo => positive numeric value 1 – 10
User must provide date and time.
User must accept the software license.
User must select “Creative Commons Type
Use JavaScript to display User information.
//HTML
<html><head lang=\"en\">
<meta charset=\"utf-8\">
<title>Chapter 6</title>
<link rel=\"stylesheet\" href=\"format.css\">
</head>
<body>
<form method=\"get\" action=\"\" id=\"mainForm\">
<fieldset>
<legend>Photo Details</legend>
<table>
<tbody><tr>
<td colspan=\"2\">
<p>
<label>Title</label><br>
<input type=\"text\" name=\"title\" size=\"80\">
</p>
<p>
<label>Description</label><br>
<textarea name=\"description\" rows=\"5\" cols=\"61\"> </textarea>
</p>
</td>
</tr>
<tr>
<td>
<p>
<label>Continent</label><br>
<select name=\"continent\">
<option>Choose continent</option>
<option>Africa</option>
<option>Asia</option>
<option>Europe</option>
<option>North America</option>
<option>South America</option>
</select>
</p>
<p>
<label>Country</label><br>
<select name=\"country\">
<option>Choose country</option>
<option>Canada</option>
<option>Mexico</option>
<option>United States</option>
</select>
</p>
<p>
<label>City</label><br>
<input type=\"text\" name=\"city\" list=\"cities\" size=\"40\">
<datalist id=\"cities\">
<option>Calgary</option>
<option>Montreal</option>
<option>Toronto</option>
<option>Vancouver</option>
</datalist>
</p>
</td>
<td>
<div class=\"box\">
<label>Copyright? </label><br>
<input type=\"radio\" name=\"copyright\" value=\"1\">All rights reserved<br>
<input type=\"radio\" name=\"copyright\" value=\"2\" checked=\"\">Creative Commons<br>
</div>
<div class=\"box\">
<label>Creative Commons Types </label><br>
<input type=\"checkbox\" name=\"cc\">Attribution <br>
<input type=\"checkbox\" name=\"cc\">Noncommercial <br>
<input type=\"checkbox\" name=\"cc\">No Derivative Works <br>
<input type=\"checkbox\" name=\"cc\">Share Alike
</div>
</td>
</tr>
<tr>
<td colspan=\"2\">
<div class=\"rectangle\">
<label>I accept the software license</label>
<input type=\"checkbox\" name=\"accept\" class=\"required\">
</div>
</td>
</tr>
<tr>
<td>
<p>
<label>Rate this photo: <br>
<input type=\"number\" name=\"rate\">
</label></p>
<p>
<label>Color Collection: <br>
<input type=\"color\" name=\"color\">
</label></p>
</td>
<td>
<div class=\"box\">
<p>
<label>
Date Taken: <br>
<input type=\"date\" name=\"date\">
</label></p>
<p>
<label>
Time Taken:
<br>
<input type=\"time\" name=\"time\">
</label></p>
</div>
</td>
</tr>
<tr>
<td colspan=\"2\">
<div class=\"rectangle centered\">
<input type=\"submit\" class=\"rounded\">
<input type=\"reset\" value=\"Clear Form\" class=\"rounded\">
</div>
</td>
</tr>
</tbody></table>
</fieldset>
</form>
</body></html>
//CSS
/* general text formatting */
h1, h2, h3, nav, footer {
font-family: Georgia, Cambria, \"Times New Roman\", serif;
}
body {
font-family: \"Lucida Sans\", Verdana, Arial, sans-serif;
font-size: 85%;
}
table {
border: collapse;
border-spacing: 0;
width; 90%;
margin: 0 auto;
}
table tbody td{
/* border: 1pt solid #95BEF0; */
line-height: 1.5em;
vertical-align: top;
padding: 0.5em 0.75em;
}
legend {
background-color: #EBF4FB ;
margin: 0 auto;
width: 90%;
padding: 0.25em;
text-align: center;
font-weight: bold;
font-size: 100%;
}
fieldset {
margin: 1em auto;
background-color: #FAFCFF;
width: 60%;
}
form p {
margin-top: 0.5em;
}
.box {
border: 1pt solid #95BEF0;
padding: 0.5em;
margin-bottom: 0.4em;
}
.rectangle {
background-color: #EBF4FB;
padding: 0.5em;
}
.centered {
text-align: center;
}
.rounded, .rounded:hover {
border: 1px solid #172d6e;
border-bottom: 1px solid #0e1d45;
border-radius: 5px;
text-align: center;
color: white;
background-color: #8c9cbf;
padding: 0.5em 0 0.5em 0;
margin: 0.3em;
width: 7em;
-webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
}
.rounded:hover {
background-color: #7f8dad;
}
Solution
script.js
/**************format.css**************************************/
