CPNT 262 Day 5 - classList API and form events

Housekeeping

Trophies of the day

• Tip Calculator with form inputs
• CSS Toggle

1. Spoiler Demo: Eat and Drink

• Eat and Drink click handlers

2. Forms: text and number fields

To practice traditional forms you may use this url as the attribute value for action:

• https://sait-wbdv.herokuapp.com/form-submit

Materials

• Article: Prevent Default and Form Events by Wes Bos
• Takeaways: Forms and Javascript

Activities

• Adding Machine
• Tip Calculator with form inputs

3. CSS manipulation with classList

Terminology

Separation of concerns

The idea that each module or layer in an application should only be responsible for one thing and should not contain code that deals with other things.

Materials

• 'Element.classList'
  • dot notation
  • Code Examples

Activity

• Code Challenge: CSS Toggles with classList

4. Lab Time

• Assignment 1
• Stretch Activities:
  • Create a function that accepts any array as an argument and returns a random item in that array. See: Find a random item in an Array
  • Refactor the Eat and Drink click handler activity to use a form element with preventDefault()
  • Coding Challenge: Manipulating CSS with CSS Variables

Prep

DOM and classList

• Document Object Model
• 'Element.classList'
  • dot notation
  • Code Examples
• Code challenge: CSS Toggles

Forms and Javascript

• Review: Your first form
• Article: Prevent Default and Form Events by Wes Bos
• MDN: Event.preventDefault()