Dark mode toggle with JavaScript in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a click event listener to the button.

Tailwind

document.getElementById('toggle-btn').addEventListener('[1]', () => {
  document.documentElement.classList.toggle('dark');
});

Drag options to blanks, or click blank then click option'

Aclick

Bsubmit

Chover

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hover' instead of 'click' causes no toggle on click.

Using 'submit' is for forms, not buttons.

Using 'load' triggers on page load, not button click.

The click event triggers when the user clicks the button, which is needed to toggle dark mode.

2fill in blank

medium

Complete the code to select the button element by its ID.

Tailwind

const toggleBtn = document.[1]('toggle-btn');

Drag options to blanks, or click blank then click option'

AquerySelectorAll

BgetElementById

CgetElementsByClassName

DquerySelector

Attempts:

3 left

💡 Hint

Common Mistakes

Using getElementsByClassName returns a collection, not a single element.

Using querySelectorAll returns a list, not a single element.

Using querySelector works but requires a selector string with '#'.

getElementById selects a single element by its unique ID, which is perfect for our toggle button.

3fill in blank

hard

Fix the error in toggling the dark mode class on the root element.

Tailwind

document.documentElement.classList.[1]('dark');

Drag options to blanks, or click blank then click option'

Atoggle

Bremove

Cadd

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using add only adds the class but never removes it.

Using remove only removes the class but never adds it.

Using contains only checks if the class exists, does not change it.

toggle adds the class if missing, or removes it if present, perfect for switching dark mode on and off.

4fill in blank

hard

Fill both blanks to create a button with accessible label and Tailwind styles for dark mode.

Tailwind

<button id="toggle-btn" aria-label="[1]" class="[2]">
  Toggle Dark Mode
</button>

Drag options to blanks, or click blank then click option'

AToggle dark mode

Bbg-gray-200 dark:bg-gray-800 px-4 py-2 rounded

Cdark-mode-toggle

Dtext-white bg-black

Attempts:

3 left

💡 Hint

Common Mistakes

Missing or unclear aria-label reduces accessibility.

Using static colors without dark mode variants loses theme effect.

The aria-label describes the button for screen readers. The Tailwind classes style the button with light background normally and dark background in dark mode.

5fill in blank

hard

Fill all three blanks to complete the JavaScript code that toggles dark mode and saves preference in localStorage.

Tailwind

const btn = document.getElementById('toggle-btn');
btn.addEventListener('click', () => {
  document.documentElement.classList.[1]('dark');
  if(document.documentElement.classList.contains('dark')) {
    localStorage.setItem('[2]', '[3]');
  } else {
    localStorage.removeItem('[2]');
  }
});

Drag options to blanks, or click blank then click option'

Atoggle

Btheme

Cdark

Dadd

Attempts:

3 left

💡 Hint

Common Mistakes

Using add instead of toggle causes only adding, no removal.

Using inconsistent keys or values in localStorage breaks preference saving.

Forgetting to remove the key when dark mode is off causes wrong state.

toggle switches the dark class. The key theme stores the preference. The value dark marks dark mode active.