This Specialization covers how to write syntactically correct HTML5 and CSS3, and how to create interactive web experiences with JavaScript. Mastering this range of technologies allows you to develop high quality accessible web sites that work seamlessly on mobile, tablet, and large screen browsers. During the capstone you develop a professional-quality web portfolio demonstrating growth as a web developer and knowledge of accessible web design. This includes the ability to design and implement a responsive site that utilizes tools to create a site accessible to a wide audience, including those with visual, audial, physical, and cognitive impairments.
Interactivity with JavaScript
The ability to incorporate interactivity is important in web design, but adding some of these capabilities requires a stronger programming language. JavaScript can provide it. With a basic understanding of the language, a page that will react to common events such as page loads, mouse clicks & movements, and keyboard input is possible. This third course introduces these basics of the JavaScript language. Covered concepts include variables, looping, functions, and a little bit about debugging tools. It teaches how the Document Object Model (DOM) is used by JavaScript to identify and modify specific parts of the page. After the course, learners will be able to react to DOM Events and dynamically alter the contents and style of their page. The class final project is the creation of an interactive HTML5 form that accepts and verifies input.
Week 2 Project
This project incorporated a mouse over that would load one of the thumbnail images in the main picture frame.
JavaScript Code Sample
function upDate(previewPic){
document.getElementById('image').style.backgroundColor = "#7147F0";
document.getElementById('image').style.backgroundImage = "url(" + previewPic.src + ")";
document.getElementById('image').innerHTML = previewPic.alt;
}
function unDo(){
document.getElementById('image').style.backgroundColor = "#8e68ff";
document.getElementById('image').style.backgroundImage = "none";
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Shipping and Billing</title>
<style>
input{
border:1px solid black;
}
input:focus{
background-color: #E6E6E6;
}
fieldset{
margin-bottom: 4%;
}
</style>
<script>
function billingFunction()
{
if (document.getElementById('same').checked){
document.getElementById('billingName').value = document.getElementById('shippingName').value;
document.getElementById('billingZip').value = document.getElementById('shippingZip').value
document.getElementById('nick').style.display = "none";
}
else{
document.getElementById('billingName').value = "";
document.getElementById('billingZip').value = "";
}
}
</script>
</head>
<body>
<h1>JavaScript Homework</h1>
<p>Add the JavaScript code needed to enable auto-complete on this form. Whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. If the checkbox is unchecked, the Billing Name and Billing Zip should go blank.</p>
<form>
<fieldset>
<legend>Shipping Information</legend> <label for ="shippingName">Name:</label> <input type = "text" name = "Name" id = "shippingName" required><br/>
<label for = "shippingzip">Zip code:</label> <input type = "text" name = "zip" id = "shippingZip" pattern = "[0-9]{5}" required><br/>
</fieldset>
<input type="checkbox" id="same" name="same" onchange= "billingFunction()"/>
<label for = "same">Is the Billing Information the Same?</label>
<fieldset>
<legend>Billing Information</legend> <label for ="billingName">Name:</label> <input type = "text" name = "Name" id = "billingName" required><br/>
<label for = "billingzip">Zip code:</label> <input type = "text" name = "zip" id = "billingZip" pattern = "[0-9]{5}" required><br/>
</fieldset>
<input type = "submit" value = "Verify"/>
</form>
</body>
</html>
