JAVASCRIPT

Welcome to my JavaScript & MERN Journey! 🚀💻 Notes

Here I document my daily progress as I explore JavaScript (🟨) and gradually move toward building full-stack apps with the MERN stack (🌐). This serves as: 📒 My personal notes & revision 🛠️ A helpful guide for beginners 🔥 A way to stay consistent and creative!

---

🎯 Why?

It’s easy to forget concepts without practice. This repo helps me learn, revisit, and share tips with fellow developers. 🌱

---

🔖 How It Works

✅ Learn a concept each day ✅ Write notes & examples ✅ Commit under a clean structure ✅ Watch knowledge grow day by day 📈

---

📂 Structure

📁 js-mern-learning/
├── Day 01 - Variables & Data Types 📝/
│   └── README.md
├── Day 02 - Functions 🔧/
│   └── README.md
├── Day 03 - Arrays & Objects 📦/
│   └── README.md
├── …
└── README.md ← You are here

Each folder includes: 💡 What I learned 👨‍💻 Code examples 📝 Key points 🚀 Challenges & solutions

---

🌟 Goals

🌟 Master JavaScript fundamentals (🟨) 🌟 Explore MERN (MongoDB 🍃, Express 🚂, React ⚛️, Node 🟩) 🌟 Build cool projects as I progress

---

📚 Topics To Cover

🔷 Variables, Data Types, Operators 🔷 Functions, Scope, Hoisting 🔷 DOM, Events, ES6+ Features 🔷 Async JS: Promises & Fetch API 🔷 MERN stack basics & beyond

---

🤝 Join Me

Feel free to fork this repo, add your notes, or suggest improvements! Let’s grow & code together. 🌐✨

---

👤 About Me

👨‍🎓 Hi! I’m Kush Kumar — a B.Voc Software Development student at Ramanujan College, University of Delhi (DU), currently in my second year. 🎓📚 💻 Passionate about web development, learning JavaScript & MERN stack step-by-step. 📍 My GitHub: kushkumarkashyap7280

If you want to connect, collaborate, or just say hi — feel free to reach out!

---

🚀 Happy Coding & Learning! 🚀

---

📅 Day 1

Day 1 – Variables, Data Types, and Basics →

Quick Access: Day 1 Topics & Code

• JavaScript Variables: Declaration, Assignment, and Scope (Variables.js)
• JavaScript Data Types: Primitive and Non-Primitive (Datatypes.js)
• JavaScript Type Casting (Type Conversion) (Typecasting.js)
• JavaScript Operators (Operators.js)
• Stack vs Heap Memory in JavaScript (Stack_and_Heap.js)
• JavaScript Strings (Strings.js)

Focus:

• Understanding variables and their scope
• Exploring primitive and non-primitive data types
• Type casting and conversion
• Using operators
• Memory concepts: stack vs heap
• String basics and manipulation

---

📅 Day 2

Day 2 – Arrays, Objects, Functions, Numbers, Dates & Math →

Quick Access: Day 2 Topics & Code

• JavaScript Arrays: Creation, Methods, and Static Methods (Arrays.js)
• JavaScript Objects: Types, Methods, and Confusing Points (Objects.js)
• JavaScript Functions: Types, Patterns, and Features (Functions.js)
• JavaScript Numbers & Math: Number Object, Math Methods, Random (Numbers.js)
• JavaScript Dates: Date Object, Methods, Formatting (Dates.js)

Focus:

• Working with arrays and their methods
• Understanding objects and their properties
• Function types, patterns, and features
• Number and Math object usage
• Date object and formatting

---

📅 Day 3

Day 3 – Scope, Hoisting, Control Flow, Loops, Maps, and Array Methods →

Quick Access: Day 3 Topics & Code

• Scope & Hoisting: Concepts and Examples (Scope.js)
• Arrow Functions & 'this': Concepts and Examples (Arrow_function.js)
• Call Stack & Control Flow (Control_flow.js)
• Loops: for, while, do...while, forEach, break, continue (Loops.js)
• Map Class: Usage, Methods, Confusions (Maps.js)
• Object-Specific Loops: forEach, for...of, for...in (Object_specific_loops.js)
• High Order Array Functions: forEach, map, filter, reduce, chaining (Arrays_specific_loops.js)

Focus:

• Scope and hoisting in JavaScript
• Arrow functions and the 'this' keyword
• Call stack and control flow
• Looping constructs and patterns
• Map class and its methods
• Object-specific and high-order array functions

