Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

on the Build a Theme Switcher can not pass #26 and #27 Please help!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Theme Switcher</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</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-light">Light</li>
    <li role="menu-item" id="theme-dark">Dark</li>
    <li role="menu-item" id="theme-blue">Blue</li>
    <li role="menu-item" id="theme-green">Green</li>
  </ul>
  <div id="theme-message" aria-live="polite"></div>
  <script src="script.js"></script>
</body>
</html>

/* file: styles.css */
body {
  font-family: sans-serif;
  transition: background-color 0.3s, color 0.3s;
  padding: 2rem;
}

#theme-dropdown {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
  border: 1px solid #ccc;
  width: 200px;
  background: #fff;
  box-shadow: 0 2px 8px #0002;
  border-radius: 7px;
  position: absolute;
}

#theme-dropdown li {
  padding: 0.5rem 1rem;
  cursor: pointer;
  outline: none;
}

#theme-dropdown li:hover,
#theme-dropdown li:focus {
  background-color: #e0f0ff;
}

.theme-ocean {
  background-color: #0077be;
  color: #ffffff;
}

.theme-desert {
  background-color: #edc9af;
  color: #5c3a21;
}

.theme-midnight {
  background-color: #2c3e50;
  color: #ecf0f1;
}

#theme-message {
  margin-top: 1rem;
  font-weight: bold;
}

/* file: script.js */
const themes = [
  { name: 'light', message: 'Light theme activated - bright and clean!' },
  { name: 'dark', message: 'Dark theme activated - easy on the eyes!' },
  { name: 'blue', message: 'Blue theme activated - calm and professional!' },
  { name: 'green', message: 'Green theme activated - natural and soothing!' }
];

const button = document.getElementById('theme-switcher-button');
const dropdown = document.getElementById('theme-dropdown');
const themeMessage = document.getElementById('theme-message');

// Show or hide dropdown menu
button.addEventListener('click', function() {
  const isShown = !dropdown.hidden;
  dropdown.hidden = isShown;
  button.setAttribute('aria-expanded', String(!isShown));
});

// Choose a theme
dropdown.addEventListener('click', function(e) {
  if (e.target && e.target.matches('li[role="menu-item"]')) {
    e.stopPropagation();

    // Remove any theme class
    document.body.classList.remove(
      "theme-light", "theme-dark", "theme-blue", "theme-green"
    );

    // Add the chosen theme
    const themeName = e.target.id.replace('theme-', '');
    document.body.classList.add('theme-' + themeName);

    // Find and set the message in the aria-live div
    const found = themes.find(t => t.name === themeName);
    themeMessage.textContent = '';
    setTimeout(() => {
      themeMessage.textContent = found ? found.message : '';
    }, 10);

    // Hide dropdown
    dropdown.hidden = true;
    button.setAttribute('aria-expanded', 'false');
  }
});

Your browser information:

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

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

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

1 Like