Practice Problem: Separate the code for this example into separate HTML, CSS, and JavaScript files:
<!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?</p>
<p id="p2"></p>
<input type="button" value="Show Answer"
onclick="showAnswer( )">
<body>
</html>
Answer:
---- index.html ----------------------
<!DOCTYPE html>
<!-- Birthday Riddle Example -->
<html>
<head>
<title>Birthday Riddle</title>
<link rel="stylesheet" href="styles.css">
<script src="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>
<input type="button" id="btn1" value="Show Answer">
<body>
</html>
---- styles.css ----------------------
/* BirthdayRiddle Example */
body { background-color: #FFE0E0;
color: navy; font-family: verdana, sans-serif;
}
---- script.js -----------------------
// BirthdayRiddle Example
function showAnswer( ) {
var para = document.getElementById("p2");
para.innerHTML =
"Answer: December 31; today is January 1.";
}
function init( ) {
var button = document.getElementById("btn1");
button.onclick = showAnswer;
// or
// button.addEventListener("click", showAnswer);
}
window.onload = init;
// or
// window.addEventListener("load", init);
--------------------------------------