GeezerVison

A structured, hands-on JavaScript journey from fundamentals to modern JavaScript, DOM manipulation, browser APIs, OOP, asynchronous programming, API integration, LocalStorage and practical projects.

📊 Quick Stats

📚 Learning Stages	🚀 Showcase Projects	🧩 OOP Concepts	🔌 External APIs
60	13	7	4

🧭 Navigation

About • Roadmap • Topics • OOP • DOM & Browser • Async • APIs & Libraries • Projects • Journey • Skills • Structure • Run • Future • Author

🧭 About This Repository

This repository documents a progressive, hands-on JavaScript learning journey — 60 numbered stages moving from core fundamentals through modern JavaScript, DOM manipulation and events, browser-side JavaScript, object-oriented programming, asynchronous programming, and third-party API integration, capped off with 13 practical mini-projects built along the way.

Useful for:

📖 Revision — every concept is organized and linkable by stage or topic
🎯 Interview prep — OOP, async, and DOM fundamentals laid out clearly
🧪 Reference — real, runnable examples instead of snippets

🗺️ Learning Roadmap

🧱 Fundamentals (Stages 1–19)
        ↓
🧩 Object-Oriented JavaScript (Stage 20 — dedicated deep-dive)
        ↓
🌐 DOM, Events & Browser-side JavaScript (Stages 21–52)
        ↓
🔌 API-Integrated Projects (Stages 53–60)
        ↓
🚀 Standalone Practical Projects

Level	Focus	Status
🧱 Level 1	Fundamentals (Stages 1–19)	✅
🧩 Level 2	Object-Oriented JavaScript (Stage 20)	✅
🌐 Level 3	DOM, Events & Browser JS (Stages 21–52)	✅
🔌 Level 4	API-Integrated Projects (Stages 53–60)	✅
🚀 Level 5	Standalone Practical Projects	✅

📚 Topics Covered

Icon	Category	Topics
🧱	Fundamentals	Variables, Data Types, Operators, Conditionals
🔁	Control Flow	Loops, Conditionals
⚙️	Functions	Functions, Scope, Callbacks
📦	Data Structures	Arrays, Objects, Strings
🌐	DOM & Events	Selection, Manipulation, Event Handling
🧩	OOP	Constructors, Classes, Inheritance, Polymorphism, Encapsulation, Abstraction, Static Methods
⏳	Async JS	Promises, Async/Await, `fetch()`
🔌	APIs	REST calls, JSON, third-party API integration
💾	Storage	LocalStorage
🎨	UI Libraries	Bootstrap, Bootstrap Icons, Font Awesome
🗺️	Mapping	Leaflet.js

🧩 Object-Oriented JavaScript

All OOP concepts live in their own dedicated folder: 20th day Folder/more OOPS in js/

#	Concept	Folder	Status
01	🏗️ Constructor Functions	Open	✅
02	📦 Classes	Open	✅
03	🧬 Inheritance	Open	✅
04	🔄 Polymorphism	Open	✅
05	🔒 Encapsulation	Open	✅
06	🎭 Abstraction	Open	✅
07	⚡ Static Methods	Open	✅

🌐 DOM & Browser APIs

Browser-side JavaScript runs through most of the 60 stages and every standalone project:

🖱️ DOM manipulation & events — element selection, dynamic updates, event listeners
📝 Forms & input handling — validation and live input events (ID card generator, calculator, todo apps)
🔐 Input UX — password visibility toggling
💾 LocalStorage — persisting todos and calculator history/settings across sessions
🗺️ Leaflet.js — full-screen interactive maps
🎨 UI toolkits — Bootstrap and Font Awesome for interface styling in select projects

⏳ Async JavaScript

Promises & async / await
fetch() for all HTTP requests
Dynamic, API-driven UI updates (live weather data, random jokes)
Error handling with try/catch around network calls

🔌 APIs & External Libraries

Service	Used In	Purpose
🗺️ Leaflet.js 1.9.4	`53_JS-LeafletJS-FullScreenMap`	Full-screen interactive map
🌦️ OpenWeatherMap API	`54_JS-weatherApp`, `55_JS-weatherAppWithLocation`	Live weather by city name
😂 Sv443's JokeAPI v2	`57_JS-JokeApp`	Random joke fetching
🔳 QuickChart QR API	`Qr Genrater`, `Qr Genrater 2`	QR generation for an ID card and a UPI payment link
🎨 Bootstrap 5.3 + Bootstrap Icons	`55_JS-weatherAppWithLocation`	UI components & iconography
🎨 Font Awesome	Select stage folders	Iconography

