DOM Performance Optimization Techniques in JavaScript

Day 16/100 of JavaScript Today’s topic : DOM Events After understanding DOM structure, the next step is handling user interactions using events JavaScript can listen to events and respond to user actions like clicks, typing, or scrolling 🔹Adding event listener const btn = document.getElementById("btn"); btn.addEventListener("click", () => { console.log("Button clicked"); }); 🔹Common events - click - input - submit - keydown 🔹Event object btn.addEventListener("click", (event) => { console.log(event.target); }); 🔹Event bubbling (basic idea) Events propagate from child → parent unless stopped event.stopPropagation(); DOM events allow JavaScript to make web pages interactive by responding to user actions #Day16 #JavaScript #100DaysOfCode

🚀 Day 8 of #100DaysOfFrontend Built a Background Color Changer using HTML, CSS, and JavaScript 🎨 This simple project helped me understand DOM manipulation, event handling, and how to dynamically update styles using JavaScript. Also explored generating random colors for a better user experience. Consistency is key 🔑 — learning and building every single day 💪 🔗 Live Demo: https://lnkd.in/ggn74Msj 💻 GitHub: https://lnkd.in/gEAXCYND #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency

What is the difference between var, let, and const? JavaScript has three ways to declare variables but they behave very differently. Here’s the simplest way to understand them: 👉 var Function-scoped Hoisted and initialized as undefined Can be re-declared and updated 👉 let Block-scoped Hoisted but not initialized (temporal dead zone) Can be updated, not re-declared 👉 const Block-scoped Must be initialized at declaration Cannot be reassigned (but objects can still mutate) Why? - var ignores block scope - let and const respect block boundaries The difference is not syntax — it’s how JavaScript handles scope and memory. #Frontend #JavaScript #WebDevelopment #SoftwareEngineering

🚀 Day 4 of #100DaysOfFrontend Built a Real-Time Digital Clock using HTML, CSS, and JavaScript ⏱️ This project helped me understand how to work with the Date object, update the UI dynamically, and use setInterval for real-time functionality. Small project, but a big step in learning JavaScript 💪 🔗 Live Demo: https://lnkd.in/ghiNej6F 💻 GitHub: https://lnkd.in/gZ_z8fDm #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency

Day 18/100 of JavaScript Today’s topic : Advanced DOM Manipulation Moving further into DOM, beyond structure and events — controlling and updating elements efficiently 🔹Creating and inserting elements const el = document.createElement("div"); el.textContent = "New Element"; document.body.appendChild(el); 🔹insert vs replace parent.appendChild(el); // add at end parent.insertBefore(el, refNode); // insert before specific node parent.replaceChild(el, oldNode); // replace existing 🔹Removing elements el.remove(); parent.removeChild(oldNode); 🔹Working with attributes el.setAttribute("id", "box"); el.getAttribute("id"); el.removeAttribute("id"); 🔹classList (preferred way) el.classList.add("active"); el.classList.remove("active"); el.classList.toggle("active"); 🔹innerHTML vs textContent el.innerHTML = "<b>Bold</b>"; // parses HTML el.textContent = "<b>Bold</b>"; // plain text Efficient DOM manipulation is about creating, updating, and removing elements while keeping code clean and predictable #Day18 #JavaScript #100DaysOfCode

Project Title : Rock Paper Scissors Game A Rock Paper Scissors game built with vanilla HTML, CSS,  and JavaScript. Features: - Player vs Computer mode - Random computer choice generation - Real-time score tracking for both player and computer - Dynamic result messages with color feedback - Clean and responsive UI with image-based choices Built this to practice JavaScript fundamentals —  random number generation, DOM manipulation,  conditional logic, and event handling.

This JavaScript library completely changed how I think about text. I’ve been working on my portfolio recently using the Pretext library by Cheng Lou and it’s absurd. Pretext is a JavaScript library that lets you break out of traditional CSS and DOM constraints and build truly dynamic UI. Instead of rendering everything and asking the DOM what happened, with Pretext you compute and measure everything first, then render once. This shift feels small, but it opens the door to more innovative, dynamic interfaces that aren't limited by typical layout rules. Check it out👇 : https://lnkd.in/ghedSc_K Pretext by Cheng Lou: https://lnkd.in/dy2n-utx #pretext #webdev #javascript #react #userinterface

🚀 Just built a simple yet fun game using HTML, CSS & JavaScript! It’s a Bat–Ball–Stump game where the user selects an option and the computer makes a random choice 🎮 👉 Rules are simple: Bat 🆚 Ball → User wins Ball 🆚 Stump → User wins Stump 🆚 Bat → User wins This project helped me understand: ✔️ DOM manipulation ✔️ Event handling ✔️ Logic building Small project, but a big step in my learning journey 💻✨ Would love your feedback! #WebDevelopment #JavaScript #CodingJourney #Projects #FrontendDeveloper

Today’s practice was all about understanding how DOM manipulation really works in JavaScript. I worked on deleting elements dynamically using event handling. At first, it looked simple — just use "remove()" and done. But while practicing, I discovered an important edge case. When using "event.target.parentNode.remove()", it works perfectly when clicking on the intended element (like an image inside a list). But if you click outside the expected target, it can remove the wrong parent — even the entire list. To fix this, I implemented a condition to ensure deletion only happens when the clicked element is the correct one ("IMG" tag). This small practice helped me understand: • The difference between "event.target" and "event.currentTarget" • How DOM structure affects behavior • Why adding conditions makes code safer Every small bug teaches something valuable. #JavaScript #DOM #FrontendDevelopment #LearningInPublic #WebDevelopment

Day 14/100 of JavaScript Today’s topic : Introduction to DOM The DOM (Document Object Model) represents the HTML structure of a web page as a tree of objects JavaScript can use the DOM to access and manipulate elements dynamically 🔹Selecting elements const heading = document.getElementById("title"); const items = document.querySelectorAll(".item"); 🔹Changing content heading.textContent = "Updated Title"; 🔹Changing styles heading.style.color = "blue"; 🔹Adding elements const newEl = document.createElement("p"); newEl.textContent = "New paragraph"; document.body.appendChild(newEl); 🔑 Key understanding: The DOM allows JavaScript to interact with HTML and update the UI dynamically without reloading the page #Day14 #JavaScript #100DaysOfCode