Tell us what’s happening:
Hey there!
I have written the code to the best of my ability and the app is performing well when I interact with it but when I press the “Check Your Code” button this shows up on the console “21. Each of your name property values should match the text content of one of your li elements. Make sure these values are all in lowercase.”
Please guide me on what to do. Thank you
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-dark" class="themes" >Dark</li>
<li role="menuitem" id="theme-light" class="themes">Light</li>
</ul>
<div aria-live="polite"></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-dark {
background-color: gray;
}
.theme-light {
background-color: green;
}
/* file: script.js */
const themes = [{name:"Dark", message: "I am Dark"}, {name: "Light", message: "I am Light"}];
const btn = document.getElementById("theme-switcher-button");
const dropdown = document.getElementById("theme-dropdown");
btn.addEventListener("click", () => {
let isOpen = btn.getAttribute("aria-expanded") === "true";
if (isOpen) {
dropdown.hidden = true;
btn.setAttribute("aria-expanded","false");
}else {
dropdown.hidden = false;
btn.setAttribute("aria-expanded","true");
}
});
const dark = document.getElementById("theme-dark");
const light = document.getElementById("theme-light");
const ariaLive = document.querySelector(`[aria-live="polite"]`);
const htmlThemes = document.querySelectorAll(".themes");
let currentTheme = "";
htmlThemes.forEach((htmlTheme) => {
htmlTheme.addEventListener("click", () => {
const selectedTheme = htmlTheme.textContent.trim();
const themeShade = themes.find((theme) => {
return theme.name === selectedTheme
})
if (currentTheme) {
document.body.classList.remove(`theme-${currentTheme.toLowerCase()}`)
}
document.body.classList.add(`theme-${themeShade.name.toLowerCase()}`)
currentTheme = themeShade.name
ariaLive.innerText = themeShade.message
});
})
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
Challenge Information:
Build a Theme Switcher - Build a Theme Switcher
Thank you