DOM Manipulation & Events in JavaScript

🚀 Ever wondered how to dynamically create elements in JavaScript? Let's dive in! 🤓✨ Creating elements dynamically allows developers to generate content on-the-fly, enhancing user experience and interactivity on websites. It's a powerful technique for adding, updating, or removing elements based on user actions or data changes. ⭐️ Why it matters: Dynamic element creation gives developers the flexibility to build responsive and interactive web applications tailored to user needs, leading to a more engaging and personalized user experience. Plus, it optimizes performance by only adding elements when necessary. Here's a simple breakdown: 1️⃣ Create an element using document.createElement() 2️⃣ Set attributes and content for the element 3️⃣ Insert the element into the DOM using appendChild() ```javascript // Create a new paragraph element const newPara = document.createElement('p'); // Add text content newPara.textContent = 'Dynamic content created!'; // Append the element to an existing container document.getElementById('container').appendChild(newPara); ``` Pro tip: Utilize event listeners to dynamically respond to user interactions and update the content accordingly. 🎯 Common mistake alert: Forgetting to reference the container to append the newly created element can result in elements not displaying as intended. Double-check your target container! 🤔 What's the most creative way you've used dynamic element creation in your projects? Share below! Let's inspire each other. 💡🌟 🌐 View my full portfolio and more dev resources at tharindunipun.lk #JavaScript #WebDevelopment #DynamicElements #CodeNewbie #DeveloperTips #FrontendDevelopment #InteractiveWebsites #WebDevProjects #LearnToCode

Efficiently managing multi-page documents is essential for modern web workflows. This guide shows how to build a multi-page document scanner with structured capture and better output control. Try it now: https://lnkd.in/gtdtCjUn #WebDev #DocumentScanning #JavaScript #DevTools

Still using scroll event listeners to detect user activity? CSS might already be able to handle that. No JavaScript needed. Ever wondered if users actually scroll through your Terms of Service before clicking "Agree"? Traditionally, verifying this meant heavy JavaScript, listening to scroll events. It was often complex and bad for performance. But a modern CSS-first technique changes everything. It turns CSS into a silent state manager for your JavaScript. Here’s the idea, broken down: 1. You have a scrollable box (like Terms & Conditions) and a sticky "Sign Up" button inside it. 2. Let the box track its scroll position with only `container-type: scroll-state` 3. Then, a CSS container query defines a rule like: “WHEN this box is scrolled to the very bottom...” 4. "...change a non-visual CSS property on the button." For example, set `appearance: button;` (the button still looks the same). 5. This change acts as an invisible flag. 6. Your JavaScript becomes dead simple. When the button is clicked, it doesn’t care about scroll position… 7. It just reads the computed CSS `appearance` property. 8. If the flag is set → proceed. If not → show a confirmation prompt. This is a brilliant separation of concerns: - CSS declaratively tracks scroll state. - JavaScript reacts to final state only. No listeners, no scroll-time overhead. ⚠️ Note: This technique currently works only in Chrome and Edge (~67% support). So it's not production-ready everywhere yet. It’s a glimpse of what’s coming. What other UI patterns could benefit from this “CSS-as-a-state-machine” approach? Ask me for the demo via DM if needed.

🚀 From Static to Dynamic — My JavaScript Journey! In my previous posts, I shared my foundation in HTML & CSS. Today, I’m excited to take it a step further and talk about how I explored the power of JavaScript to build dynamic web applications. 💡 Over time, I learned and implemented: • Creating objects dynamically • DOM manipulation for real-time UI updates • Event handling (keyboard interactions) • Fetch API for asynchronous data handling • Understanding HTTP/HTTPS requests • Changing UI elements dynamically (like colors & content) 🌐 Project Highlight: Wikipedia Search Application I built a dynamic web application that allows users to search and fetch real-time data from an API. ✨ Key Features: • Live search using user input • API integration using Fetch • Dynamic rendering of results (title, link, description) • Loading spinner for better user experience This project helped me understand how frontend and backend concepts connect to create real-world applications. 📌 Through this journey, I realized that JavaScript is not just a language — it's the bridge that makes websites interactive and intelligent. I’m continuously learning and improving, and I’m excited to build more impactful projects ahead! #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #Projects #APIs #DynamicWebApps #CodingJourney