🚀 Project Showcase

🚀 Project	🧠 Concepts	🔗 Source
🐍 Snake Game	DOM rendering, game loop (`requestAnimationFrame`), audio	Open
🪪 Student ID Card Generator	DOM, forms, QuickChart QR API	Open
🧾 UPI Payment QR Generator	DOM, QuickChart QR API	Open
💡 Light On/Off Toggle	DOM, Events	Open
🧮 Quantum Calculator Pro	DOM, LocalStorage, history & settings	Open
🗺️ Leaflet Fullscreen Map	Leaflet.js, Maps	Open
🌦️ Weather App	Fetch, OpenWeatherMap API	Open
🌦️ Weather App (Bootstrap UI)	Fetch, OpenWeatherMap API, Bootstrap	Open
🔐 Password Show/Hide	DOM, Events	Open
😂 Joke App	Fetch, JokeAPI, Async/Await	Open
✅ Todo App	Arrays, DOM	Open
💾 Todo + LocalStorage	LocalStorage, DOM	Open
💾 Todo + LocalStorage v2	LocalStorage, DOM	Open

📅 60-Stage JavaScript Journey

Stage	Focus
🟢 Stages 1–19	Core fundamentals — variables, operators, conditionals, loops, functions, arrays & objects (DOM introduced gradually)
🔵 Stage 20	Object-Oriented JavaScript — dedicated deep-dive (7 concepts)
🟣 Stages 21–52	Continued practice with deepening DOM, events & browser-side JavaScript
🚀 Stages 53–60	Practical, API-integrated projects (maps, weather, jokes, todos)

🛠️ Skills Covered

Core

JavaScript Fundamentals
Variables & Data Types
Operators
Conditionals
Loops
Functions
Arrays
Objects

Browser

DOM Manipulation
Event Handling
LocalStorage
Leaflet.js (Maps)

OOP

Constructor Functions
Classes
Inheritance
Polymorphism
Encapsulation
Abstraction
Static Methods

Practical

REST API Integration (OpenWeatherMap, JokeAPI, QuickChart)
JSON Handling
Fetch API + Async/Await
Interactive UI Projects
UI Libraries (Bootstrap, Font Awesome)

📁 Repository Structure

JavaScript-Core-to-Advanced/
│
├── 📚 Stage 01 → Stage 52/          (day-by-day fundamentals → DOM/browser JS)
│   └── 🧩 20th day Folder/
│       └── more OOPS in js/          (7 OOP concept folders)
│
├── 🗺️ 53_JS-LeafletJS-FullScreenMap/
├── 🌦️ 54_JS-weatherApp/
├── 🌦️ 55_JS-weatherAppWithLocation/
├── 🔐 56_JS-PasswordInputShowHide/
├── 😂 57_JS-JokeApp/
├── ✅ 58_JS-TodoAppWithArray/
├── 💾 59_JS-TodoAppWithLocalStorage/
├── 💾 60_JS-TodoAppWithLocalStorage2/
│
├── 🪪 Qr Genrater/
├── 🧾 Qr Genrater 2/
├── 💡 Light on off/
├── 🧮 BI-calculator/
├── 🐍 Snake Game 🎮/
│
└── 📖 README.md

Representational structure — actual folder names and spacing are preserved as-is in the repository.

▶️ How to Run

Option 1 — Open Directly Open any project's index.html directly in a browser.

Option 2 — VS Code Live Server Use the Live Server extension for auto-reload.

Option 3 — Local Server

python3 -m http.server 8000

Then visit http://localhost:8000

⚠️ The weather and joke projects call external APIs directly from the browser, so those need an internet connection to work.

🧠 Learning Philosophy

Learn → Build → Break → Debug → Rebuild → Repeat.

This repository is intentionally hands-on. The goal isn't only to read about JavaScript concepts, but to Understand → Implement → Debug → Build.

🔮 What's Next?

🟡 Advanced JavaScript

Event Loop
Execution Context
Prototype Chain
Deep Closures
Advanced Promises
Generators & Iterators
Proxy / Reflect
Memory Management & Performance

🟠 Professional JavaScript

npm & Tooling
ESLint / Prettier
Testing (Jest / Vitest)
Accessibility
Web Performance
JavaScript Security

🔵 Ecosystem

TypeScript
React
Next.js
Node.js / Express.js

👨‍💻 Author

Ajit Kumar GitHub: @ajitdev01

📜 License

No license has currently been specified for this repository.

GeezerVison

Latest commit

History

Folders and files

Repository files navigation