/10-projects-1-hour

The projects from the "10 JavaScript Projects in 1 Hour" Coding Challenge

Primary LanguageJupyter Notebook

Coding Challenge - 10 JavaScript Projects in 1 Hour

YouTube video is now Live, click below:

1Hour10Projects

I took on a challenge to completed 10 Projects in 1 Hour while streaming everything on Twitch.

You can find the projects here.

  1. Hamburger Button
  • button + hamburger icon
  • menu > li > a -> hidden
  • toggle on click
  • animation
  1. Toast Notification
  • toast container floating
  • toast design
  • button
  • click show random toast message
  1. Auto Write Text
  • text
  • index
  • show text based on index
  • increment index
  1. Popup / Modal
  • button
  • click on button to activate popup
  • popup container
  • popup with text
  • close btn popup with click event
  1. Purple Heart Rain
  • heart css
  • falling animation
  • create heart
  • add class
  • add it to body
  • interval
  1. Background Changer
  • button on click
  • generate color
  • change bg color on click
  1. Dark mode toggle
  • text
  • css for dark mode
  • toggle
  • toggle event
  1. Carousel
  • 3/4 images
  • carousel container
  • images container
  • images with fixed width and height
  • index
  • automatic switch index and update container transform property
  1. Sound Board
  • sounds (HAVE THESE READY SIR)
  • array with names
  • loop over array
  • create buttons w/ text
  • play sound on click
  1. Zoom effect
  • image
  • track mouse movement
  • set transform origin on hover

Other ideas

  1. Date - show date
  2. Image of the day - image library needed
  1. Something with API
  2. Random Number from 1 to 6
  3. Scroll to top
  4. Fixed nav on scroll
  5. Loader
  6. Converter
  7. Random Password Generator
  8. / \ random stuff