DOM Structure Explained

Day 18 of My JavaScript Journey 🚀 Today, I built my second JavaScript project (A Modal Window.) The project works like this: • Clicking show modal button opens a modal (popup box) • Clicking the close button hides it • Pressing the “Escape” key also closes it In this project, I used: • document.querySelector to select elements • addEventListener to handle user actions • classList to show and hide the modal • keydown event to detect when the ESC key is pressed One thing I found interesting: Handling keyboard events made the project feel more interactive and user-friendly. Key takeaway: JavaScript allows you to control both mouse and keyboard interactions on a webpage. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

Day 5 of My JavaScript Journey 🚀 Today, I learned about if/else statements and type conversion in JavaScript. The if/else statement is used to control the flow of a program based on conditions. Example: if (age > 18) { console.log("Adult"); } else { console.log("Not an adult"); } I also learned about type conversion and coercion. • Type conversion is when we manually change a value from one type to another. • Type coercion is when JavaScript automatically converts types behind the scenes. For example: "5" + 2 = "52" (coercion happens) One thing that stood out to me: JavaScript can behave unexpectedly if you don’t understand type coercion. Key takeaway: Always be mindful of data types when writing conditions and operations. #JavaScript #WebDevelopment #LearningInPublic #100DaysOfCode

Day 19/100 of JavaScript 🚀 Today’s topic : Deep dive into DOM Going beyond basic manipulation — focusing on performance, rendering, and efficient updates 🔹Reflow & Repaint - Reflow → layout recalculation (expensive) - Repaint → visual update without layout change Frequent DOM changes can trigger multiple reflows and slow down performance 🔹Minimizing reflows const fragment = document.createDocumentFragment(); for (let i = 0; i < 5; i++) { const el = document.createElement("p"); el.textContent = i; fragment.appendChild(el); } document.body.appendChild(fragment); 🔹Caching DOM queries const list = document.getElementById("list"); // reuse instead of querying again list.appendChild(newItem); 🔹Layout thrashing❌ Reading and writing layout repeatedly can hurt performance el.style.width = "100px"; console.log(el.offsetWidth); // forces reflow 🔹Efficient updates - Batch DOM changes - Use class changes instead of multiple style updates - Avoid unnecessary re-rendering DOM manipulation is not just about changing elements, but doing it efficiently to maintain performance #Day19 #JavaScript #100DaysOfCode

🚀 Day 71 – DOM Introduction & Selectors 🌐 Today I stepped into the world of the Document Object Model (DOM) — the backbone that allows JavaScript to interact with HTML. 🔸 Learned how the browser converts an HTML file into a DOM tree, giving us a structured hierarchy to work with. 🔸 Explored DOM selectors like (getElementById), (getElementsByClassName), (getElementsByTagName), (querySelector), and (querySelectorAll) to access and manipulate elements. 🔸 Understood the difference between HTMLCollection and NodeList, and how they handle elements and text nodes differently. 🔸 Practiced creating, modifying, and deleting elements dynamically — making web pages truly interactive. 🌱 Reflection – DOM is the bridge between static HTML and dynamic JavaScript. Mastering selectors and collections is like learning the language of the browser — it opens the door to building responsive, interactive experiences. ✨ Grateful to Rudra Sravan kumar sir, mounika M mam, and the 10000 Coders team for guiding me through this exciting step in web development. ⚡ Day 71 was about unlocking the browser’s hidden map — turning structure into interactivity. #Day71 #JavaScript #DOM #WebDevelopment #CodingJourney #10000Coders #LearnInPublic #100DaysOfCode

🚀 Day 40 of My Full Stack Development Journey Today I stepped into one of the most exciting parts of JavaScript — the DOM (Document Object Model) 🌐⚡ Here’s what I explored today: 🔹 What is DOM? – Understanding how JavaScript interacts with HTML 🔹 DOM Manipulation – Dynamically changing web pages 🔹 Selecting Elements – By ID, Class, Tag Name & Query Selectors 🔹 Setting Content – Updating text and HTML dynamically 🔹 Manipulating Attributes & Styles – Changing appearance using JS 🔹 classList Property – Adding/removing classes easily 🔹 DOM Navigation – Traversing elements on a page 🔹 Adding & Removing Elements – Creating dynamic UI Also solved practice questions and 5 assignment problems 💻 This feels like a huge step — now I can actually make web pages interactive and dynamic! Excited to build real projects using DOM 🚀 #FullStackJourney #WebDevelopment #JavaScript #DOM #LearningInPublic #100DaysOfCode #CodingJourney

#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

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day51 🚀 Built a Dark Mode Toggle with Image Control using HTML, CSS & JavaScript. Recently, I worked on a simple yet powerful UI feature — a toggle switch that not only switches between Light & Dark mode but also dynamically hides and shows an image based on user interaction. 🔧 Tech Used: HTML CSS JavaScript ✨ Features: Smooth Dark/Light mode transition Dynamic text update (Light Mode / Dark Mode) Image visibility control using JavaScript Clean and responsive UI ⚡ What I Learned: DOM Manipulation (getElementById, classList) Event Handling (addEventListener) Real-time UI updates Better understanding of user interaction 🔗Github Link :https://lnkd.in/dC-SVyxj Code Of School || Ritendra Gour sir || Avinash Gour sir #WebDevelopment #JavaScript #Frontend #LearningByDoing #100DaysOfCode

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

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.

🚀 Day 6/108 – Conditional Statements in JavaScript Continuing my 108-day JavaScript journey — today I learned how to make decisions in code 👇 👉 What are Conditional Statements? They allow us to execute different blocks of code based on conditions. 🧠 Types of Conditional Statements: 🔹 if statement Executes code if a condition is true 🔹 if...else statement Executes one block if true, another if false 🔹 if...else if...else Used to check multiple conditions 🔹 switch statement Used when comparing one value against multiple cases 💻 Example: let age = 18; if (age >= 18) { console.log("You are an adult"); } else { console.log("You are a minor"); } 🧠 Key Insight: Conditions always return either "true" or "false". ⚠️ Quick Note: JavaScript also has truthy and falsy values Falsy values → "false, 0, "", null, undefined, NaN" 🔥 Learning step by step — consistency is everything! How do you usually write conditions — if-else or switch? 👇 #JavaScript #WebDevelopment #CodingJourney #LearningInPublic #100DaysOfCode