Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yutaasakura96/ya-js30
A collection of 30 small vanilla JavaScript, CSS, and HTML web apps inspired by WESBOS' JS30
https://github.com/yutaasakura96/ya-js30
Last synced: 8 days ago
JSON representation
A collection of 30 small vanilla JavaScript, CSS, and HTML web apps inspired by WESBOS' JS30
- Host: GitHub
- URL: https://github.com/yutaasakura96/ya-js30
- Owner: yutaasakura96
- License: mit
- Created: 2024-09-13T03:53:58.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2024-09-17T13:45:32.000Z (2 months ago)
- Last Synced: 2024-09-17T16:46:21.609Z (2 months ago)
- Language: CSS
- Size: 8.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# YA-JS30
A collection of 30 small vanilla JavaScript, CSS, and HTML projects inspired by WESBOS' JS30
## Projects
### 1. [Spotify Music App](./project1)
A custom-built, Neomorphism design spotify-inspired music player that allows users to play, pause, skip, repeat and shuffle songs from a pre-defined playlist.
📖 [More info](./project1/readme.md)
[Live Demo](https://ya-js30-project1.netlify.app/)
### 2. [Product Card](./project2)
A stylish and modern product card built using HTML and CSS.
⚠️ **Note**: This project is designed to work best on screen sizes of **1400px and upwards**. It may not be fully responsive on smaller screens.
📖 [More info](./project2/readme.md)
[Live Demo](https://ya-js30-project2.netlify.app/)
### 3. [CSS Navigation Menu](./project3/navigation-menu)
A simple yet elegant CSS navigation menu with hover animations. This project features a vertical navigation bar with custom animations on hover.
⚠️ **Note**: This project is designed to work best on screen sizes of **1440px and upwards**. It may not be fully responsive on smaller screens.
📖 [More info](./project3/navigation-menu/readme.md)
[Live Demo](https://ya-js30-project3.netlify.app/)
### 4. [Success / Fail Modal Box](./project4)
This project implements a stylish **Success** and **Fail** modal box using HTML, CSS, and JavaScript. The modal boxes are triggered by buttons and include smooth animations with custom icons for both success and failure scenarios.
📖 [More info](./project4/readme.md)
[Live Demo](https://ya-js30-project4.netlify.app/)
### 5. [Sign Up - Sign In Forms](./project5)
A modern and visually appealing **Sign Up** and **Sign In** form design with smooth transitions between both forms.
⚠️ **Note**: This project is designed to work best on screen sizes of **1024px and upwards**. It may not be fully responsive on smaller screens.
[Live Demo](https://ya-js30-project5.netlify.app/)
📖 [More info](./project5/readme.md)
### 6. [Landing Page](./project6)
A modern and visually appealing landing page for **CreativeHub**
⚠️ **Note**: This project is designed to work best on screen sizes of **1440px and upwards**. It may not be fully responsive on smaller screens.
📖 [More info](./project6/readme.md)
[Live Demo](https://ya-js30-project6.netlify.app/)
### 7. [Blog Card](./project7)
This project features a dynamic and visually appealing **Blog Card** designed using HTML, CSS, and JavaScript.
⚠️ **Note**: This project is designed to work best on screen sizes of **1440px and upwards**. It may not be fully responsive on smaller screens.
📖 [More info](./project7/readme.md)
[Live Demo](https://ya-js30-project7.netlify.app/)
### 8. [Light / Dark Mode Form](./project8)
This project is a **Light/Dark Mode** form that switches between light and dark themes with a smooth animation.
⚠️ **Note**: This project is designed to work best on screen sizes of **1200px and upwards**. It may not be fully responsive on smaller screens.
📖 [More info](./project8/readme.md)
[Live Demo](https://ya-js30-project8.netlify.app/)
### 9. [Random Quote Generator](./project9)
A simple and elegant **Random Quote Generator** built using HTML, CSS, and JavaScript. This project displays a random quote from an API with an option to tweet the quote directly via Twitter.
📖 [More info](./project9/readme.md)
[Live Demo](https://ya-js30-project9.netlify.app/)
### 10. [Unsplash API Infinite Scroll](./project10)
A web app that fetches random photos from the Unsplash API and displays them in an infinite scrolling layout. As the user scrolls down, more photos are loaded automatically. This project leverages a serverless function using Netlify to securely fetch photos from Unsplash without exposing the API key in the frontend.
📖 [More info](./project10/readme.md)
[Live Demo](https://ya-js30-project-10.netlify.app/)
### 11. [Picture in Picture](./project11)
This project demonstrates how to use the **Picture-in-Picture** functionality in the browser using vanilla JavaScript. The user can select a screen or window to share, and then view the media in a picture-in-picture window.
📖 [More info](./project11/readme.md)
[Live Demo](https://ya-js30-project11.netlify.app/)
### 12. [Joke Teller Robot](./project12)
A fun web application that tells programming jokes using JokeAPI and reads them aloud using the VoiceRSS Text-to-Speech API. This app uses serverless functions hosted on Netlify to securely handle the API key for the text-to-speech functionality.
📖 [More info](./project12/readme.md)
[Live Demo](https://ya-js30-project12.netlify.app/)
### 13. [Custom Countdown](./project13)
A dynamic and customizable countdown timer built using HTML, CSS, and JavaScript. This project allows users to create a countdown for any upcoming event with a visually appealing video background.
📖 [More info](./project13/readme.md)
[Live Demo](https://ya-js30-project13.netlify.app/)
### 14. [Bookmark App](./project14)
A simple bookmark manager app that allows users to save, manage, and access their favorite websites easily. Built with HTML, CSS, and JavaScript, this app stores your bookmarks locally in the browser using `localStorage`.
📖 [More info](./project14/readme.md)
[Live Demo](https://ya-js30-project14.netlify.app/)
### 15. [NASA Picture Of the Day](./project15)
This web app allows users to view stunning images from NASA's Astronomy Picture of the Day (APOD) API. Users can browse NASA's images, read about each one, and add their favorite images to a personalized favorites list. The app stores favorites locally, ensuring they persist between sessions.
📖 [More info](./project15/readme.md)
[Live Demo](https://ya-js30-project15.netlify.app/)
🏗️ Projects 16 - 30 coming soon!
15. [Project 15 - Description](./project15)
16. [Project 16 - Description](./project16)
17. [Project 17 - Description](./project17)
18. [Project 18 - Description](./project18)
19. [Project 19 - Description](./project19)
20. [Project 20 - Description](./project20)
21. [Project 21 - Description](./project21)
22. [Project 22 - Description](./project22)
23. [Project 23 - Description](./project23)
24. [Project 24 - Description](./project24)
25. [Project 25 - Description](./project25)
26. [Project 26 - Description](./project26)
27. [Project 27 - Description](./project27)
28. [Project 28 - Description](./project28)
29. [Project 29 - Description](./project29)
30. [Project 30 - Description](./project30)