Tell us what’s happening:
I’ve completed all the steps and my code passes the tests, but I’d really appreciate any feedback or suggestions for improvement.
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="menu-item" id="theme-night">night</li>
<li role="menu-item" id="theme-light">light</li>
<li role="menu-item" id="theme-adventure">adventure</li>
</ul>
<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;
width:100px;
}
li {
list-style-type: none;
margin-bottom:10px;
width:90px;
height:20px;
padding:10px;
font-size:1.2rem;
}
li:hover{
background-color:blue;
cursor:pointer;
color:white;
}
#status {
margin: 0px auto;
text-align: center;
font-size:17px;
position:absolute;
top:10px;
left:15rem;
}
button{
width:130px;
height:39px;
color:white;
background-color:navy;
font-size:16px;
cursor:pointer;
}
.theme-night{
background-color:rgb(26, 25, 25);
color:white;
}
.theme-light{
background-color:white;
}
.theme-adventure{
background-color:#747b90;
color:whitesmoke
}
/* file: script.js */
const themes = [
{
name:"night",
message:"Night mode is turned on"
},
{
name:"light",
message:"Light mode is turned on"
},
{
name:"adventure",
message: "Adevnture mode is turned on"
}
]
const button = document.getElementById("theme-switcher-button");
const dropDown = document.getElementById("theme-dropdown");
const themeNight = document.getElementById("theme-night");
const themeLight = document.getElementById("theme-light");
const themeAdventure = document.getElementById("theme-adventure")
const textMessage = document.querySelector("[aria-live='polite']");
const body = document.querySelector("body");
//function to set background-color
function setBodyColor(userinput){
let inputText = userinput.replace("theme-","");
if(inputText==="night"){
body.classList.add("theme-night");
body.classList.remove("theme-light");
body.classList.remove("theme-adventure")
}
else if(inputText==="light"){
body.classList.add("theme-light");
body.classList.remove("theme-night");
body.classList.remove("theme-adventure")
}
else if(inputText==="adventure"){
body.classList.add("theme-adventure");
body.classList.remove("theme-night");
body.classList.remove("theme-light");
}
}
//function for text message
function getBodytheme(userChoices,theme){
let text = userChoices.replace("theme-","");
if(text==="night"){
textMessage.innerHTML =theme[0].message;
setBodyColor(userChoices)
}
else if(text==="light"){
textMessage.innerHTML =theme[1].message;
setBodyColor(userChoices)
}
else if(text==="adventure"){
textMessage.innerHTML =theme[2].message;
setBodyColor(userChoices)
}
}
//function to toggle button
function toggleButton(){
if(button.getAttribute("aria-expanded")==="false"){
button.setAttribute("aria-expanded","true");
dropDown.hidden=false;
}
else{
button.setAttribute("aria-expanded","false")
dropDown.hidden=true
}
}
button.addEventListener("click",function(){
toggleButton()
})
themeNight.addEventListener("click",function(){
getBodytheme(themeNight.id,themes);
toggleButton()
})
themeLight.addEventListener("click",function(){
getBodytheme(themeLight.id,themes);
toggleButton()
})
themeAdventure.addEventListener("click",function(){
getBodytheme(themeAdventure.id,themes);
toggleButton()
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.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