JavaScript DOM and BOM explained

🚀 Todo Application – JavaScript Project I recently developed a persistent Todo Application that helps users manage and track their daily tasks efficiently. 🔷 Key Features: ◾ Implemented CRUD operations (Create, Read, Update, Delete) for managing tasks. ◾Displayed todos using HTML list elements and styled the interface using CSS and Bootstrap. ◾Handled user interactions with JavaScript event listeners. ◾Dynamically updated the UI using JavaScript DOM manipulation. ◾Used Arrays and Objects along with their methods to perform todo list CRUD operations. ◾Implemented browser Local Storage so that the todo data is saved in the browser and remains available even after refreshing or reloading the page. 💻 Technologies Used: HTML | CSS | Bootstrap | JavaScript This project helped me strengthen my understanding of DOM manipulation, event handling, data structures, and local storage in JavaScript, while building an interactive and persistent Web application. #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #Bootstrap #TodoApp #LearningByBuilding

JavaScript Tip 💡: Remove Duplicates from an Array using Set Simplify duplicate removal in JavaScript arrays with the Set object! Just wrap your array in Set to remove duplicates, then use the spread operator to convert it back to an array. Watch the short video for an example! Hope this helps ✅ Do Like 👍 & Repost 🔄   #html #css #javascript #react #web

DOM Manipulation in JavaScript — How it Works 📄 HTML This defines the structure of the webpage (buttons, text, images). 🌳 DOM The browser converts HTML into the Document Object Model — a tree-like structure that JavaScript can access. ⚙️ JavaScript (JS) JavaScript interacts with the DOM to control elements on the page. 🎯 Select Element JavaScript selects a specific element like a button, text, or image. 👆 User Event A user action happens (click, input, hover). 🔄 Update Page JavaScript updates the DOM, and the browser reflects the change instantly without reloading the page. This entire flow is called DOM manipulation — and it’s what makes websites interactive 🚀 #JavaScript #WebDevelopment #ProgrammingBasics

Today I learned what really happens when a user clicks a button in the browser and where the Browser Object Model (BOM) fits into the flow. The browser first parses HTML and creates the DOM in memory. JavaScript then attaches event listeners to elements. When a click occurs, the OS sends the event to the browser process. The browser determines which DOM element was clicked and dispatches the event to the registered listener. That listener runs synchronously in the JavaScript call stack. Now, where does BOM come in? Features like setTimeout() and alert() are not part of core JavaScript. They are provided by the browser environment — the BOM — accessible via the window object. When setTimeout() is called, the JavaScript engine delegates the timer to the browser’s Web APIs (BOM layer). After the timer completes, the callback is placed in the task queue and executed via the event loop when the call stack is empty. Understanding the separation between DOM (document structure), JS engine (execution), and BOM (browser-provided APIs) has clarified many concepts for me. Am I going in the right direction and understanding this correctly? Correct me if I’m wrong. #JavaScript #Frontend #BrowserInternals #WebDevelopment 

I recently developed a To-Do List Web Application using HTML, CSS, and JavaScript. This project helps users manage daily tasks through a simple and interactive interface. Users can add tasks and remove them dynamically without refreshing the page. While building this project, I worked with JavaScript DOM manipulation, event handling, and front-end interface design to create a clean and user-friendly task management tool. 🔗 Live Webpage: https://lnkd.in/geiAPDgk 💻 Source Code: https://lnkd.in/gA9vAyjN #WebDevelopment #HTML #CSS #JavaScript #Learning

🚀 We use window, document, and localStorage daily… but do we really understand the difference? One concept that clears a lot of confusion in frontend interviews and debugging is: 👉 DOM vs BOM 🧩 What is DOM (Document Object Model)? The DOM represents your HTML as a tree structure. It allows JavaScript to read and modify the document. Think of it as: “Everything inside the webpage.” You can: -Select elements -Change content -Add event listeners -Modify styles Example: const heading = document.querySelector("h1"); heading.style.color = "blue"; Here, we’re interacting with the structure of the page. 🌐 What is BOM (Browser Object Model)? The BOM represents the browser environment itself. It allows interaction with things outside the document. Think of it as: “Everything around the webpage.” It includes: -window -location -history -navigator -localStorage Example: console.log(window.location.href); localStorage.setItem("theme", "dark"); Here, we’re interacting with the browser — not the HTML structure. 🔎 Simple Difference DOM → Controls the document (HTML content) BOM → Controls the browser (tabs, URL, storage, navigation) DOM is part of the webpage. BOM is part of the browser. 🎯 Why This Matters In interviews and debugging: It helps you explain how rendering works. It clarifies why window exists globally. It improves your understanding of browser behavior. It strengthens your fundamentals beyond just React. Because React eventually manipulates the DOM — and the DOM lives inside the browser. Understanding this foundation makes everything clearer. What confused you more when you were learning — DOM manipulation or browser APIs? 👀 #frontend #javascript #webdevelopment #reactjs #interviewprep

