Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

I can’t see why this is failing for my project. The names in the object match perfectly to the HTML code, and upon inspection in DevTools it seems as though the text content displays perfectly in the 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>
  <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="menu-item" id="theme-light">Light</li>
    <li role="menu-item" id="theme-dark">Dark</li>
  </ul>
  <p id="status" role="status" aria-live="polite"></p>
  <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: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

#status {
  text-align: center;
  min-height: 20px;
}

/* file: script.js */
const themeSwitcher = document.getElementById("theme-switcher-button");
const themeDropdown = document.getElementById("theme-dropdown");
const themeLight = document.getElementById("theme-light");
const themeDark = document.getElementById("theme-dark");
const messageBox = document.querySelector("[aria-live='polite']");

let themes = [ { "name": "theme-light", "message": "this is light" } , { "name": "theme-dark", "message": "this is dark" } ]

themeSwitcher.addEventListener("click", () => {
  if (themeDropdown.hidden) {
    themeDropdown.hidden = false;
    themeSwitcher.setAttribute("aria-expanded", "true");
  } else {
    themeDropdown.hidden = true;
    themeSwitcher.setAttribute("aria-expanded", "false");
  }
})

themeLight.addEventListener("click", () => {
  document.body.className = themes[0].name;
  messageBox.textContent = themes[0].message;
})

themeDark.addEventListener("click", () => {
  document.body.className = themes[1].name;
  messageBox.innerText = themes[1].message;
})

Your browser information:

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

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

you need to fix the name properties, the other test is failing for that reason

the name in the object should not start with theme-

1 Like