Learning Journal Built with JavaScript

Day 1 🧠 Understanding Lexical Scoping in JavaScript (in 2 minutes) One concept that quietly powers a lot of JavaScript behavior is lexical scoping. 👉 Simply put: A function remembers where it was written, not where it is called. 🔍 Example: let name = "Global"; function print() { console.log(name); } function test() { let name = "Local"; print(); } test(); // Output: Global 💡 Even though print() is called inside test(), it still logs "Global". Why? Because print() was defined in the global scope, so it uses that scope. 🧠 Key Takeaways: Scope is determined at write time (lexical), not run time. JavaScript looks for variables in the scope chain upward. This is the foundation of closures. 🚀 Why this matters: Understanding lexical scoping helps you: ✔ Write predictable code ✔ Debug faster ✔ Master closures, callbacks, and async logic ✔ Work better with React hooks 🔥 One-line takeaway: 👉 "Where you write your function decides what it can access." If you're learning JavaScript fundamentals, don’t skip this — it shows up everywhere. #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

PEP TASK-6 🚀 Just built a Countdown Timer using JavaScript This project focuses purely on the power of JavaScript to handle real-time updates and dynamic behavior. 🔹 What I implemented: • Real-time countdown logic using JavaScript • Time calculations (days, hours, minutes, seconds) • Automatic UI updates using DOM manipulation • Efficient interval handling with setInterval() Through this project, I explored how JavaScript can be used to build interactive, time-based features without relying on external libraries. 💻 Check it out here: 👉 https://lnkd.in/ghEA3jH8 Feedback and suggestions are welcome! 🙌 #JavaScript #WebDevelopment #Frontend #Coding #StudentDeveloper #Projects

Most developers use JavaScript every day… But very few truly understand how it actually executes code behind the scenes. That’s where the Event Loop comes in — the heart of JavaScript’s asynchronous behavior. At a high level: JavaScript is single-threaded. But it behaves like it can handle multiple things at once. How? Because of this powerful architecture 👇 • Call Stack → Executes synchronous code line by line • Microtask Queue → Handles Promises, async/await (high priority) • Macrotask Queue → Handles setTimeout, setInterval, I/O operations • Event Loop → Constantly checks and decides what runs next Here’s the game-changing concept: 👉 Microtasks ALWAYS run before Macrotasks That’s why: Promise resolves → runs immediately after current execution setTimeout → waits even if delay is 0 This small detail is the reason behind: • Unexpected output order • Async bugs • Performance differences • UI responsiveness If you’ve ever wondered: “Why is my code running in a different order than I expected?” The answer is almost always → Event Loop behavior Understanding this doesn’t just make you a better developer — It changes how you think about writing code. You stop guessing. You start predicting. And that’s where real engineering begins. 🚀 #JavaScript #EventLoop #AsyncJavaScript #WebDevelopment #FullStackDevelopment #Programming #SoftwareEngineering #TechDeepDive #CodingJourney JavaScript Mastery w3schools.com

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day58 Project: Live Code Editor What I built Today I built a Live Code Editor where you can write HTML, CSS, and JavaScript and instantly see the output — similar to a mini CodePen. Technologies Used HTML5 CSS3 JavaScript (DOM Manipulation, iframe, eval) Challenge I faced Rendering HTML, CSS, and JavaScript together in real-time without refreshing the page. How I solved it Used an iframe for live preview and dynamically injected HTML & CSS, while executing JavaScript using eval(). Live Demo: https://lnkd.in/dnKJwx9J Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #WebDevelopment #100DaysOfCode #DeveloperJourney #Coding #UIUX

How JavaScript really works behind the scenes ⚙️🚀 1️⃣ User Interaction User clicks a button → event gets triggered 2️⃣ Call Stack Functions are pushed into the call stack and executed one by one (LIFO) 3️⃣ Web APIs Async tasks like setTimeout, fetch run outside the call stack 4️⃣ Callback Queue After completion, async tasks move into the queue 5️⃣ Event Loop It checks if the call stack is empty and pushes tasks back to it 6️⃣ DOM Update Finally, the browser updates the UI 🎯 Understanding this flow changed the way I write JavaScript 💻 What JavaScript concept confused you the most? 👇 #javascript #webdevelopment #frontenddeveloper #coding #learning

