https://github.com/florinpop17/10-projects-1-hour
The projects from the "10 JavaScript Projects in 1 Hour" Coding Challenge
https://github.com/florinpop17/10-projects-1-hour
Last synced: 7 months ago
JSON representation
The projects from the "10 JavaScript Projects in 1 Hour" Coding Challenge
- Host: GitHub
- URL: https://github.com/florinpop17/10-projects-1-hour
- Owner: florinpop17
- Created: 2020-09-08T16:22:56.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-11T08:44:20.000Z (about 5 years ago)
- Last Synced: 2025-01-24T18:48:43.396Z (9 months ago)
- Language: HTML
- Size: 742 KB
- Stars: 282
- Watchers: 10
- Forks: 110
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Coding Challenge - 10 JavaScript Projects in 1 Hour
YouTube video is now Live, click below:
[](https://www.youtube.com/watch?v=8GPPJpiLqHk)
I took on a challenge to completed 10 Projects in 1 Hour while streaming everything on [Twitch](https://twitch.tv/florinpop17).
You can find the projects [here](https://10projects1hour.netlify.app/).
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