Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

Please help me. I could not pass Test 26 and 27.

Failed:26. When a user clicks on the #theme-switcher-button and selects a theme, the corresponding theme- class should be added to the body element.
Failed:27. When a user clicks the #theme-switcher-button and selects a theme, a message related to the selected theme from the themes array should be displayed in the aria-live=“polite” element.

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 class="theme-light">
  <div class="container">
      <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 id="theme-light" role="menuitem">light</li>
      <li id="theme-dark" role="menuitem">dark</li>
      <li id="theme-forest" role="menuitem">forest</li>
    </ul>

    <p id="status" aria-live="polite"></p>
  </div>
  <script src="./script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  transition: background 0.4s ease, color 0.4s ease;
  text-align: center;
  padding-top: 80px;
}

/* Themes */
.theme-light { background-color: #f9f9f9; color: #222; }
.theme-dark  { background-color: #222;    color: #f9f9f9; }
.theme-forest{ background-color: #2e8b57; color: #fff; }

/* Layout */
.container { display: flex; flex-direction: column; align-items: center; }

button {
  padding: 10px 18px;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  background-color: #4a90e2;
  color: white;
}

ul {
  margin: 10px 0;
  padding: 0;
  border-radius: 6px;
  width: 160px;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

li {
  list-style: none;
  padding: 10px;
  cursor: pointer;
}

li:hover { background: #f0f0f0; }

#status { margin-top: 18px; min-height: 24px; }


/* file: script.js */
// themes array (names are lowercase and match the li text/ids)
const themes = [
  { name: "light", message: "Light mode activated. Bright and clear." },
  { name: "dark", message: "Dark mode activated. Easy on the eyes." },
  { name: "forest", message: "Forest mode activated. Breathe in the green." }
];

const button = document.getElementById("theme-switcher-button");
const dropdown = document.getElementById("theme-dropdown");
const status  = document.querySelector('[aria-live="polite"]');

// Toggle menu visibility
button.addEventListener("click", () => {
  const isOpen = button.getAttribute("aria-expanded") === "true";
  dropdown.hidden = isOpen;
  button.setAttribute("aria-expanded", String(!isOpen));
});

// Handle menu item selection (robust to text node clicks)
dropdown.addEventListener("click", (e) => {
  const li = e.target.closest('li[role="menuitem"]');
  if (!li) return;

  const id = li.id || "";
  if (!id.startsWith("theme-")) return;

  const selected = id.slice("theme-".length).toLowerCase();

  // Remove any existing theme-* classes
  Array.from(document.body.classList).forEach(cls => {
    if (cls.startsWith("theme-")) document.body.classList.remove(cls);
  });

  // Add selected theme class to body
  document.body.classList.add(`theme-${selected}`);

  // Find message and announce it
  const themeObj = themes.find(t => t.name.toLowerCase() === selected);
  if (themeObj && status) {
    status.textContent = themeObj.message;
  }

  // Close menu and update button aria
  dropdown.hidden = true;
  button.setAttribute("aria-expanded", "false");
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

hello and welcome to fcc forum :slight_smile:

  • do you see this to be functioning?

happy coding :slight_smile: