Skip to content

Prep 5: Styling Text, Events, & Functions

Textbook Reading

  • CSS
    • 4.7 CSS Text Styling
    • 4.8 CSS Frameworks and Variables
  • JS
    • 8.8 Functions
    • 9.3 Events

MOAR Selectors with CSS Diner 🍽️

Complete the remaining levels (15-32) of CSS Diner.

When you’re done, open the menu in the upper-right and submit a screenshot showing you have completed these levels.

Submit the screenshot to gradescope.

Styling, Events, & Functions

Following your reading about functions and events in js, we’ll make a little app in which one can change the background color of the page by selecting different swatches. As different swatches are selected, they’re reflected in the background of the page, and the “scoreboard” is updated.

All work will be done in main.js

This prep starts with several files, but you only need to to edit main.js. Please still review the other files 😆.

  1. start with the provided code
  2. begin by opening a live preview of the html file in your browser, and as always open your browser’s devtools (especially the console).
  3. there’s already a console error 🙄 it’s due to the issues explained in 9.3.2. Jump down to the last FIXME of main.js.
  4. After you fix that issue, try clicking on the first (white) swatch. Observe what happens in your js console.
  5. complete the TODO and FIXME items in main.js
How did you do enableSwatches?

There are several ways one could go about ensuring that all the swatches in main are actionable. How did you do it?

  • Did you loop over all the swatches?
  • How many copies of the same or similar eventlistener does your approach create (in terms of the number of swatches n)?
  • How (does?!) your event listener know which swatch was clicked?

Due to the bubbling of events (see 9.3.4 Event Propagation), you could just listen for clicks on the parent of the swatches…

  1. submit your main.js to gradescope.