- Determining states for animation
- Data attributes
- Creating simple state machines
- 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
- Hint: use
- On the
'error'state, animate the form by shaking it- You will need to create a
shakeanimation with@keyframes
- You will need to create a
- Refactor to a state machine to send events and prevent impossible state transitions (we'll do this together)