https://github.com/prajapatiroshan/javascript-projects-beginners
This repository is designed to offer hands-on opportunities to deepen your understanding of JavaScript through a diverse array of projects. Each project is crafted to challenge and inspire, making it the perfect resource for beginner developers aiming to refine their coding expertise. Dive in and start coding your way to JavaScript proficiency!
https://github.com/prajapatiroshan/javascript-projects-beginners
canvas code-phat-gaya html-css-javascript html5 javascript javascript-applications javascript-framework javascript-game javascript-practice javascript-practice-project javascript-programming javascript-projects javascript-projects-for-beginners project vanilla-javascript
Last synced: 3 months ago
JSON representation
This repository is designed to offer hands-on opportunities to deepen your understanding of JavaScript through a diverse array of projects. Each project is crafted to challenge and inspire, making it the perfect resource for beginner developers aiming to refine their coding expertise. Dive in and start coding your way to JavaScript proficiency!
- Host: GitHub
- URL: https://github.com/prajapatiroshan/javascript-projects-beginners
- Owner: PrajapatiRoshan
- License: mit
- Created: 2024-08-17T11:42:31.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-01-04T15:12:45.000Z (6 months ago)
- Last Synced: 2025-01-04T16:20:30.920Z (6 months ago)
- Topics: canvas, code-phat-gaya, html-css-javascript, html5, javascript, javascript-applications, javascript-framework, javascript-game, javascript-practice, javascript-practice-project, javascript-programming, javascript-projects, javascript-projects-for-beginners, project, vanilla-javascript
- Language: HTML
- Homepage: https://prajapatiroshan.github.io/javascript-projects-beginners/
- Size: 21.8 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# [Javascript-Projects-Beginners](https://github.com/PrajapatiRoshan/javascript-projects-beginners)
**Vanilla JavaScript Projects Collection for Biginners**
Welcome to the Vanilla JavaScript Projects Collection repository! This repository is a treasure trove of mini projects, specifically crafted for beginners who want to deepen their understanding of JavaScript without relying on frameworks or libraries. Whether you're just starting out with JavaScript or looking to practice and refine your skills, this collection offers a wide variety of hands-on projects that cover different aspects of the language.
## 📂 What You'll Find
This repository contains a diverse array of Vanilla JavaScript projects. Each project is meticulously designed to demonstrate specific JavaScript functionalities, best practices, and coding patterns. Here's a glimpse of what you can expect:
- Basic DOM Manipulation: Learn how to interact with the Document Object Model (DOM) using JavaScript to create dynamic and interactive web pages.
- API Integration: Explore how to fetch data from external APIs and display it dynamically on your web pages.
- Event Handling: Understand how to use event listeners to respond to user interactions like clicks, keypresses, and mouse movements.
- Animations and Transitions: Discover how to create smooth animations and transitions using CSS combined with JavaScript control.
- Local Storage: Learn to use the browser's local storage to save and retrieve data, enabling persistent user experiences across sessions.
## 🚀 Why This Repository?
- Beginner-Friendly: All projects are designed with beginners in mind, providing clear, concise, and well-commented code.
- No Frameworks Needed: Focus purely on Vanilla JavaScript to gain a solid foundation before diving into frameworks.
- Progressive Learning: Start with simple projects and gradually take on more challenging ones as your skills improve.
- Hands-On Practice: The best way to learn JavaScript is by doing, and this repository is all about hands-on coding.
## 💻 Website
please visit our website at [link](https://prajapatiroshan.github.io/javascript-projects-beginners/).
# JavaScript Projects (Beginners)
Here is a list of JavaScript projects:
| Index | Project Name | Code Link | Demo Link |
| ----- | -------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| 01 | ToDoList | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/1-ToDoList) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/1-ToDoList) |
| 02 | GradientColor | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/2-GradientColor) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/2-GradientColor) |
| 03 | imageCarousel | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/3-imageCarousel) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/3-imageCarousel) |
| 04 | profileCarousel | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/4-profileCarousel) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/4-profileCarousel) |
| 05 | tabbedCom | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/5-tabbedCom) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/5-tabbedCom) |
| 06 | QRCodeGenerator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/6-QRCodeGenerator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/6-QRCodeGenerator) |
| 07 | 3d-box-Background | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/7-3d-box-Background) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/7-3d-box-Background) |
| 08 | animated-nav-close | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/8-animated-nav-close) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/8-animated-nav-close) |
| 09 | reveal-text-animated | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/9-reveal-text-animated) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/9-reveal-text-animated) |
| 10 | flash-slide-background-img | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/10-flash-slide-background-img) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/10-flash-slide-background-img) |
| 11 | lazy-loading-img | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/11-lazy-loading-img) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/11-lazy-loading-img) |
| 12 | laxy-content-loading | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/12-laxy-content-loading) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/12-laxy-content-loading) |
| 13 | fun-jokes | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/13-fun-jokes) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/13-fun-jokes) |
| 14 | vertical-slider | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/14-vertical-slider) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/14-vertical-slider) |
| 15 | box-dnd | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/15-box-dnd) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/15-box-dnd) |
| 16 | simple-drawing-book | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/16-simple-drawing-book) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/16-simple-drawing-book) |
| 17 | water-goal-app | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/17-water-goal-app) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/17-water-goal-app) |
| 18 | animated-img-expanding | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/18-animated-img-expanding) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/18-animated-img-expanding) |
| 19 | form-input-wave | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/19-form-input-wave) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/19-form-input-wave) |
| 20 | hover-track | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/20-hover-track) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/20-hover-track) |
| 21 | catch-insect-game | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/21-catch-insect-game) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/21-catch-insect-game) |
| 22 | movie-banner | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/22-movie-banner) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/22-movie-banner) |
| 23 | random-password-generator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/23-random-password-generator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/23-random-password-generator) |
| 24 | timer-clock | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/24-timer-clock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/24-timer-clock) |
| 25 | wallpaper-clock | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/25-wallpaper-clock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/25-wallpaper-clock) |
| 26 | digital-clock | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/26-digital-clock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/26-digital-clock) |
| 27 | candf-tempeature-convertor | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/27-candf-tempeature-convertor) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/27-candf-tempeature-convertor) |
| 28 | random-quote-generator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/28-random-quote-generator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/28-random-quote-generator) |
| 29 | stopWatch | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/29-stopWatch) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/29-stopWatch) |
| 30 | currencyConvert | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/30-currencyConvert) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/30-currencyConvert) |
| 31 | ExpenseTracker | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/31-ExpenseTracker) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/31-ExpenseTracker) |
| 32 | age-calculator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/32-age-calculator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/32-age-calculator) |
| 33 | video-background-cover | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/33-video-background-cover) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/33-video-background-cover) |
| 34 | BMI-calculator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/34-BMI-calculator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/34-BMI-calculator) |
| 35 | button-ripple-anim | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/35-button-ripple-anim) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/35-button-ripple-anim) |
| 36 | AnalogClock | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/36-AnalogClock) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/36-AnalogClock) |
| 37 | english-dictionary | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/37-english-dictionary) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/37-english-dictionary) |
| 38 | heart-trailing | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/38-heart-trailing) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/38-heart-trailing) |
| 39 | image-search-web | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/39-image-search-web) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/39-image-search-web) |
| 40 | image-sliders | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/40-image-sliders) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/40-image-sliders) |
| 41 | loan-calculator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/41-loan-calculator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/41-loan-calculator) |
| 42 | small-calender | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/42-small-calender) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/42-small-calender) |
| 43 | month-calender | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/43-month-calender) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/43-month-calender) |
| 44 | notes-app | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/44-notes-app) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/44-notes-app) |
| 45 | photo-generator | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/45-photo-generator) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/45-photo-generator) |
| 46 | 2d-image-roller | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/46-2d-image-roller) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/46-2d-image-roller) |
| 47 | milsec-stopwatch | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/47-milsec-stopwatch) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/47-milsec-stopwatch) |
| 48 | temperature-convert | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/48-temperature-convert) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/48-temperature-convert) |
| 49 | image-editor | [Code](https://github.com/PrajapatiRoshan/javascript-projects-beginners/tree/main/49-image-editor) | [Demo](https://prajapatiroshan.github.io/javascript-projects-beginners/49-image-editor) |
Feel free to explore and use these projects for learning and practice! If you have any questions or need further assistance, don't hesitate to ask.
---
## 🧰 Tools and Technologies
- HTML5: The backbone of our projects, providing structure and content.
- CSS3: Used for styling, layout, and basic animations.
- Vanilla JavaScript: Pure JavaScript without any external libraries or frameworks.
- Browser Developer Tools: Debug and experiment directly in the browser.
## 📚 Learning Resources
If you're new to JavaScript or need a refresher, here are some resources to get you started:
- [MDN Web Docs - JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [JavaScript.info](https://javascript.info/)
- [Eloquent JavaScript](https://eloquentjavascript.net/)
## 💡 Contributing
Contributions are welcome! If you have a new project idea or improvement, feel free to fork the repository, create a new branch, and submit a pull request. Let's grow this collection together!
## 📝 License
This repository is licensed under the [MIT License](LICENSE). Feel free to use the code for your projects, personal or commercial.
Happy coding! 😉