Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

unable to get through to 25,26,27 steps.

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="menuitem" id="theme-light" >light</li>
  <li role="menuitem" id="theme-dark" >dark</li>
</ul>
<div aria-live="polite" id="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;
}

/* file: script.js */
let themes=[
  { name: "light", message: "☀️ Bright and clear — Light mode is on!" },
  { name: "dark", message: "🌙 Smooth and calm — Dark mode is on!" }
]; 
const themeButton=document.getElementById("theme-switcher-button");
const dropDown=document.getElementById("theme-dropdown");


let menuItem=document.querySelectorAll(`[role="menuitem"]`);

let message=document.getElementById("msg");
let isHidden = true;

const lightThemeButton = document.getElementById("theme-light");
const darkThemeButton = document.getElementById("theme-dark");

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

menuItem.forEach((item,index)=>item.addEventListener("click",()=>
{
   //themeButton.hidden=true;
   closeMenu();
document.body.setAttribute("class", "themes[index].name");

message.innerText=themes[index].message;

}));
function closeMenu() {
  isHidden = true;
  dropDown.hidden = true;
  themeButton.setAttribute('aria-expanded', 'false');
}

Your browser information:

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

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

hello!

there are missing curly braces here.

User Story #11 says ‘When a user clicks on the #theme-switcher-button and selects a theme, the corresponding theme-<name> class should be added to the body element’. So basically when user selects dark theme the body should have class=”theme-dark”. Kindly check in your browser console what this line is adding to the body when user selects a theme -