Mini JavaScript Projects

A curated collection of vanilla JavaScript applications by Aman Singh, showcasing modern frontend skills with vanilla JavaScript — from DOM manipulation and API integration to physics simulations, games, and small productivity tools.

Use this repo as a portfolio of real, self-contained mini-apps that you can run locally in a browser or deploy to any static host.

🚀 Featured Projects

Physics Engine

A modular 2D physics engine built from scratch with HTML5 Canvas.

• Key Features: Custom vector mathematics library, collision detection system, and multiple interactive demos (Bouncing Balls, Breakout).
• Tech Stack: ES6 Modules, Canvas API, Vector Math.

Weather Now

A minimalistic, offline-capable weather application.

• Key Features: Real-time data via Open-Meteo API, 12-hour forecast, city search, local persistence, and PWA support (installable).
• Tech Stack: Service Workers, Fetch API, CSS Grid, Glassmorphism.

Digital Notebook

A beautiful, distraction-free note-taking application.

• Key Features: Create/Edit/Delete notes, auto-save functionality, full-text search, and responsive sidebar navigation.
• Tech Stack: LocalStorage, DOM Manipulation, CSS Flexbox.

Music Player

A modern audio player interface with playlist support.

• Key Features: Play/Pause/Seek controls, volume management, playlist navigation, and keyboard shortcuts.
• Tech Stack: HTML5 Audio API, Range Inputs, Event Handling.

Recipe Finder

A content-rich recipe discovery application with fluid transitions.

• Key Features: SPA architecture, masonry grid layout, immersive detail view with hero images, and glassmorphism UI.
• Tech Stack: HTML5, Tailwind CSS, Vanilla JavaScript.

Expense Tracker

A desktop expense tracker dashboard with data visualization.

• Features: Dark mode dashboard, summary charts, transaction list, and quick actions.
• Tech Stack: HTML5, Tailwind CSS (via CDN).

Drawing App

A direct manipulation digital canvas with realistic tools.

• Key Features: HTML5 Canvas engine, pressure-simulated tools (Pencil, Marker), custom UI controls, and image export.
• Tech Stack: HTML5 Canvas, Touch Events, Tailwind CSS.

Typing Speed Test

A sleek, distraction-free typing test to measure your WPM.

• Key Features: Real-time WPM & accuracy tracking, character-by-character feedback, test history with localStorage, and animated caret.
• Tech Stack: DOM Events, LocalStorage, Tailwind CSS, JetBrains Mono.

Black-Scholes Greeks Calculator

An options pricing calculator implementing the Black-Scholes model.

• Key Features: Calculate option prices (Call/Put), compute all Greeks (Delta, Gamma, Theta, Vega, Rho), analytical vs numerical method comparison, and interactive heatmap visualization.
• Tech Stack: TypeScript/JavaScript, Tailwind CSS, Canvas API.

Pocket Matching Engine

A real-time order matching engine simulation demonstrating Price-Time Priority algorithm.

• Key Features: Buy/Sell limit order entry, live order book display, trade log with partial fills, and demo mode for algorithm visualization.
• Tech Stack: ES6 Classes, Tailwind CSS, Dark mode support.

Spread Controller

An interactive dashboard for the Avellaneda-Stoikov market making model - a "thermostat for money."

• Key Features: Real-time bid/ask price calculation, inventory position slider, risk aversion control, time remaining adjustment, visual skew indicator, and formula explanation.
• Tech Stack: Vanilla JavaScript, Tailwind CSS, Dark mode support.

The Market Firehose

A real-time cryptocurrency ticker dashboard streaming data from Binance WebSocket.

• Key Features: Live streaming of 1000+ trading pairs, Game Loop Pattern for high-frequency DOM updates, price flash animations, connection status indicator with auto-reconnect, and latency display.
• Tech Stack: WebSocket API, DOM Manipulation, CSS Grid, JetBrains Mono.

Order Book Ray Caster

