DOM Introduction with JavaScript

#JavaScript Object Syntax Inline Styles in react are specified using Javascript objects. property names are written in camelCase instead of the traditional css kebab-case, const style = {     backgroundColor: 'black',     fontSize: '16px' }; #units For most numeric values, you need to specify units as a string (e.g., '16px'). Some propertices like zIndex, can take numeric values directly. const style = {     padding : '1.6rem',     zIndex: 1, };

The Document Object Model (DOM) was the moment JavaScript stopped being abstract and became real. Before the DOM, I wrote JavaScript that just ran calculations. After the DOM, I could make webpages respond to user actions. Here's the mental model that helped me: The DOM is JavaScript's map of your HTML. Every element is a node. You can find any element, read its content, change its style, and create or delete elements — all with JavaScript. The methods I use constantly: document.querySelector() — find one element document.querySelectorAll() — find all matching elements element.innerHTML — read or change content element.classList.add() / remove() — toggle CSS classes element.appendChild() — add new elements dynamically My first DOM project: a comment box where users type a comment, click submit, and it appears on screen — no page reload. That tiny interaction felt enormous. Do you remember the first time you made a webpage change dynamically? What did you build?

𝗗𝗢𝗠 𝗠𝗲𝘁𝗵𝗼𝗱𝘀: 𝗖𝗿𝗲𝗮𝘁𝗶𝗻𝗴 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀 You need to add new HTML elements to your page using JavaScript. Use the createElement method. Elements start in JavaScript memory. They do not appear on your screen immediately. Follow these three steps: - Create: let par = document.createElement("p") - Add content: par.innerText = "Your text here" - Add to page: document.body.appendChild(par) You also add attributes and styles to your elements: - Change color: par.style.color = "red" - Set class: par.setAttribute("class", "paragraph") You use loops to create multiple items. This works well for lists. Source: https://lnkd.in/g4EtxapR

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 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

What if your CSS could read DOM state without a single line of JavaScript? CSS :has() makes this real. Form field highlights, tab indicators, card state variants that used to need JS class-toggling can now live entirely in your stylesheet. https://lnkd.in/eaC8d4gU #WebDev #CSS #WebPlatform

My slider is a simple image gallery made with HTML and JavaScript. It shows one image at a time and lets users switch images using “Previous” and “Next” buttons. JavaScript controls the slider by storing images in an array and changing the image when a button is clicked. It also loops back to the first image after the last one. This project helps demonstrate basic concepts like DOM manipulation and event handling.

Random Quote Generator | No API 🚀 Build a complete Random Quote Generator using only HTML, CSS, and JavaScript, no API, no libraries, just pure Vanilla JavaScript. This is a perfect beginner JavaScript project to understand arrays, DOM manipulation, and Math.random(), great for your portfolio too! ✔ Features You'll Build: → Random quote display on button click → Curated quotes stored in JavaScript array → Smooth UI design with CSS → Copy quote to clipboard button → Clean modern dark/light UI 📚 JavaScript Concepts Covered: → JavaScript Arrays → Math.random() and Math.floor() → DOM manipulation → querySelector and textContent → Event listeners 🎯 Who Is This For? Perfect for beginners learning JavaScript who want real hands-on projects to strengthen DOM manipulation skills and build an impressive frontend portfolio. 👉 Watch the full implemention here:https://lnkd.in/dXQyH6Hn #javascript #quotegenerator #youtube #javascriptproject #beginnerjavascript #htmlcssjavascript #webdevelopment

 Built My Own Tailwind-like CSS Engine “Chaiwind”  I’ve been diving deep into how utility-first CSS frameworks like Tailwind actually work under the hood… and decided to build my own version from scratch.  GitHub: https://lnkd.in/edbMhfxa  Live Demo: https://lnkd.in/ebMWZ7BK  What is Chaiwind? Chaiwind is a runtime CSS utility engine that: • Scans the DOM for custom classes (chai-*) • Parses them into CSS properties • Applies styles dynamically using JavaScript No build tools. No config. Just pure JavaScript.  Tech Highlights: • DOM manipulation & query selection • Custom class parser logic • Dynamic style injection • Utility-first CSS architecture  What I learned: • How Tailwind-like systems work internally • Runtime vs build-time styling tradeoffs • Writing cleaner, modular JavaScript • Thinking like a framework developer  Still improving: • Performance optimization • Responsive & pseudo-class support • Better class parsing system This project pushed me beyond just using frameworks — into understanding how they are built. Would love feedback from the community  Hitesh Choudhary Piyush Garg Chai Code #JavaScript #WebDevelopment #Frontend #TailwindCSS #OpenSource #BuildInPublic #chaicode

🚀 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