🚀 JavaScript Mini Projects Collection

A curated collection of Vanilla JavaScript applications demonstrating core web development concepts, algorithms, and DOM manipulation mastery — now expanded with Advanced Async/Await and API integration.

---

📖 About The Repository

This repository is a journey through the fundamentals of Web Development. It contains 15+ distinct projects built entirely with HTML, CSS, and Vanilla JavaScript.

Unlike framework-based projects (React, Vue, etc.), these mini-apps focus on first-principles JavaScript:

• DOM Manipulation – Creating, updating, and deleting elements dynamically
• Algorithmic Logic – Using Math, Date, and conditional reasoning
• State Management – Handling data without external libraries
• Event Handling – Mastering events, bubbling, delegation, and interactions
• Asynchronous Programming – Consuming external APIs using Fetch and Async/Await

---

📂 The Projects Directory

🛠️ Utilities & Tools

Practical applications for everyday tasks.

Project Name	Key Concepts Learned	Complexity
To-Do List	DOM CRUD, createElement, Events	⭐⭐⭐
Digital Clock	Date, setInterval, Formatting	⭐⭐
Temperature Converter	Math Logic, Validation	⭐⭐
Random Quote Generator	Arrays, Randomization	⭐⭐

---

🎮 Games & Fun

Interactive logic-driven projects.

Project Name	Key Concepts Learned	Complexity
Dice Roller	Math.random, Image Mapping	⭐⭐
Love Calculator	Deterministic Logic	⭐
Random Number Generator	Range Calculation	⭐
Clicker Effect	DOM Visualization, Animation	⭐⭐⭐

---

🧠 Logic & Algorithms

Projects requiring deeper reasoning.

Project Name	Key Concepts Learned	Complexity
Astrology Engine	Modulo Logic, Mapping	⭐⭐⭐
Income Tax Calculator	Financial Logic	⭐⭐⭐
JS Basics Quiz	FormData API, Objects	⭐⭐⭐
Simple Counter	State Management	⭐

---

🎨 Visual & DOM

UI-focused dynamic projects.

Project Name	Key Concepts Learned	Complexity
Color Switcher	Event Delegation	⭐⭐
Olympic Countdown	Time Calculations	⭐⭐

---

⚡ Advanced & API Integrations

Intermediate-level applications involving Async/Await, External APIs, and complex data handling.

Project Name	Key Concepts Learned	Complexity
GitHub User Fetcher	Async/Await, Fetch API, Error Handling, JSON Parsing	⭐⭐⭐⭐⭐
Real-Time Weather App	Async/Await, Fetch API, API Key Management, ES6 Destructuring	⭐⭐⭐⭐⭐

---

💻 Tech Stack

Built using the Core Web Trinity — no frameworks, no dependencies.

Technology	Usage & Concepts Applied
HTML5	• Semantic Structure (Header, Main, Section)• Forms & Inputs (Text, Number, Radio, Checkbox)• Native Validation (Required, Min/Max attributes)
CSS3	• Layouts: Flexbox & CSS Grid centering techniques• Interactivity: Hover effects, Transitions (transform: scale)• Responsiveness: Media Queries & fluid widths (flex-wrap)• Visuals: Box Shadows, Gradients, and Dynamic Coloring
JavaScript (ES6+)	• Async Logic: Async/Await, Fetch API, Promises, JSON Parsing• DOM Mastery: createElement, append, remove, classList toggling• Event Handling: Event Delegation, Bubbling, Form Submission (e.preventDefault)• Algorithms: Math.random, Date calculations, setInterval, Array Iteration (for...of)

---

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/Rohit-Ahire-22/javascript-mini-projects.git

2️⃣ Navigate to a Project

Choose any project folder from the list above.

cd javascript-mini-projects/to-do-list-project

🚀 Launch

Since these are static projects, no server is required.

Method A:
Open the project folder and double-click the index.html file.

Method B (Recommended):
If you are using VS Code, right-click index.html and select Open with Live Server.

---

🤝 Contributions

Contributions are always welcome! If you have a cool idea for a mini-project or want to improve an existing one, follow these steps:

1. Fork the repository

2. Create your feature branch

git checkout -b feature/NewProject

3. Commit your changes

git commit -m "Add NewProject"

4. Push to the branch

git push origin feature/NewProject

5. Open a Pull Request

Open a Pull Request on GitHub from your feature branch.

---

🌟 Support

If you found these projects helpful for learning JavaScript, please consider giving this repository a Star ⭐️ — it helps a lot and keeps the project growing!