A compact, polished demo that blends CSS3 transitions/keyframes with modular JavaScript. It showcases:
- Hover/active micro-interactions (transitions)
- Keyframed motion (float, spinner, modal entrance)
- Reusable JS functions with parameters, return values, and scope (global/local/closure)
- JS-driven class toggles to trigger CSS animations (flip card, modal, loader)
- A working theme toggle (light/dark) persisted with
localStorage
index.html— semantic structure & controlsstyles.css— theme variables, transitions, keyframesscript.js— functions for duration math, class toggling, and DOM actions
Open index.html in any modern browser. No build step needed.
Augusto Mate · mate.augusto.mz@gmail.com
Assignment fit: Part 1 (visual effects), Part 2 (functions & scope), Part 3 (integration via class toggling).
- Added accessibility improvement: modal can now be closed with the Escape key, in addition to click.