Skip to content

Latest commit

 

History

History

04-states

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

Lesson 4: States

  • Determining states for animation
  • Data attributes
  • Creating simple state machines

Exercise

  • Use JavaScript to change the state of the form from 'subscribe' to 'loading' when the button is clicked.
  • After 2 seconds in 'loading', change the state to 'success' or 'error' (chosen randomly to simulate an error state)
    • Hint: use Math.random() < 0.5
  • On the 'error' state, animate the form by shaking it
    • You will need to create a shake animation with @keyframes
  • Refactor to a state machine to send events and prevent impossible state transitions (we'll do this together)

Resources