100-days-of-code-js

My 100 days of code journey in JavaScript.

🚀 Goals

• Practice JavaScript daily for 100 days
• Build a strong foundation in core concepts
• Document progress and key learnings

📚 Resources

• Chai aur Code - JavaScript in 1 shot in Hindi | part 1
• Chai aur Code - JavaScript in 1 shot in Hindi | part 2
• Namaste 🙏 JavaScript by Akshay Saini
• MDN Web Docs - JavaScript
• JavaScript.info
• freeCodeCamp JavaScript

📅 100 Days Progress Tracker

Day	Topic / Lesson	Status
1	Variables, Data types and their conversions and operations	✅ Done
2	Comparison of data types and Type Coercion, Stack and Heap Memory	✅ Done
3	Strings and their methods	✅ Done
4	String Methods: .length, .charAt(), .indexOf(), .lastIndexOf(), .charCodeAt(), .search(), .match(), .includes(), .startsWith(), .endsWith()	✅ Done
5	Practiced tricky questions on getting string information methods	✅ Done
6	String Methods: .toUpperCase(), .toLowerCase(), .trim(), .trimStart() / .trimEnd(), .padStart(), .padEnd(), .repeat()	✅ Done
7	Practiced questions on modifying string and learned .replace(), .replaceAll(), .slice(), .substring(), .split() these methods	✅ Done
8	Learned about Numbers and their methods. and practiced questions on them	✅ Done
9	Learned about Math methods and practiced questions on them	✅ Done
10	Learned about Dates and Time	✅ Done
11	Practiced working with Dates and Times	✅ Done
12	Learn about arrays and their few methods, diff between slice and splice	✅ Done
13	Arrays Part 2: explored .push() vs .concat(), spread operator, .flat(), .isArray(), .from(), .of()	✅ Done
14	Recap of Day 12 and 13	✅ Done
15	Array basics & beginner methods practice	✅ Done
16	More array methods practice	✅ Done
17	Deep dive into Objects in JavaScript	✅ Done
18	Learnd about nesting, mearging and acessing properties of object	✅ Done
19	Object Destructuring & JSON API overview	✅ Done
20	Functions and Parameters	✅ Done
21	Function with objects and arrays	✅ Done
22	Global and Local scope	✅ Done
23	Scope level and mini hoisting	✅ Done
24	Arrow function and This keyword	✅ Done
25	Practiced 'this' keyword with all scenarios	✅ Done
26	IIFE (Immediately Invoked Function Expression)	✅ Done
27	Execution Context and Call Stack	✅ Done
28	Learned control flow (if, else if, else, and switch statements)	✅ Done
29	Explored truthy and falsy values	✅ Done
30	Difference between Nullish Coalescing Operator (??) and Ternary Operator (?:)	✅ Done
31	Learned for loop, nested for loop	✅ Done
32	Explored break & continue keyword and while, do-while loop	✅ Done
33	Explored for-in and for-of loop	✅ Done
34	Explored forEach loop	✅ Done
35	Practiced some high-order loops	✅ Done
36	filter method in detail, filter vs forEach	✅ Done
37	map() and reduce() methods	✅ Done
38	Learned object destructuring, default values & reference behavior in JS	✅ Done
39	Arrow Function and 'this' keyword behavior + Execution Context and Call Stack Demo	✅ Done
40	Re-explored classic loops, tested nested for-loops, table generation, and user-input validation using do-while	✅ Done
41	Explored callback patterns, returning functions, and difference between .forEach() & .map(). Clearer picture of JS function magic	✅ Done
42	High order array methods - .find(), .findindex(), re-explored - .filter() and .reduce()	✅ Done
43	DOM Basics and Structure Explained	✅ Done
44	Practiced basic DOM manipulation using an external JavaScript file	✅ Done
45	DOM Selectors and Element Manipulation, Nodelist and HTML collection	✅ Done
46	DOM Traversing & Creating Elements Dynamically	✅ Done
47	DOM Append, Edit & Remove Elements	✅ Done
48	DOM color changer practice project	✅ Done
49	DOM BMI Calculator practice project	✅ Done
50	DOM DigitalClock practice project	✅ Done
51	DOM Number guessing game practice project	✅ Done
52	DOM Event KeyCodes & Random background color changer every second practice project	✅ Done
53	Basic events	✅ Done
54	built color box	✅ Done

Repo Folder Structure

📁 100-days-of-code-js

