Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

i need some help please cant pass test 26 and test 27

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-blue">Blue</li>
<li role="menuitem" id="theme-black">Black</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;
  padding:3px;
  margin:2px;
  cursor:pointer;
  border:solid;
  width:15%;
  background-color:white;
  color:black;
}

#status {
  text-align: center;
  min-height: 20px;
}
[aria-live="polite"] {
  text-align: center;
  min-height: 20px;
}

body.theme-blue {
  background-color: #e0f7ff; 
  color: #004080;
}

body.theme-black {
  background-color: #1a1a1a; 
  color: #f0f0f0;
}

#theme-switcher-button{
  margin-top:4px;
  padding:4px;
}

/* file: script.js */
const thmSwitcherBtn=document.getElementById('theme-switcher-button')
const themeDropdown=document.getElementById('theme-dropdown')
const message=document.querySelector('[aria-live="polite"]')

const themes=[{name:'blue',
message:'This is blue'},
{name:'black',
message:'This is dark'},
]

thmSwitcherBtn.addEventListener('click',()=>{
  const isExpanded = thmSwitcherBtn.getAttribute('aria-expanded') === 'true';

  themeDropdown.hidden=isExpanded
  thmSwitcherBtn.setAttribute('aria-expanded',String(!isExpanded))

})

// Handle theme selection
themeDropdown.addEventListener('click', (e) => {
  const selectedId = e.target.id; // e.g., "theme-blue"
  const selectedTheme = selectedId.replace('theme-', ''); // "blue"

  // Add new theme class
  document.body.classList.add(/*`theme-${selectedTheme}`*/selectedId);

  // Update message
  const themeObj = themes.find(t => t.name === selectedTheme);
  message.textContent = themeObj?.message || '';

});

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

2 
const thmSwitcherBtn=document.getElementById('theme-switcher-button')
const themeDropdown=document.getElementById('theme-dropdown')
const message=document.querySelector('[aria-live="polite"]')

const themes=[{name:'blue',
message:'This is blue'},
{name:'black',
message:'This is dark'},
]

thmSwitcherBtn.addEventListener('click',()=>{
  const isExpanded = thmSwitcherBtn.getAttribute('aria-expanded') === 'true';

  themeDropdown.hidden=isExpanded
  thmSwitcherBtn.setAttribute('aria-expanded',String(!isExpanded))

})

// Handle theme selection
themeDropdown.addEventListener('click', (e) => {
  const selectedId = e.target.id; // e.g., "theme-blue"
  const selectedTheme = selectedId.replace('theme-', ''); // "blue"
document.body.className = document.body.className
    .split(' ')
    .filter(cls => !cls.startsWith('theme-'))
    .join(' ');

  // Add new theme class
  document.body.classList.add(`theme-${selectedTheme}`);

  // Update message
  const themeObj = themes.find(t => t.name === selectedTheme);
  message.textContent = themeObj?.message || '';

});

updated js

3

Without reading your code, I submitted a Github issue recently that test 26 and 27 won’t pass if you have the listener on the menu as a whole rather than the individual items. I looked at the Github issue earlier today and it seemed like it was about to be fixed, but in the meantime, if I described your approach correctly, refactor to put listeners on each menu item.

4

it worked thanks very mucdh

1 Like