Build a Theme Switcher

JavaScript
1

Even after looking through the existing posts, i can’t pass the tests 26 and 27. Whats wrong with my code?

My 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 id="theme-light" role="menu-item">light</li>
    <li id="theme-dark" role="menu-item">dark</li>
    <li id="theme-solarized" role="menu-item">solarized</li>
    <li id="theme-dracula" role="menu-item">dracula</li>
  </ul>

  <div id="status" aria-live="polite"></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;
}

ul {
  margin: 10px 0;
  padding: 0;
  border: 1px solid #ccc;
  max-width: 200px;
}

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

li:hover {
  background: #f0f0f0;
}

#status {
  text-align: center;
  min-height: 20px;
  margin-top: 15px;
  font-weight: bold;
}

.theme-light {
  background: #ffffff;
  color: #000000;
}

.theme-dark {
  background: #1e1e1e;
  color: #ffffff;
}

.theme-solarized {
  background: #fdf6e3;
  color: #657b83;
}

.theme-dracula {
  background: #282a36;
  color: #f8f8f2;
}

// file: script.js
const themes = [
  {
    name: "light",
    message: "Light theme activated."
  },
  {
    name: "dark",
    message: "Dark theme activated."
  },
  {
    name: "solarized",
    message: "Solarized theme activated."
  },
  {
    name: "dracula",
    message: "Dracula theme activated."
  },
];

function setupThemeSwitcher() {
  const button = document.getElementById("theme-switcher-button");
  const dropdown = document.getElementById("theme-dropdown");
  const status = document.getElementById("status");
  const body = document.body;

  if (!button || !dropdown || !status) return;

  button.addEventListener("click", () => {
    const willShow = dropdown.hidden;
    dropdown.hidden = !willShow;
    button.setAttribute("aria-expanded", willShow ? "true" : "false");
  });

  dropdown.addEventListener("click", (e) => {
    const li = e.target.closest("li[role='menu-item']");
    if (!li) return;

    const themeName = li.textContent.toLowerCase().trim();

    themes.forEach(t => body.classList.remove(`theme-${t.name}`));

    body.classList.add(`theme-${themeName}`);

    const theme = themes.find(t => t.name === themeName);
    if (theme) {
      status.textContent = theme.message;
    }

    dropdown.hidden = true;
    button.setAttribute("aria-expanded", "false");
  });
}

if (document.readyState === "loading") {
  window.addEventListener("DOMContentLoaded", setupThemeSwitcher);
} else {
  setupThemeSwitcher();
}

Challenge Information

2

if you share your code we may be able to answer

3

I’ve updated my question.

4

can you also share the link to the challenge please?

5

yeah, i’ve already did this.

6

Good morning! :sun:

Thanks for sharing the update—these new modules look really helpful, especially the Tailwind CSS workshops and Python basics. I’m excited to dive in and try out the exercises.

For your issue with tests 26 and 27, make sure your JavaScript is properly handling the button click events and updating the dropdown visibility. Sometimes the test fails if aria-expanded or hidden attributes aren’t toggled correctly. Double-check your script.js logic for the theme switcher.

Happy coding!