Build a Theme Switcher - Build a Theme Switcher

JavaScript
1

Tell us what’s happening:

In the JavaScript Theme Switcher Lab, tests 21 and 27 are failing despite the code doing everything it is supposed to in the browser.
I have searched the forum and tried some solutions but nothing seems to work. I am thinking that there is a syntax or naming problem that make the tests fail. I have double checked that I have not altered the seed code but may have missed something.

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 class="theme-light">
    <button class="dropdown-btn" id="theme-switcher-button" aria-haspopup="true" aria-expanded="false" aria-controls="theme-dropdown">Switch Theme</button>

    <ul class="dropdown-content" id="theme-dropdown" role="menu" aria-labelledby="theme-switcher-button">
        <li class="dropdown-item" id="theme-light" role="menuitem">Light</li>
        <li class="dropdown-item" id="theme-dark" role="menuitem">Dark</li>
        <li class="dropdown-item" id="theme-contrast" role="menuitem">Contrast</li>
    </ul>

    <div id="status" 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;
  padding-top: 25px;
}

.dropdown-btn {
  position: relative;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}


.dropdown-content {
  position: absolute;
  background-color: #f0f0f0;
  min-width: 160px;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.3);
  z-index: 1;
}

.dropdown-item {
  width: 100%;
  padding: 15px;
  color: #000000;
  background-color: #f0f0f0;
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: #cce6ff;
}

.theme-light {
  background-color: #ffffff;
  color: #000000;
}

.theme-light .dropdown-btn {
  background-color: #ccc;
  color: #000000;
}

.theme-dark {
  background-color: #121212;
  color: #ffffff;
}

.theme-dark .dropdown-btn {
  background-color: #4d4d4d;
  color: #ffffff;
}

.theme-contrast {
  background-color: #001a33;
  color: #ffff00;
}

.theme-contrast .dropdown-btn {
  background-color: #f0f0f0;
  color: #000;
}

/* file: script.js */

const themes = [
    {
        name: "theme-dark",
        message: "Theme successfully switched to Dark Mode."
    },
    {
        name: "theme-light",
        message: "Theme successfully switched to Light Mode."
    },
    {
        name: "theme-contrast",
        message: "Theme successfully switched to High Contrast Mode."
    }
];

const body = document.body;
const themeSwitcherButton = document.getElementById('theme-switcher-button');
const themeDropdown = document.getElementById('theme-dropdown');
const statusElement = document.getElementById('status');
const themeItems = themeDropdown.querySelectorAll('.dropdown-item');

themeDropdown.style.display = 'none';
themeDropdown.setAttribute('hidden', 'true'); 
themeSwitcherButton.setAttribute('aria-expanded', 'false'); 

function toggleDropdown() {
    const isExpanded = themeSwitcherButton.getAttribute('aria-expanded') === 'true';

    if (isExpanded) {
        themeDropdown.style.display = 'none'; 
        themeDropdown.setAttribute('hidden', 'true');
        themeSwitcherButton.setAttribute('aria-expanded', 'false');
    } else {
        themeDropdown.style.display = 'block'; 
        themeDropdown.removeAttribute('hidden');
        themeSwitcherButton.setAttribute('aria-expanded', 'true');
    }
}

function applyTheme(themeName, message) {
    body.classList.remove(...themes.map(t => t.name));
    
    body.classList.add(themeName);
    
    statusElement.textContent = message;

    if (themeSwitcherButton.getAttribute('aria-expanded') === 'true') {
        toggleDropdown();
    }
}

themeSwitcherButton.addEventListener('click', toggleDropdown);

themeItems.forEach(item => {
    item.addEventListener('click', (event) => {
        const selectedThemeName = event.target.id;
        
        const selectedTheme = themes.find(t => t.name === selectedThemeName);
        
        if (selectedTheme) {
            applyTheme(selectedTheme.name, selectedTheme.message);
        }
    });
});

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:145.0) Gecko/20100101 Firefox/145.0

Challenge Information:

Build a Theme Switcher - Build a Theme Switcher

2

these are not expected to contain theme-, they should match the text in the li instead

3

Thanks I’ll make the changes