https://github.com/tinawebdev/javascript-projects
Collection of the small projects built with HTML5, CSS3 & JavaScript. No frameworks or libraries.
https://github.com/tinawebdev/javascript-projects
css-animations css3 es6 html-css-javascript html5 javascript javascript-projects js-examples vanilla-js web-api
Last synced: 8 days ago
JSON representation
Collection of the small projects built with HTML5, CSS3 & JavaScript. No frameworks or libraries.
- Host: GitHub
- URL: https://github.com/tinawebdev/javascript-projects
- Owner: tinawebdev
- License: mit
- Created: 2021-09-20T06:55:58.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-04-27T10:49:58.000Z (about 3 years ago)
- Last Synced: 2025-05-06T23:15:30.234Z (8 days ago)
- Topics: css-animations, css3, es6, html-css-javascript, html5, javascript, javascript-projects, js-examples, vanilla-js, web-api
- Language: JavaScript
- Homepage:
- Size: 54.4 MB
- Stars: 14
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript Projects
Collection of the small projects built with HTML5, CSS3 & JavaScript. No frameworks or libraries.
| | Name | Description | Demo |
|---|----------|---------------|-------|
| 1 | [Quote Generator](/quote-generator/) | Random Quote Generator using the Forismatic API with the ability to share to Twitter. | [Demo](https://tinawebdev.github.io/javascript-projects/quote-generator/) |
| 2 | [Infinite Scroll](/infinite-scroll/) | Infinite photo viewer using Unsplash API. | [Demo](./infinite-scroll#demo) |
| 3 | [Joke Teller](/joke-teller/) | Text to Voice-Based Joke Teller app. | [Demo](https://tinawebdev.github.io/javascript-projects/joke-teller/) |
| 4 | [Picture in Picture](/picture-in-picture/) | Web application to capture your screen and cast into Picture in Picture Mode. | [Demo](https://tinawebdev.github.io/javascript-projects/picture-in-picture/) |
| 5 | [Light/Dark Mode](/light-dark-mode/) | Website example that toggles between light and dark mode. | [Demo](https://tinawebdev.github.io/javascript-projects/light-dark-mode/) |
| 6 | [Animated Navigation](/animated-navigation/) | Website example with animated and responsive navigation. | [Demo](https://tinawebdev.github.io/javascript-projects/animated-navigation/) |
| 7 | [Music Player](/music-player/) | Simple, yet stylish music player with custom controls. | [Demo](https://tinawebdev.github.io/javascript-projects/music-player/) |
| 8 | [Custom Countdown](/custom-countdown/) | Custom countdown app that uses local storage to keep the user data. | [Demo](https://tinawebdev.github.io/javascript-projects/custom-countdown/) |
| 9 | [Bookmark App](/bookmark-app/) | Simple application for bookmarking webistes. | [Demo](https://tinawebdev.github.io/javascript-projects/bookmark-app/) |
| 10 | [Video Player](/video-player/) | Custom video player with seek, volume, playback speed and fullscreen functionalities. | [Demo](https://tinawebdev.github.io/javascript-projects/video-player/) |
| 11 | [Form Validation](/form-validation/) | Form validation using HTML and JavaScript. | [Demo](https://tinawebdev.github.io/javascript-projects/form-validation/) |
| 12 | [Spock Rock Game](/spock-rock-game/) | Rock Paper Scissor Lizard Spock game. | [Demo](https://tinawebdev.github.io/javascript-projects/spock-rock-game/) |
| 13 | [NASA API Pictures](/nasa-api-pictures/) | Check out random NASA Astronomy Pictures of the Day. | [Demo](https://tinawebdev.github.io/javascript-projects/nasa-api-pictures/) |
| 14 | [Calculator](/calculator/) | Simple calculator to add, subtract, multiply and divide numbers. | [Demo](https://tinawebdev.github.io/javascript-projects/calculator/) |
| 15 | [Paint Clone](/paint-clone/) | A paint clone app with HTML canvas. | [Demo](https://tinawebdev.github.io/javascript-projects/paint-clone/) |
| 16 | [Github User Data](/github-user-data/) | Fetch profile user data from GitHub. | [Demo](https://tinawebdev.github.io/javascript-projects/github-user-data/) |
## How to use
* Open Terminal and change the current working directory to the location where you want the cloned directory to be made.
* Download the repository using the [instruction](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository).
* Open the directory with the files downloaded, go to the project folder and open the `index.html` file. All done.
```bash
javascript-projects
└── `project-folder`
└── index.html
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
Licensed under the [MIT license](./LICENSE).