Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

Tests 15 and 17-21 are failing, but my li elements meet the requirements as stated in test 15, and my themes array also meets (exceeds) the requirements listed in the test. What am I missing?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Theme Switcher</title>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <button id="theme-switcher-button" aria-haspopup="true" aria-expanded="false" aria-controls="theme-dropdown">Switch Theme</button>
  <ul id="theme-dropdown" role="menu" aria-labelledby="theme-switcher-button" hidden>
    <li role="menuitem" id="theme-salmon">salmon</li>
    <li role="menuitem" id="theme-lightgreen">light green</li>
    <li role="menuitem" id="theme-yellow">yellow</li>
  </ul>
  <div aria-live="polite" id="live-region"></div>
  <script src="./script.js"></script>
</body>
</html>


/* file: styles.css */
body {
  margin: 0;
  font-family: sans-serif;
  transition: background 0.3s, color 0.3s;
}

button {
  background-color: lightblue;
  border-radius: 10px;
  font-size: 16px;
  color: darkblue;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

.salmon-theme {
  background-color: salmon !important;
}

.lightgreen-theme {
  background-color: lightgreen !important;
}

.yellow-theme {
  background-color: yellow !important;
}


/* file: script.js */
document.addEventListener("DOMContentLoaded", function() {
  console.log("Script loaded successfully");

  // Ensure there are at least two theme objects
  const themes = [
    {
      name: "salmon",
      className: "salmon-theme",
      message: "This is the salmon theme."
    },
    {
      name: "lightgreen",
      className: "lightgreen-theme",
      message: "This is the light green theme."
    },
    {
      name: "yellow",
      className: "yellow-theme",
      message: "This is the yellow theme."
    }
  ];

  console.log("Available Themes:", themes);
  const btn = document.getElementById("theme-switcher-button");
  const menuItems = document.getElementById("theme-dropdown");
  const liveRegion = document.getElementById("live-region");

  // Clicking on the switcher button toggles dropdown visibility
  btn.addEventListener("click", () => {
    const isExpanded = btn.getAttribute("aria-expanded") === "true";
    btn.setAttribute("aria-expanded", !isExpanded);
    menuItems.hidden = isExpanded;

    console.log("Dropdown visibility:", menuItems.hidden);
  });

  // Handling theme selection from dropdown
  menuItems.addEventListener("click", (event) => {
    const target = event.target;
    console.log("Clicked element:", target);

    // Ensure clicked item is an LI
    if (target.tagName === "LI") {
      const selectedThemeID = target.id.replace("theme-", "");
      console.log("Computed Selected Theme ID:", selectedThemeID);

      // Find the selected theme based on the ID
      const selectedTheme = themes.find(theme => theme.name === selectedThemeID);
      console.log("Selected Theme Object:", selectedTheme);

      if (selectedTheme) {
        // Update the live region with the theme message
        liveRegion.textContent = selectedTheme.message;
        
        // Remove previous theme classes and apply the selected one
        themes.forEach(theme => document.body.classList.remove(theme.className));
        document.body.classList.add(selectedTheme.className);
        
        console.log("Body classes after applying theme:", document.body.classList);
        
        // Hide the dropdown
        menuItems.hidden = true;
        btn.setAttribute("aria-expanded", "false");
      } else {
        console.log("No theme found with that ID."); // Log if no theme found
      }
    }
  });

  // Close the dropdown if clicking outside
  document.addEventListener("click", (event) => {
    if (!btn.contains(event.target) && !menuItems.contains(event.target)) {
      menuItems.hidden = true;
      btn.setAttribute("aria-expanded", "false");
    }
  });
});

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15 Ddg/26.2

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

The problem with themes array is that it’s defined in the event listener callback, what means it cannot be easily accessed by tests.

Regarding the other issues, take a closer look at requirements regarding naming of the classes.

3

Thank you. Got rid of the IIFE and reversed the class names, and all passed.