#1 - Open the index.html file and modify the comment at the top of the page to include your name (firstname lastname) and today’s date (MM/DD/YYYY), and then link the file to styles.css.
Add a title to the page and add your name to the footer element.
#2 - Insert a script element above the closing body tag with the script.js file as the source.
Open the script.js file and modify the comment at the top of the page to include your name (firstname lastname) and today’s date (MM/DD/YYYY).
#3 - Review the pic1() function and correct all six syntax errors. Look for missing curly braces, missing quotation marks, missing parentheses, and missing semicolons.
#4 - Create the following three global variables above the comment for the pic1() function. Begin with a comment that identifies the global variables.
var figElement = document.getElementById("placeholder");
var imgSource = document.getElementById("image");
var figCap = document.querySelector("figcaption");
#5 - Add a new comment below the pic1() function, followed by a new function named pic2(). Carefully analyze the pic1() function to understand the purpose of the four statements within the function. Use it as a guide to create the pic2() function. The pic2() function should display the sanjuan.jpg image, use Elevated view of San Juan coast for the img alt text, and use Coast of San Juan for the figcaption text.
#6 - Add a new comment below the pic2() function, followed by a new function named pic3(). Use the pic1() function as a guide to create the pic3() function. The pic3() function should display the curacao.jpg image, use The blue waters of Curacao for the img alt text, and use Curacao for the figcaption text.
#7 - In the styles.css file, add your name (firstname lastname) and today’s date (MM/DD/YYYY) to the comment. Above the footer style rule, create a new style rule for the placeholder id that sets the display to none.
/*
Author:
Date:
File Name: styles.css
*/
body {
background-color: #b3d9ff;
}
#container {
width: 80%;
margin: 0 auto;
}
header {
margin-top: 0.2em;
text-align: center;
font-size: 2em;
font-weight: bold;
}
nav {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em;
font-weight: bold;
text-align: center;
}
nav ul {
padding: 0;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
nav li {
display: inline;
list-style-type: none;
margin: 0.3em;
padding: 0.4em;
}
nav li a {
color: #0C1C96;
text-decoration: none;
}
main {
display: block;
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
margin-top: 0.5em;
padding: 1em;
border-radius: 6px;
background-color: #fff;
border: inset 0.2em #7a6d68;
}
footer {
font-size: .90em;
text-align: center;
margin-top: 2em;
}
<!DOCTYPE html>
<!--
Student Name:
File Name:
Date:
-->
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<div id="container">
<header>
<h1>Visit the Caribbean</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>The Caribbean boasts several island hotspots for your perfect getaway! Enjoy crystal clear waters, sandy white beaches, and never-ending sun. Click the pictures below for a larger view.</p>
<figure>
<img src="images/trunk-bay-thumb.jpg" alt="student submitted image, transcription available below">
<img src="images/sanjuan-thumb.jpg" alt="student submitted image, transcription available below">
<img src="images/curacao-thumb.jpg" alt="student submitted image, transcription available below">
</figure>
<figure id="placeholder">
<img src="image" alt="student submitted image, transcription available below" id="image">
<figcaption></figcaption>
</figure>
</main>
<footer>
<p>Student's Name:</p>
</footer>
</div>
</body>
</html>