florinpop17/10-projects-1-hour

Coding Challenge - 10 JavaScript Projects in 1 Hour

YouTube video is now Live, click below:

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

2. Toast Notification

• toast container floating
• toast design
• button
• click show random toast message

3. Auto Write Text

• text
• index
• show text based on index
• increment index

4. Popup / Modal

• button
• click on button to activate popup
• popup container
• popup with text
• close btn popup with click event

5. Purple Heart Rain

• heart css
• falling animation
• create heart
• add class
• add it to body
• interval

6. Background Changer

• button w/ click
• generate color
• change bg color on click

7. Dark mode toggle

• text
• css for dark mode
• toggle
• toggle event

8. Carousel

• 3/4 images
• carousel container
• images container
• images with fixed width and height
• index
• automatic switch index and update container transform property

9. Sound Board

• sounds (HAVE THESE READY SIR)
• array with names
• loop over array
• create buttons w/ text
• play sound on click

10. 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

• https://picsum.photos/200/300

3. Something with API
4. Random Number from 1 to 6
5. Scroll to top
6. Fixed nav on scroll
7. Loader
8. Converter
9. Random Password Generator
10. / \ random stuff