Build a Theme Switcher - Build a Theme Switcher

Curriculum Help
1

Tell us what’s happening:

my code works well bust am not passing steps 23 to 25. which are about updating the aria-expanded and hidden attribute while dropdown is displayed

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="true">
    <li id="theme-light" role="menuitem">Light</li>
    <li id="theme-dark" role="menuitem">Dark</li>
    <li id="theme-highcontrast" role="menuitem">Highcontrast</li>
  </ul>
  <div aria-live="polite" id="theme-msg"></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: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

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

#theme-switcher-button {
  padding: 1em;
}

#theme-dropdown{
  width:40%;
  list-style:none;
  border-radius:2px;
  background-color:antiquewhite;
  box-shadow: 0 0 1px black;
}

#theme-dropdown li {
  padding:0.6em;
}

#theme-dropdown li:hover {
  cursor: pointer;
   background-color:rgb(59, 59, 59);
}

.theme-light-btn {
  background-color:rgb(59, 59, 59);
  color:rgb(236, 233, 233);
}

.theme-light {
  background-color:rgb(236, 233, 233);
}

.text-light {
  color:rgb(59, 59, 59);
}

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

.theme-dark-btn {
  background-color:rgb(59, 59, 59);
  color:rgb(236, 233, 233);
  border-color:rgb(236, 233, 233);
}

.text-dark {
  color:rgb(236, 233, 233);
}

.theme-highcontrast {
  background-color:rgb(5, 5, 5);
}

.theme-highcontrast-btn {
  background-color:rgb(5, 5, 5); 
  color:rgb(236, 233, 233);
  border-color:rgb(236, 233, 233);
}

.text-highcontrast {
  color:rgb(236, 233, 233);
}

#theme-msg {
  padding:1.5em;
  font-weight:300;
}


/* file: script.js */
const themes = [
  {
    name: "light",
    message: "You have switched to a light theme.",
  },
   {
    name: "dark",
    message: "You have switched to a dark theme.",
  },
   {
    name: "highcontrast",
    message: "You have switched to a highcontrast theme.",
  },
];

const switcherBtn = document.getElementById("theme-switcher-button");
const themeDropdown = document.getElementById("theme-dropdown");
const menuItems = document.querySelectorAll('[role="menuitem"]');
const bodyEl = document.querySelector("body");
const themeMsg = document.getElementById("theme-msg")

function controlDropdown () {
  
  if( themeDropdown.getAttribute("hidden") === 'true') {
     themeDropdown.removeAttribute("hidden") ;
     switcherBtn.setAttribute("aria-expanded", "true");
    console.log(switcherBtn.getAttribute("aria-expanded"))
  } else{
     switcherBtn.setAttribute("aria-expanded", "false") ;
    themeDropdown.setAttribute("hidden", 'true') ;
     console.log(switcherBtn.getAttribute("aria-expanded"))
  }
}
 
switcherBtn.addEventListener("click", () => {
  controlDropdown();
}); 



function switchTheme (menuItem) {
  controlDropdown();
  const theme = themes.filter((theme) => theme.name === menuItem.id.replace("theme-", ""))[0];
  if (bodyEl.getAttribute("class")){
    bodyEl.removeAttribute("class");
    switcherBtn.removeAttribute("class");
    themeMsg.removeAttribute("class");
  }
  bodyEl.classList.add(`theme-${theme.name}`);
  themeMsg.classList.add(`text-${theme.name}`);
  switcherBtn.classList.add(`theme-${theme.name}-btn`);
    themeMsg.textContent = theme.message;
     
};
 
menuItems.forEach((menuItem) => {
  menuItem.addEventListener("click", () => {
    switchTheme(menuItem);
  })
})

Your browser information:

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

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-theme-switcher/687ad7be1ff45032ccf1d92f.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @m27284992,

Try hasAttribute("hidden") instead since it’s either there or not there.

Happy coding

3

it worked out thanks for your help