Deepening JavaScript Fundamentals

🚀 Web Development Journey - JavaScript Day 6 Today was all about going deeper into how JavaScript creates and manages objects behind the scenes. Here’s what I learned: 🔹 Constructor Functions Creating multiple object instances efficiently. 🔹 Prototypes & Prototype Inheritance Understanding how JavaScript shares properties and methods across objects. 🔹 Changing Prototype Values Exploring how modifying prototypes affects all instances. 🔹 Object Destructuring Extracting values from objects in a cleaner, more readable way. This session really helped me understand how JavaScript works under the hood when dealing with objects. Next up: Object Literal Syntax Extensions (ES6) 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment

🚀 Web Development Journey - JavaScript Day 3 Today’s focus was on understanding how JavaScript controls logic and flow in programs. Here’s what I covered: 🔹 Control Flow • Conditional statements: if, if...else, else if, switch • Ternary operator for cleaner conditional logic 🔹 Loops • for loop • while loop • do...while loop • Using break and continue effectively 🔹 Functions • Writing reusable functions • Parameters vs Arguments • Default parameters • Returning values from functions This is where things start getting more practical, writing logic, repeating tasks, and structuring code better. Taking it step by step and building consistency every day. #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment

🚀 Web Development Journey - JavaScript Day 7 Today I explored more modern JavaScript (ES6) and how it improves the way we write and structure code. Here’s what I covered: 🔹 Object Literal Syntax Extensions (ES6) Cleaner and more concise ways to define objects. 🔹 JavaScript Classes A more structured way to create objects and handle logic. 🔹 Class Methods Defining behaviors inside classes. 🔹 Getters & Setters Controlling how object properties are accessed and updated. 🔹 Class Inheritance & super Extending classes and reusing code efficiently. 🔹 Method Overriding Customizing behavior in child classes. This felt like leveling up from basic JavaScript to writing more organized, scalable code. Next up: Static Methods 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment

Day 22 of my JavaScript journey 🚀 Updated my Contact Form by adding JavaScript functionality to make it more interactive and user-friendly. Features: ✔️ Form validation (required fields & email format) ✔️ Real-time error messages ✔️ Prevent submission on invalid input ✔️ Improved user experience with dynamic feedback This update helped me understand how to move from just designing forms to building functional and user-friendly applications. 🔗 Live Demo: https://lnkd.in/gcawshv3 💻 GitHub Repo: https://lnkd.in/gPDFb_vJ Learning not just to build, but to improve and refine my projects step by step. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 Web Development Journey - JavaScript Day 10 Today was all about going deeper into DOM manipulation, actually controlling and modifying elements on a web page using JavaScript. Here’s what I worked on: 🔹 Adding & Positioning Elements appendChild() append() prepend() after() insertBefore() 🔹 Working with Content textContent innerHTML insertAdjacentHTML() 🔹 Replacing, Cloning & Removing Elements replaceChild() cloneNode() removeChild() 🔹 Working with Attributes getAttribute() setAttribute() hasAttribute() removeAttribute() This stage really shows how powerful JavaScript is, not just writing logic, but dynamically shaping what users see and interact with in real time. Next up: Manipulating element styles with JavaScript 🎯 #WebDevelopment #JavaScript #100DaysOfCode #FrontendDevelopment #LearningInPublic #DOM

🧠 Why does some JavaScript run instantly… and some runs later? Because JavaScript can be synchronous and asynchronous. 🔹 Synchronous JavaScript - JavaScript runs one line at a time. - Each task waits for the previous one to finish. Example: console.log("Start"); console.log("Middle"); console.log("End"); Output: Start → Middle → End ✅ Simple ❌ Can block execution 🔹 Asynchronous JavaScript - Some tasks don’t block execution. - They run in the background and return later. Example: console.log("Start"); setTimeout(() => { console.log("Async Task"); }, 2000); console.log("End"); Output: Start → End → Async Task 🔹 Why Async Exists Without async: - APIs would freeze the app - Timers would block everything - UI would become unresponsive 💡 Key Idea JavaScript is single-threaded, but it handles async using Web APIs + Call Stack + Event Loop (We’ll cover this next 👀) 🚀 Takeaway - Sync = step-by-step execution - Async = non-blocking execution Both are essential for real-world apps Next post: Event Loop Explained Simply 🔥 #JavaScript #AsyncJS #Frontend #WebDevelopment #LearnJS #Programming #LearningInPublic

Day 20 of my JavaScript journey 🚀 Built a Password Generator with advanced features using HTML, CSS, and JavaScript. Features: 🔐 Custom password length (8–20 characters) 🔤 Include/exclude uppercase, lowercase, numbers, and symbols 📋 One-click copy to clipboard 📊 Password strength indicator This project helped me dive deeper into logic building, user input handling, and creating practical tools. 💻 GitHub Repo: https://lnkd.in/g7kFznGK Focused on building projects that are not just functional, but actually useful. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Most people don’t understand the JavaScript Event Loop. So let me explain it in the simplest way possible: JavaScript is single-threaded. It can only do ONE thing at a time. It uses something called a call stack → basically a queue of things to execute. Now here’s where it gets interesting: When async code appears (like promises or setTimeout), JavaScript does NOT execute it right away. It sends it away to the Event Loop and then keeps running what’s in the call stack. Only when the call stack is EMPTY… the Event Loop starts pushing async tasks back to be executed. Now look at the code in the image. What do you think runs first? Actual output: A D C B Why? Because not all async is equal: Promises (microtasks) → HIGH priority setTimeout (macrotasks) → LOW priority So the Event Loop basically says: “Call stack is empty? cool… let me run all promises first… then I handle setTimeout” If you get this, async JavaScript stops feeling random. #javascript #webdevelopment #frontend #reactjs #softwareengineering

🚀 Web Development Journey - JavaScript Day 9 Today I stepped into one of the most important parts of JavaScript: the Document Object Model (DOM), where JavaScript truly starts interacting with web pages. Here’s what I covered: 🔹 Understanding the DOM Learned how the browser represents HTML as a structured tree (DOM Tree), making it possible to interact with elements programmatically. 🔹 Node Relationships Explored how elements are connected, parent, child, and sibling relationships, which is key for navigating the DOM effectively. 🔹 Selecting Elements Practiced different ways to target elements: getElementById getElementsByClassName getElementsByTagName querySelector() querySelectorAll() 🔹 Traversing Elements Learned how to move through the DOM using properties like: parentNode childNodes nextElementSibling previousElementSibling 🔹 Manipulating Elements Started creating and modifying elements dynamically using JavaScript (e.g., createElement). This is where things start to feel real, moving from writing logic to actually controlling what users see and interact with. Next up: Appending elements to the DOM (appendChild) 🔥 #WebDevelopment #JavaScript #100DaysOfCode #LearningInPublic #FrontendDevelopment #DOM

🔄 JavaScript is single-threaded — yet somehow handles async perfectly. Most devs I've met can write async code, but can't explain why it works. Once this mental model clicked for me, I stopped fighting JavaScript and started working with it. The Event Loop in 30 seconds: When JS hits an async task (setTimeout, fetch, event listener), it doesn't wait. It hands the task off → to the Web APIs (browser/Node handles it) The result waits → in the Callback Queue The Event Loop checks → "Is the call stack empty?" Only then → the callback runs Here's the part most tutorials skip 👇 Promises don't go to the Callback Queue. They go to the Microtask Queue — which runs before setTimeout, every single time.