search

16.4 Programming Activity (20 mins)

Task:

  1. Create a Simple HTML Page and use JavaScript to:

    • Dynamically change the text of an element (e.g., heading or paragraph).

    • Modify the style of an element (e.g., change font size, text color).

  2. Challenge: Add interactivity where clicking a button changes the background color of the entire page.

hashtag
Step-by-Step Activity:

  1. Create an HTML file (e.g., dynamic_text_and_style.html) and write JavaScript code to manipulate the text and style of HTML elements.

  2. Example HTML Code:

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Text and Style</title>
</head>
<body>
  <h1 id="heading">Hello, Welcome to My Web Page!</h1>
  <p id="description">This is a paragraph that will be updated.</p>
  <select id="Season">
      <option>Winter</option>
      <option>Spring</option>
      <option>Summer</option>
      <option>Autumn</option>
  </select>

    <p id="results"></p>

  <!-- Button to change the heading text and style -->
  <button id="changeTextButton">Change Text and Style</button>

  <!-- Button to change the background color -->
  <button id="changeBackgroundButton">Change Background Color</button>

  <script>
    // Change text and style of the heading and paragraph
    let heading = document.getElementById("heading");
    let paragraph = document.getElementById("description");
    let changeTextButton = document.getElementById("changeTextButton");

    const selectSeason = document.getElementById("Season");
    const selectedParagraph = document.getElementById("results");

    // Add an event listener to the select element
    selectSeason.addEventListener("change", function () {
        const selectedValue = selectSeason.value;

        // Set the text content of the paragraph
        selectedParagraph.textContent = selectedValue;

        // Set the background color based on the selected value
        selectedParagraph.style.backgroundColor =
          getBackgroundColor(selectedValue);
      });

      function getBackgroundColor(season) {
        switch (season) {
          case "Winter":
            return "lightblue";
          case "Spring":
            return "lightgreen";
          case "Summer":
            return "yellow";
          case "Autumn":
            return "orange";
          default:
            return "white";
        }
      }

    changeTextButton.addEventListener("click", function() {
      heading.innerText = "Text and Style Changed!";
      heading.style.color = "blue";  // Change heading color to blue
      heading.style.fontSize = "30px";  // Change heading font size
      paragraph.innerText = "The paragraph text has been updated and styled.";
      paragraph.style.fontStyle = "italic";  // Change paragraph text to italic
      paragraph.style.color = "green";  // Change paragraph text color to green
    });

    // Change the background color of the page
    let changeBackgroundButton = document.getElementById("changeBackgroundButton");
    changeBackgroundButton.addEventListener("click", function() {
      document.body.style.backgroundColor = "lightblue";  // Change background color
    });
  </script>
</body>
</html>

  1. Example CSS Style Code:

hashtag
Explanation:

  1. Dynamically Changing Text and Style:

    • The button with id="changeTextButton" is used to change the text and styles of the heading (<h1>) and paragraph (<p>).

    • When the button is clicked, JavaScript changes the innerText of the heading and paragraph, and modifies their style properties (color, font size, and font style).

  2. Changing the Background Color:

    • The button with id="changeBackgroundButton" triggers an event that changes the entire page’s background color using JavaScript. The document.body.style.backgroundColor property is used to apply the new color.

hashtag
Run the file in a browser:

  • Open the HTML file in a browser.

  • Click the "Change Text and Style" button to dynamically change the heading and paragraph content, as well as their styles.

  • Click the "Change Background Color" button to change the page’s background color.

hashtag
Challenge:

  1. Create Multiple Styles for the Background:

    • Extend the code to allow users to toggle between multiple background colors when the button is clicked.

    Example:

  2. Extra Challenge:

    • Add another button that resets the page to its original text, style, and background color.

    Example:

hashtag
Activity Follow-up Questions:

  1. How does the innerText property help in dynamically changing the content of an HTML element?

  2. What are the benefits of using JavaScript to modify the style of elements in a web page?

  3. Can you think of scenarios where changing the background color dynamically might enhance user interaction?

hashtag
Expected Outcome:

Students will:

  • Gain hands-on experience with dynamic text and style changes using JavaScript.

  • Understand how to use event listeners to trigger DOM manipulation in response to user actions.

  • Create an interactive web page that responds to button clicks by changing text content, styles, and the background color, making the page more engaging and user-friendly.

Previous16.3 DOM Manipulation (20 mins)Next16.5 Event Listeners and DOM Events (15 mins)

Last updated