Day 57/100 — The JavaScript Event Loop finally made sense 🔄 For a long time I used setTimeout, Promise, and async/await… but honestly — I never truly understood why JavaScript behaves the way it does. Today I learned about the Event Loop — and everything clicked. JavaScript is single-threaded. So how does it still handle multiple tasks at once? Because of 3 things working together: 🧠 Call Stack – where code runs step by step 📬 Web APIs – timers, DOM events, fetch requests handled outside JS 📋 Callback Queue / Microtask Queue – waiting tasks And the Event Loop keeps checking: “Is the call stack empty? If yes → push the next task.” The biggest surprise for me: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output is NOT what beginners expect: Start End Promise Timeout Because microtasks (Promises) run before macrotasks (setTimeout) 💡 Realization: JavaScript is not slow… I just didn’t understand its scheduling system. Now async code feels predictable instead of magical. Learning fundamentals is like turning chaos into logic. #100DaysOfCode #JavaScript #EventLoop #AsyncJS #WebDevelopment #LearningInPublic

Day 3/30 JavaScript Challenge: Giving the Browser a Voice! 🗣️ I just finished Day 3 of my 30-day JavaScript series, and today was all about the Web Speech API. I built a Text-to-Voice application that turns any typed input into spoken words instantly! It’s amazing how much functionality is built right into the browser without needing any external libraries or APIs. Key Learnings Today: => Using SpeechSynthesisUtterance to handle voice properties. => Manipulating the DOM to capture user input. => Creating a clean, responsive UI with CSS gradients and transitions. Live Demo: https://lnkd.in/decEYAvw Onward to Day 4! ⚡ #JavaScript #WebDevelopment #CodingChallenge #100DaysOfCode #Frontend #LearningToCode

🚀 Day 5/30 – Tip Calculator Continuing my 30 Days JavaScript Projects Challenge. Today I built a Tip Calculator using HTML, CSS, and JavaScript. This project calculates the tip amount, total bill, and how much each person needs to pay when splitting the bill. 💡 Features: • Calculate tip instantly • Split bill among multiple people • Simple and clean UI 🛠 Tech Stack HTML | CSS | JavaScript 🌐 Live Demo https://lnkd.in/gFUy8h3t 💻 GitHub Repository https://lnkd.in/gZRUXmyr Through this project I practiced DOM manipulation, user input handling, and JavaScript calculations. 25 more projects to go 🚀 #javascript #webdevelopment #codingjourney #30daysofcode #mernstack #github

JAVASCRIPT NOTES — PART 2 (Arrays • Objects • DOM) Foundations build clarity. Practice builds confidence. This post focuses on the parts of JavaScript that actually make web pages interactive: • Arrays and important methods (map, filter, reduce) • Objects and destructuring • DOM manipulation • Events and event propagation • this keyword & event delegation Understanding these concepts properly is where JavaScript starts feeling practical. Before async, before frameworks — this layer must be clear. 📌 Save this if you're strengthening your JS fundamentals. #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #InterviewPrep #StudentDeveloper #Consistency

After learning the basics of JavaScript, I wanted to challenge myself by building something real and that’s how JS News was created. 📰 JS News is a dynamic news web application built using HTML, Tailwind CSS, and Vanilla JavaScript, powered by the News API. Features: • Fetches real-time news articles using API calls • Dynamic search functionality by topic • Card based layout • Displays source name & localized publish date • Opens full articles in a new tab 💡 What I Practiced & Learned: • Working with APIs using Fetch & Async/Await • Handling JSON data • DOM manipulation & template cloning • Understanding DocumentFragment • Event handling and closures • Building responsive UI with Flexbox/Grid This project helped me move from just understanding concepts to actually applying them in a real-world scenario. I’d love to hear your feedback! 🙌 #JavaScript #WebDevelopment #FrontendDevelopment #APIs #TailwindCSS #LearningJourney

