Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

I can’t seem to get past tests 25 and 27. The code appears to do what is asked and it is not clear to me what the problem is.

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 id="body" class="theme-light">
  <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="true">
    <li role="menuitem" id="theme-dark"><button id="dark-btn">dark</button></li>
    <li role="menuitem" id="theme-light"><button id="light-btn">light</button></li>
  </ul>
  <p id="para" 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 themes=[
  {
    name:"dark",
    message:"Dark theme activated"
  },
  {
    name:"light",
    message:"Light theme activated"
  }
]

const button = document.querySelector('[id="theme-switcher-button"]');

const menu = document.querySelector('[id="theme-dropdown"]')

let hidden = true;

const darkBtn = document.querySelector('[id="dark-btn"]');
const lightBtn = document.querySelector('[id="light-btn"]');

const para = document.querySelector('[id="para"]');

button.addEventListener("click", () => {

  if(hidden == true){
    menu.removeAttribute("hidden");
    hidden = !hidden;
    button.setAttribute("aria-expanded",hidden);
    
  } else {
    menu.setAttribute("hidden", "true");
    hidden = !hidden;
    button.setAttribute("aria-expanded",hidden);
  }

});

darkBtn.addEventListener("click", () => {

  document.querySelector('[id="body"]').setAttribute("class","theme-dark");
  console.log("dark class set");
  para.innerHTML = themes[0]["message"];
  menu.setAttribute("hidden", "true");
    button.setAttribute("aria-expanded",!hidden);
    hidden = !hidden;
});

lightBtn.addEventListener("click", () => {

  document.querySelector('[id="body"]').setAttribute("class","theme-light");
  console.log("light class set");
  para.innerHTML = themes[1]["message"];
  menu.setAttribute("hidden", "true");
    button.setAttribute("aria-expanded",!hidden);
    hidden = !hidden;
});

Your browser information:

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

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

3

try changing:

menu (not hidden)→ aria-expanded=“true”
menu (hidden) → aria-expanded=“false”

When the menu is displayed, aria-expanded should be “true”. Right??