16.4 Programming Activity (20 mins)

Task:

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).
Challenge: Add interactivity where clicking a button changes the background color of the entire page.

Step-by-Step Activity:

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

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>

Example CSS Style Code:

// CSS 3 Sytle Sheet
/* Basic container styling */
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

.bordered-image {
  border: solid 1px #444;
  border-radius: 3px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Card styling */
.card {
  width: 350px;
  padding: 15px;
  margin: 20px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  text-align: center;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.card img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.card h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
}

.card p {
  font-size: 1em;
  color: #555;
}

/* Hover effect */
.card:hover {
  border-color: #00f;
  box-shadow: 8px 8px 16px 5px rgba(174, 41, 41, 0.2);
}

Explanation:

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

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.

Challenge:

Create Multiple Styles for the Background:

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

Example:

let colors = ["lightblue", "lightgreen", "lightpink", "lightyellow"];
let currentColorIndex = 0;

changeBackgroundButton.addEventListener("click", function() {
  // Cycle through the colors array
  currentColorIndex = (currentColorIndex + 1) % colors.length;
  document.body.style.backgroundColor = colors[currentColorIndex];
});

Extra Challenge:

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

Example:

let resetButton = document.createElement("button");
resetButton.innerText = "Reset Page";
document.body.appendChild(resetButton);

resetButton.addEventListener("click", function() {
  heading.innerText = "Hello, Welcome to My Web Page!";
  heading.style.color = "black";
  heading.style.fontSize = "24px";
  paragraph.innerText = "This is a paragraph that will be updated.";
  paragraph.style.color = "black";
  paragraph.style.fontStyle = "normal";
  document.body.style.backgroundColor = "white";
});

Activity Follow-up Questions:

How does the innerText property help in dynamically changing the content of an HTML element?
What are the benefits of using JavaScript to modify the style of elements in a web page?
Can you think of scenarios where changing the background color dynamically might enhance user interaction?

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 1 year ago