JavaScript Mini Projects Collection

📖 Overview

Welcome to the JavaScript Mini Projects Collection! This repository is a comprehensive set of 13 beginner-to-intermediate web applications built entirely with Vanilla JavaScript, HTML5, and CSS3.

These projects are designed to demonstrate fundamental and advanced web development concepts, including:

• DOM Manipulation & Event Handling
• Asynchronous Programming (Fetch API, Promises)
• Mathematical Logic & Algorithms
• State Management & Timers
• Modern Responsive Design (Flexbox, Grid, Glassmorphism)

---

🚀 Projects at a Glance

No.	Project Name	Description	Key Tech / Concept
01	Weather App	Real-time weather data using Open-Meteo API.	fetch(), async/await
02	Calculator	Fully functional arithmetic calculator.	eval(), CSS Grid
03	Stopwatch	Precision digital timer with millisecond tracking.	setInterval, Date.now()
04	Digital Clock	Real-time clock with Glassmorphism effect.	Date(), backdrop-filter
05	Dice Roller	Multiple dice simulator with visual output.	Math.random(), Arrays
06	Rock Paper Scissors	Classic game against an AI opponent.	Game Logic, switch
07	Counter App	Simple increment/decrement tool.	Event Listeners
08	Interest Calculator	Compound interest calculation tool.	Math Logic, Input Validation
09	Temperature Converter	Converts between Celsius and Fahrenheit.	Algebra, Radio States
10	Radius Calculator	Circle area and circumference calculator.	Math.PI
11	Number Guessing Game	Interactive browser-based guessing game.	Loops, window.prompt
12	Random Number Tool	Instant random number generator (1-100).	Math.floor
13	Password Generator	Secure and customizable password generator.	Logic, String Manipulation

---

📂 Detailed Breakdown

☁️ 1. Weather App

A dynamic application fetching live weather data for any city globally.

• Features: Real-time temperature, humidity, and weather conditions with matching icons.
• API: Uses Open-Meteo Geocoding & Weather APIs (No API Key required).

🔢 2. Calculator

A sleek, grid-based calculator for basic arithmetic.

• Features: Addition, subtraction, multiplication, division, and error handling.

⏱️ 3. Stopwatch

A high-precision stopwatch for timing tasks.

• Features: Start, Stop, and Reset functionality with millisecond accuracy.

🕒 4. Digital Clock

A beautiful glassmorphism-styled live clock.

• Features: 12-hour format with AM/PM indicators and smooth UI transitions.

🎲 5. Dice Roller

A visual simulator for rolling multiple dice.

• Features: Dynamic image generation based on roll results.

✊ 6. Rock Paper Scissors

The classic game implemented with score tracking.

• Features: Win/Loss/Tie evaluation and color-coded result feedback.

➕ 7. Counter App

A responsive number counter with increment, decrement, and reset controls.

• Features: Real-time count tracking with interactive button events.

💰 8. Interest Calculator

A financial calculator for computing compound interest.

• Features: Computes total accrued amount based on principal, interest rate, and years formatted as currency.

🌡️ 9. Temperature Converter

Converts temperature values between Celsius and Fahrenheit.

• Features: Directional conversion via radio buttons with accurate decimal rounding.

📏 10. Radius Calculator

Calculates geometric properties of a circle.

• Features: Computes both circumference and area from user-entered radius values using Math.PI.

❓ 11. Number Guessing Game

An interactive number guessing challenge.

• Features: Browser prompt interface tracking the number of guesses to find a random target (1–100).

🎲 12. Random Number Generator

An instant random number generator utility.

• Features: Generates and displays random numbers between 1 and 100 on button click.

🔐 13. Password Generator

A customizable and secure random password generator.

• Features: Generates strong passwords with configurable length and character sets (uppercase, lowercase, numbers, symbols).

---

🛠️ Tech Stack

• Frontend: HTML5, CSS3 (Flexbox, Grid)
• Logic: Vanilla JavaScript (ES6+)
• APIs: Open-Meteo API
• Design: Glassmorphism, Responsive Web Design

---

💻 How to Run

1. Clone the Repository:

   git clone https://github.com/VIJAYAPANDIANT/javascript-mini-projects.git

2. Open Projects:
   • Navigate to the project folder.
   • Double-click any .html file to launch it in your default browser.
   • No build process or local server is required.

---

✍️ Author

Vijayapandian T

• GitHub: @VIJAYAPANDIANT

---

Tip

Each project is contained within a single HTML file for easy learning and experimentation!