View on GitHub

JS30

a bunch of vanilla JS practice projects based on JavaScript 30 by WesBos.

(archived)JS30

About

This repository contains 22 projects all based on “JavaScript30” by WesBos. All of them are using vanillaJS (pure JavaScript without any frameworks). I built these to learn basic JavaScript.

Projects

  1. Drum kit play with PC keyboard. See demo and note.
  2. Wall clock with digits under hands and a circle showing day/night on the center. See demo and note.
  3. Font adjuster using range sliders with instantaneous result. See demo and note.
  4. Panels image gallery with zooming effect when clicked. See demo and note.
  5. Type-ahead search for population in cities of US. See demo and note.
  6. Canvas with size adjustable brushes and eraser. See demo and note.
  7. Checklist that allows multiple check when holding Shift. See demo and note.
  8. Video player with custom layout. See demo and note.
  9. A random gif generator using key sequence detection based on The Coding Train tutorials(those about using api keys and deploying). See demo and note.
  10. Slide in/out effect on scroll. See demo and note.
  11. Checklist that “remember” the check status after refresh using local storage. See demo and note.
  12. CSS text shadow effect during mouse move. See demo and note.
  13. Photo booth using web cam with different filters and downloadable photo. See demo and note.
  14. Note with speech recognition. See demo and note.
  15. A follow along links” effect. See demo and note.
  16. Speech synthesis with control over rate, pitch, content. See demo and note.
  17. Webpage with sticky nav. See demo and note.
  18. Follow along dropdown when hover over element. See demo and note.
  19. Click, and drag to scroll effect. See demo and note.
  20. Video speed controller using mouse hover. See demo and note.
  21. Countdown clock with built-in and custom time frame. See demo and note.
  22. Whack a mole browser game using mouse. See demo and note.