How JavaScript really works behind the scenes ⚙️🚀 1️⃣ User Interaction User clicks a button → event gets triggered 2️⃣ Call Stack Functions are pushed into the call stack and executed one by one (LIFO) 3️⃣ Web APIs Async tasks like setTimeout, fetch run outside the call stack 4️⃣ Callback Queue After completion, async tasks move into the queue 5️⃣ Event Loop It checks if the call stack is empty and pushes tasks back to it 6️⃣ DOM Update Finally, the browser updates the UI 🎯 Understanding this flow changed the way I write JavaScript 💻 To learn more, follow JavaScript Mastery What JavaScript concept confused you the most? 👇 #javascript #webdevelopment #frontenddeveloper #coding #learning

Day 4 — Today was the day the web stopped being static for me. DOM manipulation. Sounds scary. Actually really fun. Built a simple to-do list from scratch — no libraries, no frameworks. Just vanilla JS touching the page directly. The moment I typed something in an input field and saw it appear on screen because of code I wrote... that feeling doesn't get old. Key thing I learned: event delegation. Instead of adding an event listener to every single element, you add one to the parent and let events bubble up. Cleaner and way more efficient. Also — preventDefault() is your best friend in form handling. Took me an embarrassing number of refreshing pages to learn that lesson. What was your first "I built this" moment in coding? #javascript #webdev #frontenddeveloper #learninpublic

How JavaScript really works behind the scenes ⚙️🚀 1️⃣ User Interaction User clicks a button → event gets triggered 2️⃣ Call Stack Functions are pushed into the call stack and executed one by one (LIFO) 3️⃣ Web APIs Async tasks like setTimeout, fetch run outside the call stack 4️⃣ Callback Queue After completion, async tasks move into the queue 5️⃣ Event Loop It checks if the call stack is empty and pushes tasks back to it 6️⃣ DOM Update Finally, the browser updates the UI 🎯 Understanding this flow changed the way I write JavaScript 💻 To learn more, follow JavaScript Mastery What JavaScript concept confused you the most? 👇 #javascript #webdevelopment #frontenddeveloper #coding #learning 

🚀 Dynamic Currying in JavaScript — Why it actually matters At first, currying feels like a trick: sum(1)(2)(3) But the real power isn’t syntax — it’s reusability. 💡 The idea 👉 Fix some arguments now 👉 Reuse the function later 🔧 Example const filter = fn => arr => arr.filter(fn); const filterEven = filter(x => x % 2 === 0); filterEven([1,2,3,4]); // [2,4] Instead of repeating logic everywhere, you create reusable building blocks. ⚡ Real-world uses API helpers → request(baseUrl)(endpoint) Logging → logger("ERROR")(msg) Event handlers → handleClick(id)(event) Validation → minLength(8)(value) 🧠 Key takeaway Currying isn’t about fancy functions. It’s about writing code that is: ✔ Reusable ✔ Composable ✔ Cleaner Libraries like Lodash and Ramda use this pattern heavily. Once this clicks, your approach to writing functions changes completely. #JavaScript #WebDevelopment #FunctionalProgramming #Currying #CleanCode #Frontend #Coding #100DaysOfCode #DeveloperJourney #TechCommunity

PEP TASK-7 🚀 Built a Digital Clock using JavaScript I created a real-time clock application using pure JavaScript, focusing on how time-based functions work behind the scenes. 🔹 What this project demonstrates: • Real-time clock updates using setInterval() • Fetching current time with the JavaScript Date object • Formatting time (HH:MM:SS) dynamically • DOM manipulation to update UI instantly JavaScript makes it possible to build live, interactive features like clocks by continuously updating values every second using functions like setInterval() (Stack Overflow) This project helped me understand how real-time applications work and improved my skills in handling dynamic data in the browser. 💻 Check out the project here: 👉 https://lnkd.in/gWm4YYA5 Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #Coding #StudentDeveloper #Projects #LearningJourney