🚀 Mini Project #2 :- Random Quote Generator Today I created a Mini Project – Random Quote Generator using HTML, CSS, and JavaScript 💻✨ In this project, a new quote automatically appears every 2–3 seconds without clicking any button. JavaScript randomly selects a quote from a list and updates it on the screen, making the page dynamic and engaging. 🔹 What I practiced: ✅ DOM Manipulation(DOM Manipulation means changing or controlling the content, structure, or style of a webpage using JavaScript. 💻) ✅ Using Math.random() for random selection ✅ Using setInterval() to update quotes automatically ✅ Creating a simple interactive UI with HTML & CSS Small projects like this help me understand how JavaScript makes websites dynamic and interactive. If you have any suggestions or ideas for improvement, feel free to share them. I’d love to learn and improve! 😊 #Day21 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #CodingJourney #100DaysOfCode

Today I attended a fantastic DOU Live webinar by Сергій Бабіч on the topic: “JavaScript (almost) not needed: how to build functional UI with just HTML & CSS” 🚀 It was eye-opening to see how modern HTML and CSS features let us significantly reduce (or even eliminate) JavaScript and third-party libraries, resulting in simpler, cleaner, more performant code. We covered pure no-JS implementations of: - toggling a list between list and grid layouts with responsive design changes - a simple modal dialog - custom tooltips, tabs, and select-like components All without a single line of JavaScript! What impressed me the most was watching an experienced developer’s approach to project structure and mastering the cascade. Several techniques were either new to me or ones I’d only heard about: - @container queries - @layer for better cascade control - @starting-style - native <dialog> element - the powerful :has() pseudo-class - and a few more gems! I’m already planning to apply several of these ideas to my current landing page project - both to solidify the knowledge hands-on and to make the code cleaner and more maintainable. Who else is experimenting with “CSS-only” interactivity in 2026? What are your favorite modern CSS tricks that replace JS? 😄 Huge thanks to Сергій Бабіч for the inspiring session! #Frontend #CSS #HTML #NoJavaScript #WebDevelopment #LearningInPublic

𝗧𝗵𝗲 𝗛𝗧𝗠𝗟 𝗣𝗼𝗽𝗼𝘃𝗲𝗿 𝗔𝗣𝗜: 𝗡𝗼 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗡𝗲𝗲𝗱𝗲𝗱 You want to build a modal without JavaScript. This is now possible with the HTML Popover API. You can create a fully functional modal with zero lines of JavaScript. Here's how it works: - The popover attribute tells the browser this is a popup and hides it by default. - The popovertarget attribute links the trigger button to the popup. - The ::backdrop CSS pseudo-element styles the overlay behind the modal. The best part: clicking outside the modal or pressing the Esc key closes it automatically. Here are the pros and cons: - Pros: - Zero JavaScript needed - No z-index issues - Out-of-the-box accessibility - Cons: - Old browsers may not support it - Animation can be tricky - Complex logic still requires JavaScript Are you ready to use the HTML Popover API or do you think JavaScript is still the best option? Source: https://lnkd.in/g7QDqEN6

🚀 Learning in Public – JavaScript DOM Today in class we explored the Document Object Model (DOM) in JavaScript. The DOM represents an HTML document as a tree structure where each element becomes an object that JavaScript can interact with. Through DOM manipulation we can make web pages dynamic and interactive. 💡 Things I learned today: • How to select elements using "document.getElementById()" "document.querySelector()" • How to modify content using "innerHTML" and "textContent" • How to change styles dynamically with JavaScript • Handling user actions using "addEventListener()" Example: document.querySelector("button").addEventListener("click", () => { document.getElementById("title").textContent = "Button Clicked!"; }); This simple concept is the foundation behind many interactive web features like forms, to-do lists, and dynamic UI updates. Small steps every day toward becoming a better developer. 💻 thanks Suraj Kumar Jha for the amazing lecture #LearnInPublic #JavaScript #WebDevelopment #DOM #chaicode