Skip to main content

Day 6 - Changing CSS with Javascript

Housekeeping

1. Assessment and Week 8 overview

Week 8 Schedule:

Assessments

2. Element.classList API

Slides - Changing CSS with Javascript

Materials

Demo: Dark mode toggle

Let’s build a checkbox that adds/removes a dark-mode class on the <body> element that changes a page’s color and background-color.

Activity

In groups of 2-3, create a button or checkbox that:

  • uses classList to add/remove a hide class on another element;
  • makes a paragraph (or other page content) disappears and appears when a hide class is added/removed.

3. CSS Variables

Materials

Demo: Colour slider

If we have time, let’s add a colour slider that changes the colour angle of both light and dark modes at the same time.

4. Lab Time

Prep

CSS Variables

Element.classList

Search list

  • “dark mode css variables”