Stop using JavaScript to change your layout. CSS can handle more of it than you think. A lot of “dynamic” layouts do not actually need scripts. You can already build them with plain HTML and CSS. The trick is simple. Use a checkbox or radio as a trigger. Use :checked to detect its state. Then use :has() so the parent can react. Something like this: .container:has(input:checked) .child {  /* dynamic styles here */ } That is the core idea. Once the input is checked, the layout can switch instantly. Grid columns. Spacing. Order. Visibility. Whatever you need. For example, you can turn a compact layout into a wider one: .container {  display: grid;  grid-template-columns: 1fr 1fr; } .container:has(#toggle:checked) {  grid-template-columns: 2fr 1fr; } Or swap a card view for a denser layout: .gallery:has(#compact:checked) {  grid-template-columns: repeat(4, 1fr); } Just CSS reacting to user input. This works really well for dashboards, galleries, product pages, blog layouts, or any UI where the user wants to control how content is displayed. It is one of those patterns that feels small at first. But once you start using it, you realize how much JavaScript it can replace. If you want to build complex components using only HTML and CSS,   I wrote the ebook "You Don't Need JavaScript" to help you level up your CSS skills:   👉 https://lnkd.in/e9qjTXSA

Now we can do much more with CSS, without relying on Javascript libraries. Anchor, Popover, Transitions, custom Select, and more... https://lnkd.in/e5vPqD7w

Pretext a new JavaScript library just flipped how web apps have measured text for decades. Every web app has done it the same way: inject text into a hidden DOM element, read offsetHeight, throw it away. Simple enough until content starts arriving token by token. With LLM powered chat interfaces now everywhere, this is a problem the entire industry is quietly hitting. Text streams in continuously, the UI needs to know how tall each message is in real time for scroll anchoring, layout stability, keeping the interface from jumping as responses grow. Each offsetHeight call triggers layout reflow. On mobile that's 10-30ms per read. At streaming speed, across multiple concurrent message threads, you debounce, approximate, cache. It holds. But you're negotiating with the browser, not working with it. Pretext's premise: text measurement doesn't need the DOM. It's arithmetic. If you know the rendered width of each word, you walk the text, track a running total, and insert a line break when it exceeds the container width. Height is lines x line height. The browser does this internally during reflow. Pretext does it in userland, without the rest of the machinery. Two functions: prepare() measures each word segment once using Canvas measureText() and caches the results. A one-time cost of ~0.1ms per font configuration. layout() pure arithmetic over cached widths. Returns exact height and line count. ~0.0002ms per call hundreds of times faster than DOM measurement. No reflow. Zero DOM access. One prepare() per font config. Then layout() at any container width mobile, tablet, desktop with just arithmetic. On resize: skip prepare(), only rerun layout(). What this unlocks: • Streaming interfaces exact heights on every token. Pixel perfect scroll anchoring from character one. • Virtual scrolling measure all row heights before mounting a single DOM element. • Server-side layout Node.js has no DOM, but it runs Pretext. Pre-compute heights on the server, eliminate layout shift on first load entirely. It's not a workaround, it's a different model. Pretext is built by Cheng Lou — ex-React core team at Facebook, creator of react-motion. MIT licensed. 15KB. Zero dependencies. Framework agnostic. 35k+ GitHub stars. If you've ever approximated text height and accepted the jank as the cost of doing business this is worth a look. See what zero DOM text layout looks like in practice https://lnkd.in/d38_Gbd7 #FrontendArchitecture #WebPerformance #ReactJS #JavaScript #SystemDesign #FullStack

🚀 Learn HTML Script Element: Want to make your website interactive and dynamic? The HTML <script> element is the key! The <script> tag is used to add JavaScript to your webpage, allowing you to create features like alerts, animations, form validation, and much more. It plays a major role in making modern websites fast and user-friendly. 💡 In this guide, you’ll learn: ✔️ What the <script> element is ✔️ How to use it in HTML ✔️ Internal vs External JavaScript ✔️ Why it’s important for web development 🔗 Read the full article here: https://lnkd.in/gTu-QM7f #HTML #JavaScript #WebDevelopment #FrontendDevelopment #CodingForBeginners #LearnToCode #WebDesign #Programming #TechSkills #DeveloperJourney #webdesigningtheory

𝗧𝗵𝗲 𝗕𝗮𝗰𝗸𝗯𝗼𝗻𝗲 𝗼𝗳 𝗪𝗲𝗯 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝗧: 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝗍 𝗗𝗢𝗠 𝗕𝗮𝘀𝗶𝗰𝘀 The JavaScript DOM is a programming interface that lets you interact with HTML elements. It makes web pages dynamic by changing content, structure, and style using JavaScript. You can access and modify HTML elements easily using JavaScript. The DOM represents a web page as a tree structure where each element is an object. Main parts of the DOM tree are: - Document: the entire web page - HTML: root element - Head: metadata - Body: visible content - Elements: tags like p, h1, etc. You can select elements using: - document.getElementById("id") - document.getElementsByClassName("class") - document.getElementsByTagName("p") - document.querySelector("p") You can change content using: - innerHTML - textContent You can create new elements using document.createElement(). Then you add content using textContent or innerHTML. Finally, you append the element to an existing element using appendChild. You can modify HTML attributes using setAttribute, getAttribute, and removeAttribute. You can handle events using addEventListener. Understanding DOM basics is key to building interactive websites. Source: https://lnkd.in/gAdP33-Y

Introducing ChaiTailwind: A Lightweight Utility-First CSS Engine Built with Vanilla JavaScript. Over the past few days, I’ve been exploring how modern utility-first frameworks like Tailwind CSS work behind the scenes. As part of this learning journey, I built a small experimental project called ChaiTailwind. ChaiTailwind is a JavaScript-powered styling engine that dynamically applies styles based on class names such as chai-px-4, chai-text-xl, and more — without relying on any external CSS framework. The goal was to better understand DOM manipulation, class parsing, and how scalable design systems can be structured at a fundamental level. Key Highlights: • Dynamic style generation using meaningful utility classes • Lightweight and dependency-free approach • Built entirely with Vanilla JavaScript • Easily extendable for custom UI utilities and design systems This project is primarily focused on learning and exploration, helping deepen my understanding of frontend architecture and performance considerations. I believe that building things from scratch is one of the best ways to truly understand how modern tools and frameworks operate internally. Looking forward to enhancing this further and exploring more advanced capabilities. Live: https://lnkd.in/gqjRXGvs #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #UIEngineering #TailwindCSS #SoftwareEngineering