---

📅 Day 4

Day 4 – JavaScript DOM Basics & Selection Methods →

Quick Access: Day 4 Topics & Code

• HOW_DOM_WORKS: DOM Structure & Manipulation (index.htm, script.js)
• Select by ID and Class, QuerySelector, Child Selection (index.html, script.js)
• Create New Element, Parent/Child Navigation (index.htm, script.js)
• Edit and Remove Element (index.htm, script.js)

Focus:

• DOM structure and manipulation
• Selecting elements by ID, class, and CSS selectors
• Navigating parent/child relationships
• Creating, editing, and removing elements dynamically
• Understanding text/HTML properties and best practices

---

📅 Day 5

Day 5 – JavaScript Mini Projects →

Quick Access: Day 5 Projects

• Project 1: Background Color Changer (index.htm, script.js)
• Project 2: BMI Calculator (index.htm, script.js)
• Project 3: Live Date and Time (index.htm, script.js)

Focus:

• Hands-on JavaScript mini projects
• DOM manipulation, user input, and interactivity
• Real-world practice: color changer, BMI calculator, live clock, and more

---

📅 Day 6

Day 6 – Async JavaScript, Events, and Mini Projects →

Quick Access: Day 6 Topics & Projects

• Async JavaScript: Event Loop, Microtasks, Macrotasks, Interview Qs
• Events and Event Listener Demo (script.js)
• Project 1: Timer & Alert Demo (script.js)
• Project 2: Random Background Color Changer (script.js)

Focus:

• Deep dive into async JavaScript: event loop, microtasks, macrotasks
• Practice with event listeners and DOM events
• Mini projects: timer/alert demo, random background color changer

---

📅 Day 7

Day 7 – Promises, fetch, and API Practice →

Quick Access: Day 7 Topics & Projects

• Promises in JavaScript (Promise.js)
• How API Works Demo (script.js, style.css)

Focus:

• Understanding the fetch API and its microtask priority
• Deep dive into Promises and async workflows
• Practicing API requests and DOM updates

---

📅 Day 8

Day 8 – OOP, Prototypes, this, Property Descriptors, Getters/Setters, Closures →

Quick Access: Day 8 Topics & Projects

• OOPs.js: Manual objects, function constructors, ES6 classes, OOP pillars
• Prototye_in_js.js: Prototypes, prototype chain, method sharing, inheritance
• Class_and_objects.js: Four OOP pillars, static methods, access modifiers
• call_and_this.js: The call() method, controlling this, method borrowing
• bind.htm: The bind() method, event handler context, browser example
• Maths_pi.js: Property descriptors, immutability, Object.defineProperty
• getter_setter.js: Getters and setters in objects and classes, validation
• closures.htm: Lexical scoping, closures, data privacy, common pitfalls

Focus:

• Object-Oriented Programming (OOP) in JavaScript
• Prototypes and prototype chain
• The this keyword, call() and bind()
• Property descriptors and immutability
• Getters and setters for encapsulation and validation
• Lexical scoping and closures for data privacy and advanced patterns

---

---

🚀 On to the next phase: React, Node.js, and Full-Stack Development!

🎉 Core JavaScript Journey Completed! 🎉

After a dedicated journey through all the fundamentals and advanced concepts of JavaScript, I’ve completed the core JavaScript section of my learning path. This includes:

• Variables, data types, operators, and memory concepts
• Functions, scope, hoisting, and closures
• Arrays, objects, maps, and high-order functions
• DOM manipulation and events
• Asynchronous JavaScript: callbacks, promises, fetch, and the event loop
• Object-Oriented Programming (OOP), prototypes, this, property descriptors
• Getters/setters, lexical scoping, and closures

What’s Next?

Now that I have a strong foundation in JavaScript, the next steps are:

1. BUILD PROJECTS
   • Build beautiful, responsive web pages
   • Learn modern CSS (Flexbox, Grid, animations)
2. Deepen JavaScript with ES6+ and browser APIs
   • Explore modules, async/await, and advanced patterns
3. Move to Frontend Frameworks
   • Start with React (⚛️) for building dynamic UIs
4. Learn Backend Development
   • Node.js and Express for server-side logic
   • MongoDB for databases
5. Full MERN Stack Projects
   • Combine everything to build real-world, full-stack applications

This repo will continue to grow as I document my progress through HTML, CSS, React, Node, and beyond!

---