https://github.com/biantris/10-projects-1-hour
🚀 10-PROJECTS-1-HOUR
https://github.com/biantris/10-projects-1-hour
carousel challenge css hamburger-button javascript popup sounds
Last synced: 7 months ago
JSON representation
🚀 10-PROJECTS-1-HOUR
- Host: GitHub
- URL: https://github.com/biantris/10-projects-1-hour
- Owner: biantris
- Created: 2020-09-12T16:40:46.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-19T01:21:44.000Z (about 5 years ago)
- Last Synced: 2025-01-26T16:33:09.681Z (9 months ago)
- Topics: carousel, challenge, css, hamburger-button, javascript, popup, sounds
- Language: CSS
- Homepage:
- Size: 291 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### 10 projects to be make in 1 hour 🤓
*Desafio desenvolvido por* [@florinpop17](https://github.com/florinpop17)
*link para o vídeo* ⬇
https://www.youtube.com/watch?v=8GPPJpiLqHk
**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
---
Made with 💜 by Beatriz Oliveira :wave: [Get in touch!](https://www.linkedin.com/in/beatriiz-oliveiraa/)