├── 📂 Day01
│   ├── 📄 01_variables.js
│   ├── 📄 02_datatypes.js
│   ├── 📄 03_conversion.js
│   ├── 📄 04_operations.js
│   └── 📝 notes.md
│
├── 📂 Day02
│   ├── 📄 01_comparison.js
│   ├── 📄 02_datatype-summary.js
│   ├── 📄 03_memory.js
│   ├── 📝 notes.md
│   └── 🖼️ Stack-vs-Heap-diagram.svg
│
├── 📂 Day03
│   └── 📄 String.js
│
├── 📂 Day04-07_String_Methods
│   ├── 📄 01_Get-Info-from-Strings.js
│   ├── 📄 02_Practice.js
│   ├── 📄 03_Tricky-question.js
│   ├── 📄 04_Modifying_Strings.js
│   ├── 📝 note.md
│   └── 📝 String-method-cheetsheet.md
│
├── 📂 Day08 - 09_Nums_and_Math
│   ├── 📄 01_Numbers.js
│   ├── 📄 02_Maths.js
│   ├── 📝 Math_CheatSheet.md
│   └── 📄 Practice.js
│
├── 📂 Day10-11-Dates_and_Time
│   ├── 📄 Dates.js
│   └── 📄 Practice.js
│
├── 📂 Day12-16-Arrays
│   ├── 📄 01_Arrays.js
│   ├── 📄 02_More_on_Arrays.js
│   ├── 📄 03_Day12-13_recap.js
│   └── 📄 Practice.js
│
├── 📂 Day17-19_Objects
│   ├── 📄 01_Objects.js
│   ├── 📄 02_Objects2.js
│   └── 📄 03_Objects3.js
│
├── 📂 Day20_Functions_and_Parameters
│   └── 📄 01_Functions.js
│
├── 📂 Day21_Functions_with_Objects
│   └── 📄 01_FnWithObj.js
│
├── 📂 Day22-23_Global_and_Local_scope
│   ├── 📄 01_Scope.js
│   └── 📄 02_ScopInFunction.js
│
├── 📂 Day24-25_Arrow_function_and_This_keyword
│   ├── 📄 01_Arrow.js
│   └── 📄 Practice.js
|
├── 📂 Day26-IIFE
│   └── 📄 01_IIFE.js
│
├── 📂 Day27-Execution_and_Callstack
│   └── 📄 callStack.js
│
├── 📂 Day28-30_Control_Flow
│   ├── 📄 01_If_else.js
│   ├── 📄 02_Switch.js
│   └── 📄 03.Truthy_Falsy.js
│
├── 📂 Day31-32_Control_Flow
│   ├── 📄 01_For_loop.js
│   ├── 📄 02_break_continue.js
│   └── 📄 03_while_do_while.js
│
├── 📂 Day33-35_High_Order_loops
│   ├── 📄 01_for-of.js
│   ├── 📄 02_for-in.js
│   ├── 📄 03_for-each.js
│   └── 📄 04_Practice.js
│
├── 📂 Day36-38_filter_map_and_reduce
│   ├── 📄 01_filter.js
│   ├── 📄 02_map.js
│   └── 📄 03_reduce.js
|
├── 📂 Events
│   ├── 📄 basic.html
│   ├── 📄 event-fun.html
│   └── 📄 one.html
|
├── 📂 js-lab
│   ├── 📄 Day38_Code.js
|   ├── 📄 Day39_Code.js
|   ├── 📄 Day40_Code.js
│   ├── 📄 Day41_Code.js
│   └── 📄 Day42_Code.js
│
├── 📂 Day43-45_Dom
|   ├── 📄 domIntro.html
|   ├── 📄 script1.js
|   ├── 📄 selectors.js
|   ├── 📄 selectors2.js
│   └── 📄 structure.html
│
├── 📂 Day46_DOM-Traversing_and_Creating_Elements
│   ├── 📄 dom-traversing.html
│   └── 📄 nodeList.html
|
├── 📂 Day47_DOM_part3
│   └── 📄 edit-remove.html
|
├── 📂 js-practice-projects
│   ├── 📂 1.colorChanger
│   |   ├── 📄 colorChanger.js
│   |   ├── 📄 index.html
│   |   └── 📄 style.js
|   |
│   ├── 📂 2-BMICalculator
│   |   ├── 📄 bmiCal.js
│   |   ├── 📄 index.html
│   |   └── 📄 style.js
|   |
│   ├── 📂 3-DigitalClock
│   |   ├── 📄 bmiCal.js
│   |   └── 📄 index.html    
|   |
│   ├── 📂 4-GuessTheNumber
│   |   ├── 📄 GuessTheNumber.js
│   |   ├── 📄 index.html
│   |   └── 📄 style.css    
|   |  
│   ├── 📂 5-keyboard
│   |   ├── 📄 index.html    
│   |   └── 📄 key-codes.js
|   |  
│   ├── 📂 6-unlimitedColors
│   |   ├── 📄 bgcolor-chnager.jsl    
│   |   └── 📄 index.html
|   ├──
|
├── ⚙️ .gitattributes
├── 📜 LICENSE
└── 📝 README.md