JavaScript Mastery — Masterji Challenges

This is a beginner-friendly, hands-on JavaScript learning repository that walks you through foundational JavaScript concepts and progresses to advanced topics, projects, and patterns.

This repository is organized as a day-by-day collection of short exercises, examples, and mini-projects to solidify your understanding of JavaScript — from core basics to advanced OOP, functional patterns, and DOM/Event handling.

---

Table of Contents

• Quick Start
• Learning Roadmap
• Repository Structure (folder-by-folder guide)
• How to run files
• Examples & Tips

---

Quick Start ✅

Prerequisites:

• Node.js (to run .js scripts in the terminal)
• A modern browser for .html files and front-end experimentation
• Optionally: Live Server extension in VSCode for easier HTML previews

Run JS files in a folder using Node:

cd "C:/Users/hp/Desktop/coding/Masterji-Challenges/JavaScript Challenge/01_basic/Day-1"
node test.js

Open HTML files in a browser or use a development server for experiments:

# Open the file with default browser on Windows (PowerShell)
start "" "C:/path/to/your/file.html"

---

Learning Roadmap (Beginner → Advanced) 🔀

This repository is arranged carefully to take you from the very basics of JavaScript to more advanced topics:

1. Beginner - Fundamentals: variables, data types, basic operators, and simple I/O
2. Basic Data Structures - arrays and objects
3. Functions & Scope - function declarations, expressions, closures, IIFE, call, apply, bind
4. Control Flow & Iteration - conditional statements, loops, and iteration patterns
5. DOM Manipulation - selecting elements, updating UI, handling attributes
6. Events - event listeners, event delegation, common interactions
7. Projects - small practice web projects to unite skills learned
8. OOP (Classes & Prototypes) - classes, prototypes, inheritance, and encapsulation
9. Advanced Topics - promises, fetch, async/await, and features that support modern web development

---

Repository Structure 📁

This repo is organized into numbered folders where each Day contains focused examples and exercises. The organization mirrors a progressive learning path:

• 01_basic/ — Day-1 to Day-12: Introduction, basic data types, string & number operations, date
• 02_basic/ — Day-13 to Day-17: Arrays, objects, and building blocks
• 03_basic/ — Day-18 to Day-24: Functions, scope, this/that, IIFE, call/apply
• 04_controlFlow/ — Day-25: If/else, switch, truthiness checks
• 05_iterations/ — Day-26 to Day-29: Looping constructs (for, while) and iteration patterns
• 06_dom/ — Day-30 to Day-33: DOM basics — selection, manipulation, and templates
• 07_projects/ — Day-34: Small front-end projects and practice pages
• DOM_projects/ — Collection of small standalone DOM-focused projects. Open DOM_projects/index.html to browse all projects.
• 08_events/ — Day-35: Event handling and UI interactions
• 09_advance/ — Day-38 to Day-40: Fetch, promises, async patterns
• 10_class_oops/ — Day-41 to Day-47: Classes, prototypes, inheritance, static properties, getters/setters
• 11_advance/ — Day-49 to Day-50: Advanced topics, closures, and project tests

Files mapping to examples are found inside each Day-* folder.

---

How to run files and experiments

Basic instructions:

• To run a file with Node.js: node fileName.js (e.g., node test.js)
• To view HTML files, you can simply open them in a browser or use a local server like Live Server
• For quick HTML previews from VSCode, run Live Server (right-click → Open with Live Server)

---

DOM Projects — Interactive Mini Portfolio 🎛️

Inside the DOM_projects/ folder you'll find several small, browser-based projects focused on DOM manipulation and UI interactions. Each project usually has an index.html and supporting JS/CSS files. Open DOM_projects/index.html or each project's index.html directly with a modern browser or Live Server.

Projects included:

• 1-colorChanger/ — Color Changer 🔥
• 2-BMICalculator/ — BMI Calculator ☕️
• 3-DigitalClock/ — Digital clock 😎
• 4-GuessTheNumber/ — Guess the Number 🤨
• 5-keyboard/ — Keyboard input demo 👻
• 6-unlimitedColors/ — Unlimited color generator 🧠
• 7-scroll/ — Scroll effects (NextJS-style) 👀
• 8-typer/ — Typing effect / typer library 📚
• 9-mouseCircle/ — Mouse circle animation 🎯
• 10-emoji/ — Emoji picker/demo 🫥
• 11-textEditor/ — Tiny text editor ✍️
• 12-randomImage/ — Random Image fetcher 🌠
• 13-jokes/ — Jokes app 😂
• 14-cats/ — Cat images demo 🐈
• 15-crudDom/ — DOM CRUD examples 📌
• 16-debounce/ — Debouncing sample 🏀

To preview the full project list quickly, open DOM_projects/index.html in your browser or start Live Server in the folder.

Tips for development:

• Keep Node running in the console for backend-style tests
• Use console.log to inspect values while learning
• Use breakpoints in browser dev tools when working with event-driven or DOM code

---

Examples & Notes 💡

• Each Day-* folder is designed to cover one topic or concept. Files include small code snippets and practice tasks.
• Many .html pages in 06_dom or 07_projects demonstrate UI interactions — open in browser and test user interactions.
• The 09_advance folder contains promise/async examples; run them with Node or open the .html in a browser to view fetch examples.

---

Learning Checklist ✅

Work through the days and mark your progress:

• Basics: Day 1–12
• Arrays & Objects: Day 13–17
• Functions & Scope: Day 18–24
• Control Flow: Day 25
• Iterations: Day 26–29
• DOM: Day 30–33
• Projects & UI: Day 34
• Events: Day 35
• Advanced: Day 38–40
• OOP & Classes: Day 41–47
• Final Advanced: Day 49–50

---

Useful Resources 📚

• MDN Web Docs — JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
• JavaScript Info — https://javascript.info
• Node.js — https://nodejs.org
• ChaiCode: JavaScript curriculum — https://youtube.com/playlist?list=PLu71SKxNbfoBuX3f4EOACle2y-tRC5Q37&si=1iWbo1raNMFUOhKA

---

Happy learning & coding! 🎯