Build a Theme Switcher - stuck on step 23

JavaScript
1

Tell us what’s happening:

Hi, the code seems to be working, however I cannot pass the 23rd step.

  1. When the #theme-dropdown element is displayed, the aria-expanded attribute should be set to “true” for the button 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 id="theme-dark" role="menu-item">Dark</li>
    <li id="theme-light" role="menu-item">Light</li>
    <li id="theme-candy" role="menu-item">Candy</li>
  </ul>
  
  <p id="msg" 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;
}

.theme-dark {
  background-color: rgb(55, 55, 55);
  color: rgb(234, 234, 234);
}

.theme-light {
  background-color: rgb(234, 234, 234);
  color: rgb(55, 55, 55);
}

.theme-candy {
  background-color: pink;
  color: purple;
}

/* file: script.js */
const themes = [
  {name: "dark", message: "dark theme on"},
  {name: "light", message: "light theme on"},
  {name: "candy", message: "candy theme on"}
];

const btn = document.getElementById("theme-switcher-button");
const dropdown = document.getElementById("theme-dropdown");
const menuItems = document.querySelectorAll("#theme-dropdown li");
const msg = document.getElementById("msg");
const body = document.querySelector("body");

let isDropdownVisible = false;

btn.addEventListener("click", () => {
  dropdown.hidden = isDropdownVisible;
  isDropdownVisible = !isDropdownVisible;
  btn.setAttribute("aria-expanded", isDropdownVisible);
  console.log(isDropdownVisible);
});

menuItems.forEach(item => {
  item.addEventListener("click", () => changeTheme(item.id))
});

function changeTheme(theme) {
  body.classList.remove(body.classList[0]);
  body.classList.add(theme);
  const [{name, message}] = themes.filter((obj) => theme.includes(obj.name));
  msg.textContent = message;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher
https://www.freecodecamp.org/learn/full-stack-developer/lab-theme-switcher/lab-theme-switcher

2

don’t use a flag, the tests may be changing the visibility directly for testing

1 Like
3

Thanks!

Maybe a note would be useful… or maybe it’s only me…