Why JavaScript doesn't crash when you call a function before defining it. 🧠 I recently dove deep into the "Execution Context" of JavaScript, and the concept of Hoisting finally clicked. If you’ve ever wondered why this code works: greet(); function greet() { console.log("Hello LinkedIn!"); } ...the answer lies in how the JS Engine treats your code before it even runs a single line. The Two-Phase Secret: Memory Creation Phase: Before the "Thread of Execution" starts, JavaScript scans your code and allocates memory for variables and functions. Functions are stored in their entirety in the Variable Environment. Variables (var) are stored as undefined. Code Execution Phase: Now, the engine runs the code line-by-line. Because the function is already sitting in the memory component, calling it on line 1 is no problem! The Key Takeaway: Hoisting isn't "moving code to the top" (that’s a common myth). It’s actually the result of the Memory Creation Phase setting aside space for your declarations before execution starts. Understanding the "how" behind the "what" makes debugging so much easier. #JavaScript #WebDevelopment #CodingTips #Hoisting #ProgrammingConcepts

Over the last two days, I’ve been strengthening my JavaScript fundamentals and exploring how things actually work behind the scenes. Here’s what I learned: ✅ Array Methods ✅ reduce() method ✅ Finding maximum in an array ✅ Spread operator (...) ✅ Rest operator ✅ Destructuring (Arrays & Objects) ✅ Introduction to DOM ✅ Query Selectors ✅ Manipulating Attributes ✅ classList property ✅ Page Navigation using JavaScript Understanding how JavaScript interacts with the DOM really changed the way I look at web pages. It’s amazing how dynamic websites are built just by manipulating elements in the browser. Step by step, getting closer to becoming a better developer 💻 #JavaScript #WebDevelopment #FrontendDeveloper #LearningJourney #100DaysOfCode #DOM

Day 4 – Going Deep into JavaScript Foundations Most people rush to frameworks. Today, I went deeper into the core of JavaScript. Not just watching lectures — but actually testing everything in the browser console. 📌 What I practiced today: Linking JS with HTML Script tag placement Understanding defer How browser loads JS Variables (var, let, const) Scope differences Reassignment & redeclaration Why const should be default Expressions vs Statements Why 5 + 10 gives value instantly Why let x = 10; doesn’t Data Types & Special Values Infinity NaN undefined null Symbol typeof behavior Primitive vs Reference (Mind-Blowing Part 🧠) Copy by value Copy by reference Memory visualization with objects Realization today: JavaScript isn’t confusing. We just skip understanding how it actually works. Strong fundamentals = fewer bugs + better logic. This is Day 4 of rebuilding my foundation from scratch. Consistency over hype 🔥 #JavaScript #FrontendDeveloper #BuildInPublic #DeveloperJourney #SheriyansCodingSchool #WebDevelopment

🚀 Starting From Basics Again Before jumping into frameworks like React, I decided to strengthen my core , So I started revising HTML, CSS & JavaScript from scratch. Today, I built a simple Snake Game using pure HTML, CSS, and JavaScript , no libraries, no frameworks. While building this, I focused on: Proper HTML structure Clean and reusable CSS DOM manipulation Game logic implementation High score storage using localStorage What I learned from this: ✔ Fundamentals matter more than frameworks ✔ Logic building is more important than styling ✔ Clean and structured code makes debugging easier ✔ JavaScript feels powerful when you truly understand the DOM Deployed it using GitHub Pages 🔗 Live Demo: https://lnkd.in/dgCyVb4r 💻 GitHub Repository: https://lnkd.in/d3AtuqtF This is just the beginning. Next Moving towards React ⚛️ #WebDevelopment #JavaScript #HTML #CSS #React #LearningInPublic

🗓️ Day 61/100 – Understanding the JavaScript Scope Chain Today I finally understood why sometimes variables work… and sometimes they suddenly don’t. The answer = Scope Chain At first I thought JavaScript just “searches everywhere” for a variable. But no — it actually follows a very specific path. JavaScript looks for variables in this order: 1️⃣ Current function scope 2️⃣ Parent function scope 3️⃣ Global scope It climbs upward step-by-step until it finds the variable. This is called the scope chain. --- Example idea: A function inside a function inside a function… The inner function can access outer variables But the outer function cannot access inner variables So access flows inside → outside Never outside → inside --- Big realization today 💡 Most bugs I faced earlier were not logic mistakes… They were scope mistakes. If you understand scope chain: • Closures make sense • Hoisting becomes clearer • Debugging becomes easier JavaScript stops feeling random — It starts feeling predictable. Slowly the language is revealing its rules, not magic. #100DaysOfCode #JavaScript #Scope #WebDevelopment #Frontend #LearningInPublic