diff --git a/README.md b/README.md index 488f46e..64ef22a 100644 --- a/README.md +++ b/README.md @@ -1,170 +1,184 @@ -# 100+ Javascript Projects for Beginners by JSBeginners.com -This is the entry repository for all of my projects over at, JSBeginners.com. - -If you want to see these projects in action, go to [100+ javascript projects for beginners](https://jsbeginners.com/javascript-projects-for-beginners/). - -Follow the links on the above page to see the individual project and to see the source from which the project came. - -You'll also find the link to each project's individual source files so **you can do all these beginner projects yourself**. - -**Please note, if there isn't a link to one of the projects on the page above, I just haven’t completed the project yet.** - -## List of 100+ JavaScript Projects for Beginners - -1. Change Background Color Project -2. Hex Change Background Color Project -3. Random Quotes Project -4. Pass the Message Project -5. Counter Project -6. Background Image Slider Project -7. Testimonials Project -8. Filter Project -9. Modal Project -10. Calculator Project -11. Tip Form Project -12. To Do List Project -13. Grocery Cart Project -14. Grocery List Project -15. Course Form Project -16. Flashcard Project -17. Budget Application Project -18. Coffee Shop Project -19. Car Dealership Project -20. Random Joke Project -21. Random Person Project -22. HTTP Methods Project -23. Wikipedia Search Project -24. Weather Data Project -25. Github Project -26. Zomato Restaurant Project -27. Comfy House Project -28. Analogue Clock Project -29. Mortgage Loan Calculator Project -30. Quote of the day Project -31. BMI Calculator Project -32. Weight Conversion Project -33. Background Color Switcher Project -34. 2D Breakout Game Project -35. Digital Calculator Project -36. Digital Clock Project -37. Event Countdown Timer Project -38. Tip Calculator Project -39. Word Count Tool Project -40. Contact Form Project (using local storage) -41. Day of Week App Project -42. Background Color Changer Project -43. Image Slider Project -44. Addition Game Project -45. Todo List Project -46. Interactive Quiz Project -47. Countdown Timer Project -48. Balloon Popping Game Project -49. RSS News Feed Project -50. Number Guessing Game Project -51. Light Switch Effect Project -52. Greeting Message Project -53. Height Conversion Project -54. Wack A Mole Game Project -55. Notes App Project -56. Todo App Project -57. Hangman App Project -58. Recipe App Project -59. Tip Calculator Project -60. Welcome Messages Project -61. Dynamically Changing Message Project -62. Coin Toss Application Project -63. Rock Paper Scissors Game Project -64. Ultimate Dice Game Project -65. Play Audio Files and Sounds Project -66. JavaScript Dynamic Typing Test Project -67. Functionator Function Practice Project -68. Magic Eight Ball JavaScript Project -69. Combination Guesser Game Project -70. Word Scramble Project -71. Countdown Timer Project -72. Pattern Matching Game Project -73. Click Popper Game Project -74. High Low Card Game Project -75. Click Shape Game Project -76. Word Finding Game Project -77. JavaScript Car Game Project -78. Input Field Character Counter Project -79. Element Scrolling Content Code Snippet Project -80. Fun with The Document Object Model Project -81. Just JavaScript Click Counter Project -82. Image Popup Window Project -83. JavaScript Word Guessing Hangman Game Project -84. JavaScript Modal Popup Example Project -85. Image Carousel JavaScript Animated Slideshow Application Project -86. Star Rating Project -87. Plane Bomber Game Project -88. JavaScript Accordion Component Project -89. Chaser Box Game Project -90. Tool tip Project -91. Email Exacter Application Project -92. Popup Message Project -93. Clipboard – Copy and Move Project -94. Pure JavaScript Calculator Project -95. Editable Shopping List Project -96. Placeholder Image Path Generator Project -97. Catch Element Game Project -98. Element Mouse and Click Events Project -99. Create Form Validation Project -100. Cookie Get Set Tester Project -101. DOM Interaction Application Project -102. Google Sheet Data to CSV Exporter Project -103. Flying Bird Game Project -104. Number Guessing Game Project -105. Element Catcher Game Project -106. Alien Invader Game Project -107. Card War Game Project -108. YouTube API Connection Project -109. Brick Breaker Paddle Ball Game -110. Drum Kit Project -111. CSS + JavaScript Clock -112. Playing with CSS Variables and JS -113. Array Cardio Day 1 -114. Flex Panels Image Gallary -115. Ajax Type Ahead -116. Array Cardio Day 2 -117. Fun with HTML5 Canvas -118. 14 Must Know Dev Tools Tricks -119. Hold Shift to Check Multiple Checkboxes -120. Custom HTML5 Video Player Project -121. Key Sequence Detection (KONAMI CODE) -122. Slide in on Scroll Project -123. Objects and Arrays – Reference Vs Copy -124. LocalStorage and Event Delegation -125. CSS Text Shadow Mouse Move Effect -126. Sorting Band Names without articles -127. Tally String Times with Reduce -128. Unreal Webcam Fun -129. Native Speech Recognition Project -130. Geolocation based Speedometer and Compass Project -131. Follow Along Links -132. Speech Synthesis Project -133. Sticky Nav Project -134. Event Capture, Propagation, Bubbling and Once Project -135. Stripe Follow Along Dropdown Navigation Project -136. Click and Drag to Scroll -137. Experimental Video Speed Controller UI Project -138. Countdown Clock Project -139. Wack-a-Mole Game Project - -## 100 JavaScript Projects for Beginners Challenge - -It's simple, but not easy. - -1. Follow the link above to find any of the projects in the above list. - -2. Read the description and follow the link on the project’s page to see how it functions (If the link is not available yet, it means I haven’t yet completed the project. But no worries. You can simply go to the course where I found the project). - -3. For the projects I’ve completed, download or clone my repository from GitHub. - -4. Delete the contents of the app.js file (or any other relevant js files) and then try to code out the JavaScript functionality for yourself. - -5. Once you complete the app, share it in the comments on the JavaScript project page on the blog so everyone can acknowledge your accomplishment! That’s it! - -6. **Bonus:** Share your completed project on Twitter with the hashtags #JSBeginners #100DaysOfCode - -### Coming Later, React and Node Projects... +# 🚀 100+ JavaScript Projects for Beginners [![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg?style=flat-square)](https://makeapullrequest.com) + +[![GitHub Stars](https://img.shields.io/github/stars/YOUR_USERNAME/REPO_NAME?style=for-the-badge)](https://github.com/YOUR_USERNAME/REPO_NAME/stargazers) +[![GitHub Contributors](https://img.shields.io/github/contributors/YOUR_USERNAME/REPO_NAME?style=for-the-badge)](https://github.com/YOUR_USERNAME/REPO_NAME/graphs/contributors) +[![Project License](https://img.shields.io/github/license/YOUR_USERNAME/REPO_NAME?style=for-the-badge)](LICENSE) + +> Master JavaScript through practical projects - From DOM manipulation to full-stack applications + +![Project Banner](./assets/banner.png) + +## 🌟 Featured Projects + +| Project | Difficulty | Category | Live Demo | Source Code | +|---------|------------|----------|-----------|-------------| +| **Alien Invader Game** | ⭐⭐ | Games | [Demo](https://) | [Code](#) | +| **Mortgage Calculator** | ⭐ | Finance | [Demo](https://) | [Code](#) | +| **Weather App** | ⭐⭐ | API | [Demo](https://) | [Code](#) | +| **Video Player** | ⭐⭐⭐ | Multimedia | [Demo](https://) | [Code](#) | +| **Speech Recognition** | ⭐⭐⭐ | Web APIs | [Demo](https://) | [Code](#) | + +## 📚 Table of Contents +- [Learning Path](#-learning-path) +- [Project Categories](#-project-categories) +- [Getting Started](#-getting-started) +- [Challenge Guidelines](#-100-days-challenge) +- [Contribution Guide](#-contribution-guidelines) +- [Resources](#-resources) +- [FAQ](#-faq) +- [License](#-license) + +## 🛠️ Getting Started + +### Prerequisites +- Modern web browser (Chrome/Firefox recommended) +- Code editor ([VS Code](https://code.visualstudio.com/) recommended) +- Basic understanding of HTML/CSS + +### Quick Start +```bash +# Clone repository +git clone https://github.com/YOUR_USERNAME/REPO_NAME.git + +# Navigate to project +cd project-directory + +# Open in browser +open index.html # Or use Live Server extension +🏆 100 Days Challenge +100 Days of Code + +Challenge Roadmap + +mermaid +Copy +gantt + title 100 Days JavaScript Challenge + dateFormat YYYY-MM-DD + section Core Concepts + DOM Manipulation :a1, 2023-10-01, 14d + API Integration :a2, after a1, 21d + Game Development :a3, after a2, 28d + section Advanced Topics + Web APIs :a4, after a3, 21d + Full Stack Concepts :a5, after a4, 16d +Progress Tracker + +markdown +Copy +- [ ] Day 1: Background Color Changer +- [ ] Day 2: Hex Color Generator +- [ ] Day 3: Random Quote Machine +... +📥 Download Progress Template + +🗂️ Project Categories +🎨 DOM Manipulation +Background Color Changer + +Interactive Quiz + +Dynamic Typing Test + +Total Projects: 28 + +🕹️ Games Development +Alien Invader + +Rock Paper Scissors + +Brick Breaker + +Total Projects: 22 + +📊 Data Handling +Budget App + +Recipe Manager + +CSV Exporter + +Total Projects: 18 + +🌐 API Integration +Weather App + +GitHub Finder + +YouTube Connector + +Total Projects: 15 + +View Complete List + +👥 Contribution Guidelines +Open Issues +Good First Issues + +We welcome contributions! Please follow these steps: + +Fork the repository + +Create your feature branch: git checkout -b feature/AmazingFeature + +Commit changes: git commit -m 'Add some AmazingFeature' + +Push to branch: git push origin feature/AmazingFeature + +Open a Pull Request + +Development Standards + +javascript +Copy +// Example Code Standard +function exampleFunction() { + // Use ES6+ syntax + const codingStandard = { + indent: 2, + semicolons: true, + comments: 'JSDoc style' + }; + + // Always include error handling + try { + // Implementation + } catch (error) { + console.error('Error:', error); + } +} +📚 Resources +JavaScript Documentation + +Git Handbook + +Debugging Techniques + +Project Ideas + +📌 FAQ +
Where should I start? Begin with Section 1 projects and progress sequentially. We recommend starting with DOM manipulation projects before moving to API integration.
How difficult are the projects? Projects range from beginner-friendly (⭐) to advanced (⭐⭐⭐⭐). Check difficulty badges in project descriptions.
Can I use frameworks? We recommend starting with vanilla JavaScript. After completing a project, feel free to refactor using frameworks.
+📜 Full Project List +
Click to expand full project list +# Project Name Difficulty Category Demo +1 Background Color Changer ⭐ DOM Link +2 Hex Color Generator ⭐ DOM Link +3 Random Quote Machine ⭐ DOM Link +... ... ... ... ... +139 Geolocation Compass ⭐⭐⭐⭐ Web APIs Link +
+🌐 Stay Connected +Twitter Follow +Discord +YouTube Channel + +Join our community: + +💬 Discussion Forum + +📰 Monthly Newsletter + +🎓 Tutorial Videos + +📜 License +Distributed under the MIT License. See LICENSE for more information.