HTML-CSS-JS Projects

A high-quality collection of interactive web applications built with vanilla HTML, CSS, and JavaScript. This repository showcases various front-end development patterns, API integrations, and modern UI/UX principles.

---

Projects Overview

1. Calculator

A functional scientific calculator featuring:

• Basic arithmetic operations.
• Advanced functions ($x^2$, $\pi$, $e$).
• Expression parsing with bracket support and error handling.

2. Currency Converter

Real-time currency conversion tool:

• Integrates with ExchangeRate-API for live data.
• Dynamic flag display using FlagsAPI.
• Swap functionality and support for multiple global currencies.

3. Multi-Functional Clock

A 3-in-1 time management application including:

• Digital Clock: Shows current time and date with live updates.
• Stopwatch: Precise time tracking with laps/reset capability.
• Timer: Countdown functionality with completion alerts.

4. Drawing App

A creative canvas-based application:

• Smooth freehand drawing using HTML5 Canvas API.
• Adjustable brush size and custom color picker.
• Options to clear the canvas or download your creation as a PNG.

5. Random Joke Generator

Your daily dose of humor:

• Fetches random jokes from JokeAPI.
• Displays dynamic, matching imagery from Unsplash/Picsum.
• Responsive card-based design.

6. Todo List App

Advanced task management system:

• Add, edit, and delete tasks.
• Dedicated fields for due dates and completion status.
• LocalStorage persistence to keep your data after refresh.

7. Typing Speed Test

Improve your typing performance:

• Three difficulty levels (Easy, Medium, Hard).
• Real-time WPM (Words Per Minute) and Accuracy tracking.
• Interactive text highlighting for correct/incorrect keystrokes.

8. Weather App

Global weather forecasting:

• Fetches data from wttr.in for any city.
• Displays Temperature, Feels Like, Humidity, and Wind Speed.
• Modern glassmorphism-inspired UI.

9. Words Counter

Comprehensive text analysis utility:

• Real-time Word, Character, and Sentence count.
• Estimated reading time calculation.
• Text transform tools (UPPERCASE, lowercase, Clean Spaces).

---

Tech Stack

• HTML5: Semantic structure.
• CSS3: Modern styling with Flexbox/Grid and animations.
• JavaScript (ES6+): Functional programming, Async/Await, and DOM manipulation.

Design Philosophy

• Clean & Minimalist: White/neutral backgrounds for clarity.
• Intuitive UI: Easy-to-use interfaces with clear feedback.
• Performance Focused: Efficient code with zero external dependencies (aside from standard APIs).