Use provided HTML file. Create *JavaScript file* to validate user input and proc
ID: 3792994 • Letter: U
Question
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;
}
Explanation / Answer
script.js
/**************format.css**************************************/
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.