A physics-based visualization of market order slippage and impact - watch your order "walk the book" as it consumes liquidity.

• Key Features: Interactive order configuration, buy/sell order simulation, real-time impact stats (orders hit, volume consumed, slippage), and physics-based brick destruction.
• Tech Stack: Canvas API, Tailwind CSS, ES6 Classes, Dark mode support.

Ray Casting Engine

A retro-style 3D FPS raycaster engine built from scratch with vanilla JavaScript.

• Key Features: Textured walls, sprite rendering, enemy AI, collision detection, minimap/radar, health/armor system, level progression, and fullscreen mode.
• Tech Stack: HTML5 Canvas, ES6 Modules, Vector Math, Game Loop.

---

🎮 Games

Hangman

A modern, vector-based Hangman game with progressive visual feedback.

• Features: Geometric figure build-up, system-style keyboard, circular life indicator, and win/loss animations.

Memory Game

A card matching game to test your memory.

• Features: Move counter, timer, responsive grid layout, and celebratory animations.

Tic-Tac-Toe

The classic paper-and-pencil game for two players.

• Features: Score tracking, win/draw detection, and turn indicators.

---

🛠️ Utilities & Tools

• Calculator: A fully functional calculator with history tracking, keyboard support, and order-of-operations logic.
• Code Editor: A browser-based code editor with syntax highlighting and live preview.
• QR Code Generator: Instantly generate and download QR codes for text or URLs using the QR Server API.
• Location Marker & Places Tracker: Track and save your favorite locations with an interactive map interface.
• Persistent TODO List: Manage tasks with add/delete functionality and LocalStorage persistence.
• Stop Watch: Simple timer with start, stop, and reset controls.
• Color Flipper: Background color generator demonstrating basic DOM manipulation.
• Random Quote Generator: Displays random inspirational quotes.
• Palindrome Checker: Checks whether input text reads the same forwards and backwards.

---

📊 Data Structure & Algorithm Visualizers

Visualizers Collection

A comprehensive collection of 22 interactive data structure and algorithm visualizations.

Linear Structures:

• Stack, Queue, Deque, Linked List, Priority Queue

Trees:

• Binary Search Tree (BST), AVL Tree, Red-Black Tree, B-Tree, Heap, Trie, Segment Tree, Fenwick Tree, Disjoint Set

Algorithms:

• Sorting Algorithms, Graph Traversal (BFS/DFS), Pathfinding (Dijkstra/A*), Backtracking (N-Queens), Dynamic Programming (Knapsack), String Matching (KMP), Recursion Tree, Hash Table

---

💻 Getting Started

1. Clone the repository:

   git clone https://github.com/your-username/Mini-JavaScript-Projects.git

2. Run a Project:

   • For most projects (Calculator, Games, Utilities), simply open the index.html or main.html file in your browser.

   • For WeatherApp & Physics Engine: These projects use ES Modules or Service Workers which require a local server due to browser security restrictions (CORS).

     Using Python:

     cd WeatherApp  # or cd Physics-engine
     python -m http.server 8000

     Using Node.js (http-server):

     npx http-server WeatherApp

     Then open http://localhost:8000 in your browser.

🧰 Technologies Used

• Core: HTML5, CSS3, Vanilla JavaScript (ES6+)
• APIs: Canvas API, Audio API, WebSocket API, LocalStorage, Fetch API
• Advanced: Service Workers (PWA), ES Modules, Custom Vector Math, Raycasting
• External Services: Open-Meteo API, QR Server API, Binance WebSocket

📜 Commit Message Style

For future work in this repo, aim for clear, focused commit messages. A simple pattern that works well:

• Format: type: short imperative description
  • Examples: feat: add stopwatch hours display, docs: improve WeatherApp README, chore: update gitignore
• Guidelines:
  • Keep each commit focused on one logical change.
  • Use present-tense, imperative language ("add", "update", "fix" rather than "added", "updated", "fixed").

📄 License

This project is open source and available under the MIT License.