16.6 Homework Assignment
Objective:
Students will build a web page with interactive elements using DOM manipulation and event listeners. The goal is to practice changing text, styles, and attributes dynamically in response to user actions such as clicks or mouse events.
Task:
Create a Simple Web Page that includes the following:
Interactive Buttons: Use JavaScript to modify text, style, and other attributes when the user clicks a button.
Event Listeners: Use
addEventListener()to attach multiple events to elements.DOM Manipulation: Dynamically change the content or appearance of elements (e.g., headings, paragraphs, images).
Requirements:
Create at least two buttons that change the text and style of different elements on the page.
Add a section where the background color of the page changes when a button is clicked.
Use mouseover and mouseout events to interact with elements (e.g., changing color or size when hovered over).
(Optional) Use keydown or input events for more interactivity.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
}
#heading {
color: darkblue;
}
.content {
font-size: 16px;
color: black;
}
button {
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<h1 id="heading">Welcome to My Interactive Web Page</h1>
<p id="paragraph" class="content">This paragraph will change dynamically when you interact with the page.</p>
<button id="changeTextButton">Change Text</button>
<button id="changeStyleButton">Change Style</button>
<button id="changeBackgroundButton">Change Background Color</button>
<input type="text" id="inputField" placeholder="Type something..." />
<p id="displayText"></p>
<script>
// Change text content when the button is clicked
let changeTextButton = document.getElementById("changeTextButton");
let heading = document.getElementById("heading");
let paragraph = document.getElementById("paragraph");
changeTextButton.addEventListener("click", function() {
heading.innerText = "Text Changed!";
paragraph.innerText = "This paragraph has been updated.";
});
// Change styles dynamically when the button is clicked
let changeStyleButton = document.getElementById("changeStyleButton");
changeStyleButton.addEventListener("click", function() {
heading.style.color = "red";
heading.style.fontSize = "30px";
paragraph.style.color = "green";
paragraph.style.fontStyle = "italic";
});
// Change background color of the page
let changeBackgroundButton = document.getElementById("changeBackgroundButton");
changeBackgroundButton.addEventListener("click", function() {
document.body.style.backgroundColor = "lightcoral";
});
// Update text content based on user input
let inputField = document.getElementById("inputField");
let displayText = document.getElementById("displayText");
inputField.addEventListener("input", function() {
displayText.innerText = "You typed: " + inputField.value;
});
// Add mouseover and mouseout effects to the heading
heading.addEventListener("mouseover", function() {
heading.style.textDecoration = "underline";
});
heading.addEventListener("mouseout", function() {
heading.style.textDecoration = "none";
});
</script>
</body>
</html>Explanation:
Buttons: The webpage includes three buttons. Each button performs a different DOM manipulation task:
The first button changes the text of the heading and paragraph.
The second button changes the color and style of the heading and paragraph.
The third button changes the background color of the entire page.
Input Field: As the user types in the input field, the text is dynamically displayed below.
Hover Effects: When the user hovers over the heading, it is underlined; the underline is removed when the mouse leaves the heading.
Challenge:
Add New Interactive Elements:
Add a new button that hides or shows the paragraph when clicked (use the
displayCSS property).
Example:
let toggleParagraphButton = document.createElement("button"); toggleParagraphButton.innerText = "Show/Hide Paragraph"; document.body.appendChild(toggleParagraphButton); toggleParagraphButton.addEventListener("click", function() { if (paragraph.style.display === "none") { paragraph.style.display = "block"; // Show paragraph } else { paragraph.style.display = "none"; // Hide paragraph } });Extra Challenge:
Add a feature where pressing certain keys (e.g.,
rfor red,gfor green) changes the text color of the heading.
Example:
document.addEventListener("keydown", function(event) { if (event.key === "r") { heading.style.color = "red"; } else if (event.key === "g") { heading.style.color = "green"; } });
Homework Submission:
Save your HTML file and submit it to the instructor.
Ensure that the web page is interactive and responds to user actions such as button clicks, text input, and hover events.
Test all interactive elements to ensure they work as expected.
Expected Outcome:
Students will:
Gain hands-on experience building a fully interactive web page using DOM manipulation techniques.
Practice responding to user actions (clicks, hover, input) with
addEventListener()and dynamically change the content, styles, and attributes of elements.Explore how JavaScript can enhance user interaction and create engaging, dynamic web experiences.
Last updated