{"id":19139976,"url":"https://github.com/tinawebdev/javascript-projects","last_synced_at":"2025-07-27T11:35:10.679Z","repository":{"id":117921301,"uuid":"408339901","full_name":"tinawebdev/javascript-projects","owner":"tinawebdev","description":"Collection of the small projects built with HTML5, CSS3 \u0026 JavaScript. No frameworks or libraries.","archived":false,"fork":false,"pushed_at":"2022-04-27T10:49:58.000Z","size":57073,"stargazers_count":14,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-06T23:15:30.234Z","etag":null,"topics":["css-animations","css3","es6","html-css-javascript","html5","javascript","javascript-projects","js-examples","vanilla-js","web-api"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinawebdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-20T06:55:58.000Z","updated_at":"2024-09-17T06:12:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"8d9d55df-f387-4263-88e9-36c22f353c17","html_url":"https://github.com/tinawebdev/javascript-projects","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinawebdev%2Fjavascript-projects","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinawebdev%2Fjavascript-projects/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinawebdev%2Fjavascript-projects/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinawebdev%2Fjavascript-projects/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinawebdev","download_url":"https://codeload.github.com/tinawebdev/javascript-projects/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782835,"owners_count":21803410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-animations","css3","es6","html-css-javascript","html5","javascript","javascript-projects","js-examples","vanilla-js","web-api"],"created_at":"2024-11-09T07:15:51.488Z","updated_at":"2025-05-06T23:15:46.026Z","avatar_url":"https://github.com/tinawebdev.png","language":"JavaScript","readme":"# JavaScript Projects\nCollection of the small projects built with HTML5, CSS3 \u0026 JavaScript. No frameworks or libraries.\n\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)\n![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n![MDN Web Docs](https://img.shields.io/badge/MDN_Web_Docs-black?style=for-the-badge\u0026logo=mdnwebdocs\u0026logoColor=white)\n\n|   | Name     | Description   | Demo  |\n|---|----------|---------------|-------|\n| 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/) |\n| 2 | [Infinite Scroll](/infinite-scroll/) | Infinite photo viewer using Unsplash API. | [Demo](./infinite-scroll#demo) |\n| 3 | [Joke Teller](/joke-teller/) | Text to Voice-Based Joke Teller app. | [Demo](https://tinawebdev.github.io/javascript-projects/joke-teller/) |\n| 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/) |\n| 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/) |\n| 6 | [Animated Navigation](/animated-navigation/) | Website example with animated and responsive navigation. | [Demo](https://tinawebdev.github.io/javascript-projects/animated-navigation/) |\n| 7 | [Music Player](/music-player/) | Simple, yet stylish music player with custom controls. | [Demo](https://tinawebdev.github.io/javascript-projects/music-player/) |\n| 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/) |\n| 9 | [Bookmark App](/bookmark-app/) | Simple application for bookmarking webistes. | [Demo](https://tinawebdev.github.io/javascript-projects/bookmark-app/) |\n| 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/) |\n| 11 | [Form Validation](/form-validation/) | Form validation using HTML and JavaScript. | [Demo](https://tinawebdev.github.io/javascript-projects/form-validation/) |\n| 12 | [Spock Rock Game](/spock-rock-game/) | Rock Paper Scissor Lizard Spock game. | [Demo](https://tinawebdev.github.io/javascript-projects/spock-rock-game/) |\n| 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/) |\n| 14 | [Calculator](/calculator/) | Simple calculator to add, subtract, multiply and divide numbers. | [Demo](https://tinawebdev.github.io/javascript-projects/calculator/) |\n| 15 | [Paint Clone](/paint-clone/) | A paint clone app with HTML canvas. | [Demo](https://tinawebdev.github.io/javascript-projects/paint-clone/) |\n| 16 | [Github User Data](/github-user-data/) | Fetch profile user data from GitHub. | [Demo](https://tinawebdev.github.io/javascript-projects/github-user-data/) |\n\n## How to use\n* Open Terminal and change the current working directory to the location where you want the cloned directory to be made.\n* Download the repository using the [instruction](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository).\n* Open the directory with the files downloaded, go to the project folder and open the `index.html` file. All done.\n\n```bash\njavascript-projects\n└── `project-folder`\n    └── index.html\n```\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\n\n## License\nLicensed under the [MIT license](./LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinawebdev%2Fjavascript-projects","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinawebdev%2Fjavascript-projects","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinawebdev%2Fjavascript-projects/lists"}