Tell us what’s happening:
I didn’t pass the following tests:
When the users clicks on the #theme-switcher-button while the #theme-dropdown element is displayed, the dropdown menu should be set back to hidden.
25. When the users clicks on the #theme-switcher-button while the #theme-dropdown element is displayed, the aria-expanded attribute should be set to “false”.
How can I go About it
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>
<nav>
<ul id = "theme-dropdown" role = "menu" aria-labelledby = "theme-switcher-button" hidden >
<li role = "menuitem" id ="theme-black">black</li>
<li role = "menuitem" id = "theme-blue">blue<a href = "#"></a></li>
</ul>
</nav>
<div aria-live = "polite" id = "status"></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-dropdown{
height : 20vh;
width: 10vw;
background-color: red;
cursor:pointer;
}
/* file: script.js */
const themes = [
{name:"black",
message:"This is the deadliest theme. Don't be scared!"},
{name:"blue",
message:"The sky is very bright, Be hopeful!"}
]
const switcherBtn = document.getElementById("theme-switcher-button")
const dropdown = document.getElementById("theme-dropdown")
const menus = document.querySelectorAll("li");
switcherBtn.addEventListener("click",()=>{
dropdown.removeAttribute("hidden")
switcherBtn.setAttribute("aria-expanded", "true")
if(!switcherBtn.getAttribute("aria-expanded", "true")){
dropdown.setAttribute("hidden", "true")
}
else{
dropdown.removeAttribute("hidden")
}
})
const blue = document.getElementById("theme-blue")
const black = document.getElementById("theme-black")
const bodyEl = document.querySelector("body")
const statusEl = document.getElementById("status")
console.log(statusEl.innerHTML)
black.addEventListener("click",()=>{
bodyEl.classList.add(`theme-${themes[0].name}`);
bodyEl.style.backgroundColor = "black";
statusEl.textContent = themes[0].message;
bodyEl.style.color = "white"
dropdown.setAttribute("hidden","true")
})
blue.addEventListener("click",()=>{
bodyEl.classList.add(`theme-${themes[1].name}`)
bodyEl.style.backgroundColor = "lightblue";
statusEl.textContent = themes[1].message;
dropdown.setAttribute("hidden","true")
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Build a Theme Switcher - Build a Theme Switcher
https://www.freecodecamp.org/learn/full-stack-developer/lab-theme-switcher/lab-theme-switcher