💡 Even Though I Couldn’t Complete This Project… I Learned A Lot! 🚀 Sometimes failure teaches more than success 💪 While working on my recent Product List Cart Project, I faced many challenges and couldn’t complete it fully — but the journey was full of valuable lessons. Here’s what I discovered 👇 ✨ I used a lot of createElement() — and that helped me understand how to dynamically handle DOM elements in JavaScript. It almost felt like working with React, where you structure components and update the UI efficiently. 🔍 After exploring a few GitHub repositories, I realized the importance of writing modular JavaScript — breaking logic into smaller, reusable parts. So, I created a separate file called createElement.js and added this reusable function. export const createElement = (element, className, elContent) => {   const createEl = document.createElement(element);   createEl.classList.add(className);   createEl.innerHTML = elContent;   return createEl; }; Now I can simply use it like this: createElement("div", "your-cart-item", yourCartContent); Live Site:https://lnkd.in/eqf-5MPj GitHub Repo:https://lnkd.in/e7wSUrq4 #JavaScript #FrontendDevelopment #WebDevelopment #100DaysOfCode #LearnInPublic #CodeNewbie #DevCommunity #JSNewbie #ProgrammingJourney #TechLearning #BuildInPublic #DeveloperJourney #FailForward #FrontendMentor #HML #CSS #VanillaJS

