Set up a project directory with these files and subfolders:
exercise5
index.html
css
styles.css
images
puppy.jpg
Then add the source code for the
index.html and styles.css files:
<!DOCTYPE html>
<!-- Exercise5 Example
Source code file: index.html -->
<html lang="en">
<head>
<title>Exercise 5</title>
<meta charset="utf8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>Exercise 5</h1>
<p>This is a test paragraph.</p>
<p>Cities of origin</p>
<ol>
<li>Henderson, NE</li>
<li>Mundelein, IL</li>
<li>Skokie, IL</li>
<li>Oak Park, IL</li>
</ol>
<p>Numbers in Various Languages</p>
<table>
<tr>
<th>English</th> <th>French</th> <th>German</th>
</tr>
<tr>
<td>One</td> <td>Un</td> <td>Eins</td>
</tr>
<tr>
<td>Two</td> <td>Deux</td> <td>Zwei</td>
</tr>
<tr>
<td>Three</td> <td>Trois</td> <td>Drei</td>
</tr>
<tr>
<td>Four</td> <td>Quatre</td> <td>Vier</td>
</tr>
<tr>
<td>Five</td> <td>Cinq</td> <td>Fünf</td>
</tr>
</table>
<h1>Image of Puppy</h1>
<img src="images/puppy.jpg">
</body>
</html>
-----------------------------------------------
/* Exercise5 Example
Source code file: styles.css */
body { background-color: silver;
color: navy;
font-family: Helvetica, Arial, sans-serif;
img { width: 200px; }
-----------------------------------------------
#ff00ff #800080 #000080 #800000 #008080 #c0c0c0 #e0e0ff #e0ffff Answer: #ff00ff -- magenta #800080 -- dark magenta = purple #000080 -- dark blue = navy #800000 -- dark red = maroon #008080 -- dark blue green = teal #c0c0c0 -- light gray = silver #e0e0ff -- pastel blue #e0ffff -- pastel magenta To create a pastel color, choose the max value of that color, and equal close to max values for the other color components.
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<style>
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
</style>
<script>
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
</script>
</head>
<body>
<h1>Birthday Riddle</h1>
<p id="p1">Riddle: The day before yesterday I was 21,
and next year I will be 24. When is my birthday and when is today?</p>
<p id="p2"></p>
<button onclick="showAnswer( )">Show Riddle Answer</button>
<body>
</html>
There are three ways to attach the event listener to
the button element: (1) onclick attribute of HTML
button element, (2) onclick property of
JavaScript button object,
(3) document.addEventListener method.Answer: Only the source code files for Method (1) are shown. We will discuss methods (2) and (3) later when needed. The explanation of the answer to the riddle is posted after the source code separated into three files.
============================================
<!DOCTYPE html>
<!-- Source code for index.html, Method (1)
Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js">
</script>
</head>
<body>
<h1>Birthday Riddle</h1>
<p id="p1">Riddle: The day before yesterday I was 21,
and next year I will be 24. When is my birthday?</p>
<p id="p2"></p>
<button onclick="showAnswer( )">Show Riddle Answer</button>
<body>
</html>
--------------------------------------------
/* Source code for styles.css, Method (1)
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
--------------------------------------------
// Source code for script.js, Method (1)
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
Here is the explanation of the answer to the riddle:
Dec 30, 2022 -- Last year,
I was 21 years old.
Dec 31, 2022 -- My birthday last year,
I was 22 years old.
Jan 1, 2023 -- Today.
...
Dec 31, 2023 -- My birthday this year,
then I will be 23 years old.
...
Dec 31, 2024 -- My birthday next year,
then I will be 24 years old.
Answer:
The index file with HTML, CSS, and JavaScript all in the same file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display Image</title>
<style>
body { background-color: aliceblue;
color: navy; }
img { width: 300px;
height: 200px; }
</style>
<script>
function displayImage( ) {
var image1 = document.getElementById("img1");
image1.src = "images/andromeda.jpg";
}
</script>
</head>
<body>
<h1>Display Image</h1>
<img id="img1" onclick="displayImage( )">
</body>
</html>
