Build a Theme Switcher - Build a Theme Switcher - 15

JavaScript
1

Tell us what’s happening:

Добрый день !
Вообще не понимаю,что хотят от меня ! Уже и везде toLowerCase() поставил и нейросеть проверила, говорит все правильно. Но тест 15 не проходится (( Подскажите,пжл,что не так ??
15. Each of your li elements should have an id attribute that starts with theme- and ends with the corresponding theme for that element. Make sure your id value is all lowercase.

Your code so far

<!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" >theme-light</li>
  <li role="menuitem" id="theme-dark" >theme-dark</li>
  <li role="menuitem" id="theme-ocean">theme-ocean</li>

</ul>

<p 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-light{
  background-color: white;
  color:black;
}
.theme-dark{
  background-color: black;
  color:white;
}
.theme-ocean{
  background-color: lightblue;
}

/* file: script.js */
const themes = [
  {
   name:"theme-dark".toLowerCase(),
   message: "Выбрана тема theme-dark"
  } ,
  {
   name:"theme-light".toLowerCase(),
   message: "Выбрана тема theme-light"
  } ,
  {
   name:"theme-ocean".toLowerCase(),
   message: "Выбрана тема theme-ocean"
  }
  ];

const switchBtn = document.getElementById("theme-switcher-button");
const ulDropDown = document.getElementById("theme-dropdown");
const pPolite = document.querySelector(`[aria-live="polite"]`)

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

ulDropDown.addEventListener("click",(e)=> {
    if(e.target) {
      const id = e.target.id;
      document.body.classList.remove(...document.body.classList);
      document.body.classList.add(id.toLowerCase());
      themes.forEach((theme)=> {
        id===theme.name ? pPolite.innerText = theme.message : "";
      })
    }
})

Your browser information:

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

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

you need to read this instruction carefully

. Each of your li elements should have an id attribute that starts with theme- and ends with the theme you set for the li element text. For example, if one of your themes is Light then your id should be theme-light.

The example says: if your value is “Light” then the id is “theme-light”.
So why don’t you try that exact example?
Change your code to use “Light” and “Dark” instead of “theme-light” and “theme-dark” in the text value area of the li element