search

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.

hashtag
Task:

  1. 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).

  2. 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.

hashtag
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>

hashtag
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.

hashtag
Challenge:

  1. Add New Interactive Elements:

    • Add a new button that hides or shows the paragraph when clicked (use the display CSS property).

    Example:

  2. Extra Challenge:

    • Add a feature where pressing certain keys (e.g., r for red, g for green) changes the text color of the heading.

    Example:

hashtag
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.

hashtag
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.

Previous16.5 Event Listeners and DOM Events (15 mins)NextLecture 17_Asynchrous Programming

Last updated