🚀 JavaScript Tab Functionality Practice — Small Step, Big Learning! Today I practiced building a Tab Switching feature using pure JavaScript — focusing on DOM manipulation, event handling, and clean UI interaction. This hands-on mini project helped me understand how tabs dynamically show and hide content sections — a core concept for building interactive web interfaces. ✅ Learned about: querySelector and forEach usage for DOM selection Managing active classes dynamically Writing clean, reusable code for better scalability 💻 Pushed the project on GitHub for review & version control. 👉 Check it out here: [ https://lnkd.in/gjMWCFu6 ] Every small project adds up — one step closer to becoming a stronger Frontend Developer. 🌱 #JavaScript #WebDevelopment #FrontendDeveloper #CodingPractice #GitHub #LearningInPublic #100DaysOfCode #DeveloperJourney #CleanCode #UIUX #Tech

🚀 Web Dev Day 32: Mastering JavaScript Events — Making the Web Come Alive! ✨ Today’s session was all about DOM Events — the real magic behind user interaction in web development. Every click, scroll, or keypress you make triggers an event — and learning how to handle them properly separates a coder from a developer. 💡 🔹 Part 1: The Fundamentals of Events What is a DOM Event? Think of it like a doorbell — when a user interacts, JavaScript gets notified. 🔔 The 3 Core Components: Target: The element that triggers the event. Event Type: The kind of interaction (e.g., click, input, mouseover). Handler: The function that runs when the event occurs. Modern Approach: Use addEventListener() — it’s flexible, cleaner, and supports multiple listeners. Why Avoid onclick: It mixes HTML and JS, breaking Separation of Concerns. The Event Object: A built-in “information packet” containing details like mouse position, key pressed, and more. 🔹 Part 2: The Three Phases of an Event Event Bubbling: Events rise from the deepest element (child) up to its ancestors (parent → document). Event Capturing: The reverse — events travel from the top (document) down to the target. Visualizing Flow: Understanding how the browser processes events step by step helps debug like a pro. Control the Flow: Use event.stopPropagation() to prevent events from bubbling further when needed. 🧠 🔹 Part 3: The Event Delegation Pattern What Is It? Instead of adding listeners to multiple elements, attach one listener to a parent element. Why It’s Powerful: Better performance and easier management, especially for dynamic content. Key Tools: event.target → The actual element clicked. event.currentTarget → The element the listener is attached to. Real-World Example: Building an interactive to-do list where all items respond to clicks — with just one event listener! ✅ 🎯 Takeaway: Events are the heartbeat of interactive web apps. Understanding how they flow, bubble, and delegate gives you total control over your UI. #Day32 #JavaScript #WebDevelopment #Frontend #DOMEvents #EventHandling #CodingJourney #LearnInPublic #JS #Programming #CoderArmy #RohitNegi

🚀 Web Dev Day 32: Mastering JavaScript Events — Making the Web Come Alive! ✨ Today’s session was all about DOM Events — the real magic behind user interaction in web development. Every click, scroll, or keypress you make triggers an event — and learning how to handle them properly separates a coder from a developer. 💡 🔹 Part 1: The Fundamentals of Events What is a DOM Event? Think of it like a doorbell — when a user interacts, JavaScript gets notified. 🔔 The 3 Core Components: Target: The element that triggers the event. Event Type: The kind of interaction (e.g., click, input, mouseover). Handler: The function that runs when the event occurs. Modern Approach: Use addEventListener() — it’s flexible, cleaner, and supports multiple listeners. Why Avoid onclick: It mixes HTML and JS, breaking Separation of Concerns. The Event Object: A built-in “information packet” containing details like mouse position, key pressed, and more. 🔹 Part 2: The Three Phases of an Event Event Bubbling: Events rise from the deepest element (child) up to its ancestors (parent → document). Event Capturing: The reverse — events travel from the top (document) down to the target. Visualizing Flow: Understanding how the browser processes events step by step helps debug like a pro. Control the Flow: Use event.stopPropagation() to prevent events from bubbling further when needed. 🧠 🔹 Part 3: The Event Delegation Pattern What Is It? Instead of adding listeners to multiple elements, attach one listener to a parent element. Why It’s Powerful: Better performance and easier management, especially for dynamic content. Key Tools: event.target → The actual element clicked. event.currentTarget → The element the listener is attached to. Real-World Example: Building an interactive to-do list where all items respond to clicks — with just one event listener! ✅ 🎯 Takeaway: Events are the heartbeat of interactive web apps. Understanding how they flow, bubble, and delegate gives you total control over your UI. #Day32 #JavaScript #WebDevelopment #Frontend #DOMEvents #EventHandling #CodingJourney #LearnInPublic #JS #Programming #CoderArmy #RohitNegi

💻 Day 41–42 – From Logic to the Browser: Entering the World of DOM After focusing on JavaScript fundamentals, these two days at Sheryians Coding School – Cohort 2.0 were all about putting that logic into action — moving from theory to interaction. ✨ Day 41: The entire session was dedicated to problem-solving. I practiced various JavaScript questions to strengthen my understanding of loops, functions, and arrays — building a stronger logical foundation before stepping into the browser environment. ⚡ Day 42 – DOM (Frontend ki JS): I began exploring the Document Object Model (DOM) — the bridge between JavaScript and the user interface. It’s fascinating how JS can interact with the webpage — changing content, style, and behavior dynamically. 🔹 What I learned: The 4 Pillars of DOM and how they define web interactivity. Selecting Elements using different DOM methods. Modifying HTML content dynamically. Changing CSS styles through JavaScript. Event Listeners – making web pages respond to user actions like clicks or keypresses. 🧩 Hands-on Task: Built my first Beginner Counter App using DOM manipulation — a small but exciting step into the world of interactive frontend development! 💡 Key takeaway: DOM is where code meets creativity. It’s what transforms static web pages into dynamic, user-friendly experiences. #Cohort2 #SheryiansCodingSchool #JavaScript #LearningInPublic #FrontendDevelopment #WebDevelopment #DOM #CodingJourney

☕ Revisiting JavaScript Event Flow — Capturing, Target & Bubbling Phases Today, I was revising one of the most important concepts in JavaScript — Events and Event Listeners. 💡 It’s fascinating how a single click can travel through multiple layers of the DOM before reaching its destination! Here’s what I learned and revised 👇 🔹 Event & Event Listener JavaScript allows us to respond to user interactions like clicks, key presses, and mouse movements. For example 👇 element.addEventListener("click", () => { console.log("Element clicked!"); }); This method lets us attach multiple handlers to the same element without overwriting existing ones. 🔹 Click Event The click event is one of the most commonly used — and it’s the one I focused on today while understanding how event flow actually works. 🔹 Event Flow in JavaScript Every event in the DOM passes through three phases: 1️⃣ Capturing Phase – The event travels from the top (document) down to the target element. 2️⃣ Target Phase – The exact element that triggered the event receives it. 3️⃣ Bubbling Phase – The event then bubbles back up toward the document. 📘 Example // Capturing phase parent.addEventListener("click", () => { console.log("Parent clicked - Capturing Phase"); }, true); // true → capturing // Bubbling phase (default) child.addEventListener("click", () => { console.log("Child clicked - Bubbling Phase"); }); 👉 When you pass true as the third argument in addEventListener, it listens during the capturing phase. 👉 By default, it’s false, meaning the listener works in the bubbling phase. 🧠 Visual Flow 📤 Document → HTML → Body → Parent → Child → (then bubbles back up 🔁) Understanding this complete flow helped me clearly visualize how events travel and how to control them precisely using capturing and bubbling. 🚀 A huge thanks to CoderArmy, Rohit Negi, and Aditya Tandon Sir 🙏 Your clear explanations and practical examples made this topic so easy to grasp. #JavaScript #EventListener #EventFlow #FrontendDevelopment #WebDevelopment #LearningJourney #Coding #Developer #RohitNegi #AdityaTandon #CoderArmy

Github: https://lnkd.in/gXq_-4mp 🔥 Project 2/20 — Sticky Header + Scroll Reveal ✨ Today we’re leveling up UI fundamentals. No React, no Tailwind — just pure HTML, CSS & JavaScript flexing its muscles. This sticky navbar transforms as you scroll, paired with silky smooth reveal animations using the Intersection Observer API. Modern devs love frameworks. Great devs master fundamentals first. And we’re building the foundation brick by brick — one clean UI at a time. Because good code isn’t just written — it’s crafted. 📌 Concepts: ✅ Scroll events ✅ Intersection Observer ✅ DOM manipulation ✅ UI animations 🔗 GitHub repo in bio Follow along — 18 more fire projects coming. We’re not coding… we're forging skills. ⚔️🔥 #javascript #webdevelopment #frontend #htmlcssjavascript  #uiuxdesign #frontendprojects #stickyheader #scrollanimation  #vanillajs #cssanimations #intersectionobserver  #learningtocode #webdevjourney #codingreels #codetutorial  #githubproject #frontenddeveloper #webdesign  #softwareengineer #programminglife #buildinpublic  #100daysofcode #devcommunity #codewithme #codeweaver

🎯 Mastering DOM Events: Bubbling, Capturing & Delegation (JavaScript Essentials) When working with the DOM, understanding how events travel is crucial for writing clean, efficient, and maintainable code. Three key concepts help with that: 🔄 1. Event Bubbling When an event occurs on an element, it first triggers the handler on that element, and then moves up the DOM tree (parent → ancestor). Order: child → parent → document element.addEventListener("click", handler); // default: bubbling 📥 2. Event Capturing (Trickling) The opposite of bubbling. The event starts from the top (document) and travels down to the target element. Order: document → parent → child element.addEventListener("click", handler, true); // third parameter = capturing phase 🤝 3. Event Delegation (Real-World Best Practice) Instead of attaching event listeners to multiple child elements, we attach one listener to a parent and use event bubbling to detect which child triggered the event. This reduces: ✅ Memory usage ✅ DOM reflows ✅ Code duplication document.querySelector("ul").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked:", e.target.innerText); } }); 🧠 Why This Matters Enhances performance Keeps code scalable (especially when elements are dynamically added/removed) Makes your event logic clean and maintainable 🌟 In Short: ConceptDirectionUse CaseCapturingDocument → ElementNiche control of early event flowBubblingElement → DocumentDefault & most commonly usedDelegationUses BubblingEfficient event handling for lists, tables, dynamic UI Understanding these three concepts is a core skill that reflects strong JavaScript & frontend fundamentals — a must for building dynamic, high-performance UI. #JavaScript #WebDevelopment #Frontend #ReactJS #DOM #CodingTips #DeveloperKnowledge #PerformanceEngineering

🌟 Day 2 of DOM (Document Object Model) in JavaScript 🌟 Today marks the second day of my DOM learning journey, and it was filled with some really fun and interactive tasks that helped me understand how JavaScript can dynamically change the behavior of web pages 🎯 💡 Here’s what I practiced today: 🔹 Changing Background Color: I created multiple boxes and added functionality so that whenever I click on a specific box, its background color changes instantly. It helped me understand how to use event listeners and manipulate styles through JavaScript. 🔹 Counter Project: I built a simple counter app that increases, decreases, and resets numbers on button clicks. Through this, I got a clear idea of how to handle DOM events, update values, and reflect real-time changes on the screen. 🔹 Image Switch Task: Another interesting task I completed was creating a feature where one image changes to another when an event (like hover or click) occurs. This was a great way to explore image manipulation and conditional logic in the DOM. Each small project strengthened my confidence in handling the DOM and made me realize how powerful JavaScript can be when it comes to making webpages interactive ✨ I’ve uploaded all these tasks and practice files on my GitHub for reference 👇 🔗 GitHub Repository: https://lnkd.in/devrWxM3 #JavaScript #DOM #WebDevelopment #Frontend #CodingJourney #LearningInPublic #GitHub #DeveloperJourney 🚀