DOM Mastery: JavaScript Control & Manipulation

Hello everyone 👋 Welcome to Day 14 of my JavaScript journey 🚀 Today I went deeper into DOM Manipulation and learned how to create, delete, and modify elements dynamically using JavaScript. This is where webpages stop being static and start becoming interactive and dynamic 🌐 🧱 Creating & Adding Elements I practiced how to: • Create new elements using document.createElement() • Add text using innerText • Add classes using classList.add() • Insert elements into the page with appendChild() Now I can dynamically generate content instead of writing everything manually in HTML. ❌ Removing Elements I learned how to remove elements using: • .remove() (modern method) • Targeting elements like lastElementChild This showed me how UI elements can be controlled and updated in real time. 🎨 Modifying Styles & Classes Instead of only using inline styles, I learned the better approach: ✔ classList.add() ✔ classList.remove() ✔ classList.toggle() ✔ classList.contains() This is how real projects manage styling through CSS classes. 🏷 Working with Attributes I practiced: • setAttribute() and getAttribute() • Using dataset to store custom data inside elements This helped me understand how extra information can be attached to HTML elements. 🔤 Content Handling I also understood the difference between: • innerText • textContent • innerHTML This is important for controlling how text and HTML content are displayed. 🧪 Hands-On Practice To apply everything, I created a small HTML practice page and: • Dynamically added and removed elements • Changed styles using JavaScript (like document.body.style.backgroundColor ) • Toggled classes to change shapes and appearance • Tested attribute changes and data storage This practical work helped me understand how all these concepts come together in a real webpage. 🎯 Day 14 Takeaway Today made it clear how JavaScript controls the structure, style, and content of a webpage dynamically. From creating elements to modifying styles and attributes, I’m now building real interactive behavior using JavaScript 💻 Next step: DOM Events and user interaction 🚀 #javascript #dom #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #selflearning #programming

🚀 Making the UI Interactive with JavaScript DOM | HTML, CSS, SCSS ✨ This project focuses on real DOM manipulation, where I built a feature to increase and decrease items dynamically using JavaScript. Instead of keeping the page static, I worked on how user actions directly update the UI through DOM logic. ➡️ What I implemented here: • Dynamic item increment & decrement using JavaScript DOM • Event handling and real-time UI updates • Clean structure with HTML and organized styling using CSS & SCSS • Understanding how state-like behavior works without any frameworks ➡️ For me, this was a big step moving from design-focused tasks to logic-driven interactivity. Learning how small DOM changes can control user experience really changed the way I look at frontend development. Mentor: Sarthak Sharma | Harsh Vandana Sharma | Ankur Prajapati | Sheryians Coding School Still building. Still improving. One project at a time 🚀 Would love to hear your feedback 👀 #JavaScript #DOM #FrontendDevelopment #HTML #CSS #SCSS #WebDevelopment #LearningInPublic #DeveloperJourney #SheryiansCodingSchool #Cohort2

Ever clicked a button on a webpage and noticed everything else still works smoothly — animations continue, inputs respond, timers fire — even though some heavy operation is happening in the background? That seamless experience is powered by the 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 in JavaScript. JavaScript is single-threaded, which means it can execute only one piece of code at a time. Yet modern applications handle API calls, timers, user interactions, and animations concurrently. The secret behind this apparent multitasking is the Event Loop. At its core, the Event Loop coordinates three major components: • The 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 – where synchronous code executes • The 𝗪𝗲𝗯 𝗔𝗣𝗜𝘀 / 𝗕𝗿𝗼𝘄𝘀𝗲𝗿 𝗔𝗣𝗜𝘀 – where asynchronous tasks like `setTimeout`, DOM events, and fetch requests are handled • The 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗧𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 & 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲) – where completed async tasks wait to be executed Here’s how it works: When synchronous code runs, it goes directly into the call stack. If an asynchronous function like `setTimeout()` or `fetch()` is encountered, it’s handed off to the browser APIs. Once completed, its callback is pushed into a queue. The Event Loop constantly checks: Is the call stack empty? If yes, it moves queued callbacks into the stack for execution. Microtasks (like Promises) are prioritized over macrotasks (like setTimeout), which is why Promise callbacks run before timer callbacks — even if the timer delay is zero. This priority model ensures predictable execution order. Why is this needed? Without the Event Loop, JavaScript would block entirely during long-running tasks. No UI updates. No responsiveness. No scalability for interactive applications. The Event Loop enables non-blocking behavior while keeping JavaScript simple and single-threaded. Key use cases include: • Handling API requests without freezing the UI • Managing timers and intervals • Processing user events (clicks, input, scroll) • Coordinating Promise-based workflows • Powering frameworks like React and Node.js servers Understanding the Event Loop isn’t just about interviews — it’s about writing predictable, performant, and bug-free asynchronous code. Master the flow, and you master JavaScript’s true power. #JavaScript #WebDevelopment #FrontendDevelopment #SoftwareEngineering

Different Ways to Access DOM Elements in JavaScript While learning JavaScript, one of the first things that clicked for me was this: 👉 The browser becomes powerful when JavaScript can talk to the DOM. The DOM (Document Object Model) represents the structure of a web page, and accessing elements correctly is the first step to making pages interactive. Here are the most common ways 👇 ✅ 1️⃣ getElementById() Accesses a single element using its unique ID. document.getElementById("header"); ✔ Fast and straightforward ✔ Best when element ID is unique ✅ 2️⃣ getElementsByClassName() Selects elements based on class name. document.getElementsByClassName("card"); ✔ Returns a collection ✔ Useful when multiple elements share styling ✅ 3️⃣ getElementsByTagName() Selects elements using HTML tag names. document.getElementsByTagName("p"); ✔ Useful for generic selections ✔ Returns multiple elements ✅ 4️⃣ querySelector() Selects the first matching element using CSS selectors. document.querySelector(".card"); ✔ Flexible ✔ Supports CSS selector syntax ✅ 5️⃣ querySelectorAll() Selects all matching elements. document.querySelectorAll(".card"); ✔ Modern and commonly used ✔ Returns a NodeList 💡 My learning takeaway: Earlier, JavaScript felt like just logic. But once I started interacting with DOM elements, it felt like giving life to the UI. Small concepts like this make a big difference when moving towards frontend and full stack development. Which DOM selection method do you use most in your projects? 👇 #JavaScript #FrontendDevelopment #WebDevelopment #DOM #LearningJourney #FullStackDeveloper #Programming #SoftwareEngineering #DeveloperGrowth

🎯 One Click. Infinite Possibilities — Random Text Generator using JavaScript DOM ✨ Experimented with the power of JavaScript DOM manipulation by building a small but creative feature a button that generates random dynamic text directly on the screen every time it’s clicked. ➡️ This project wasn’t just about visuals, it was about understanding how events, logic, and the DOM work together to transform a static page into something alive and unpredictable. What makes this practice special for me: • Event-driven interaction using JavaScript • Dynamic element creation & DOM updates • Mixing HTML structure with CSS/SCSS styling and logic-based behavior • Exploring creativity through code instead of relying on frameworks Sometimes the smallest experiments teach the biggest lessons and this one helped me see how a single click can completely change the user experience. Mentor: Sheryians Coding School | Sarthak Sharma | Harsh Vandana Sharma | Ankur Prajapati 🧠 Tech Stack: HTML | CSS | SCSS | JavaScript (DOM) #JavaScript #DOM #FrontendDevelopment #CreativeCoding #WebDevelopment #HTML #CSS #SCSS #LearningInPublic #DeveloperJourney #BuildInPublic

Hello everyone 👋 Welcome to Day 20 of my JavaScript learning journey 🚀 Today I built a Real-Time Digital Clock using HTML, CSS, and JavaScript, where the time updates every second automatically. This project helped me understand how JavaScript works with time, intervals, and continuous DOM updates. ⏰ Project: Digital Clock The clock: ✔ Displays the current time (HH:MM:SS) ✔ Updates automatically every second ✔ Uses a clean and minimal UI ✔ Runs continuously without page reload It feels simple on the surface, but it teaches an important real-world concept. 🔧 Concepts I Applied In this project, I worked with: 🔹 Date() object to get current time 🔹 toLocaleTimeString() for readable format 🔹 setInterval() to update time every second 🔹 DOM selection using getElementById() 🔹 Updating content dynamically with innerHTML This showed me how JavaScript can continuously update the UI in real time. 🧠 What I Learned • How real-time applications update data • How setInterval() works behind the scenes • How JavaScript handles time-based logic • How DOM updates can run continuously without user input This project made me more comfortable with timers and live data updates. 🎯 Day 20 Takeaway From handling user clicks to handling time itself, JavaScript keeps getting more powerful ⏳💻 Building small projects like this is helping me connect concepts and gain confidence with real-world frontend logic. Next ideas: 👉 Stopwatch / Timer 👉 Countdown Clock 👉 Date & Time Dashboard #javascript #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #dom #projects #selflearning

Hello everyone 👋 Welcome to Day 19 of my JavaScript learning journey 🚀 Today I built a simple yet powerful Color Changer Web App using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM events and dynamic style manipulation. 🎨 Project: Color Changer The app allows users to: ✔ Click on different color buttons ✔ Instantly change the background color of the webpage ✔ Experience real-time UI updates using JavaScript Each button represents a color, and clicking it updates the page background dynamically. 🔧 Concepts Applied This mini project helped me apply: 🔹 Selecting multiple elements using querySelectorAll() 🔹 Looping through elements using forEach() 🔹 Handling click events with addEventListener() 🔹 Using the event.target object 🔹 Dynamically changing styles using document.body.style 🔹 Conditional logic to handle different button actions Even though the project is simple, it covers core DOM + Events fundamentals used in real applications. 🧠 What I Learned • How multiple elements can share the same event logic • How JavaScript directly controls page styles • Why event.target is important in event handling • How UI reacts instantly to user interaction This project made DOM events feel much more natural and intuitive. 🎯 Day 19 Takeaway Small projects like this build strong confidence. Each click, event, and style change makes JavaScript feel more real 💻✨ Now moving forward toward: 👉 Better UI logic 👉 Cleaner event handling 👉 More interactive DOM-based projects On to the next challenge 🚀 #javascript #dom #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #projects #selflearning

🚀 JavaScript Object Prototypes – My Learning Notes While revisiting JavaScript fundamentals, I spent time understanding object prototypes, and it finally clicked. Sharing my notes in case it helps someone else too 👇 🔹 What is a Prototype? In JavaScript, prototypes are the mechanism by which objects inherit features from one another. Every object has a built-in property called its prototype. 🔹 Prototype Chain The prototype itself is also an object, which can have its own prototype — forming a prototype chain. This chain ends when we reach an object whose prototype is null. 🔹 Accessing the Prototype The property that points to an object’s prototype is not called prototype. Although browsers use __proto__, the standard and recommended way is: Object.getPrototypeOf(myObject); 🔹 Shadowing Properties When accessing a property, JavaScript first looks in the object itself. If not found, it searches up the prototype chain — this is called property shadowing. 🔹 Setting a Prototype You can set prototypes in two main ways: 1.Using Object.create() 2.Using constructor functions 🔹 Why Prototypes Matter Prototypes make JavaScript extremely powerful and flexible. They enable code reuse and support a form of inheritance, where objects can be more specialized versions of other objects. 📌 For me, understanding prototypes wasn’t about memorizing syntax — it was about grasping how JavaScript thinks. And once you get that, so many concepts start making sense. Always learning, always refining ✨ #JavaScript #WebDevelopment #LearningInPublic #FrontendDevelopment #Prototypes #CodingJourney

Hello everyone 👋 Welcome to Day 18 of my JavaScript learning journey 🚀 Today I built a fully functional Calculator Web Application using HTML, CSS, and JavaScript. This project helped me apply DOM, events, and logic together in a real-world style UI. 🧮 Project: Calculator App The calculator supports: ✔ All basic arithmetic operations (+, -, *, /, %) ✔ Clear all input (AC) ✔ Delete last digit (DEL) ✔ Decimal operations ✔ Real-time input display ✔ Instant result calculation Everything works dynamically without page reload. 🔧 Concepts Applied This project allowed me to apply multiple JavaScript concepts together: 🔹 DOM selection (getElementById, querySelectorAll) 🔹 Looping through elements using Array.from() 🔹 Event handling with addEventListener() 🔹 Working with strings to build expressions 🔹 Conditional logic for different button actions 🔹 Using eval() to calculate expressions 🔹 Updating UI dynamically using input.value I also focused on clean UI using CSS and interactive button handling. 🧠 What I Learned • How calculator logic works behind the scenes • Managing user input as strings • Handling special buttons like AC and DEL • Connecting button clicks with dynamic UI updates • Writing compact and readable event-based logic This project made me much more confident working with DOM events and real UI logic. 🎯 Day 18 Takeaway From console programs to real browser-based applications the progress feels real 💻✨ Building projects like this shows how JavaScript fundamentals turn into actual usable applications. Next step: 👉 Improving calculator logic 👉 Handling edge cases 👉 More interactive frontend projects Onward to bigger challenges 🚀 #javascript #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #dom #projects #selflearning

We're sleeping on the <dialog> element. 💡 After building countless modals with JavaScript libraries and CSS hacks, I finally gave the native HTML <dialog> element a serious try. My verdict: It's a game-changer that more developers should be using. Why <dialog> deserves your attention: -> Native accessibility - Built-in focus trapping, ESC closing, and screen reader support -> Simpler JavaScript - .showModal() and .close() vs managing z-index and event listeners -> Backdrop styling - Style the ::backdrop pseudo-element directly with CSS -> Lightweight - No dependencies, smaller bundle size The reality check: Browser support is now excellent (93% global). Polyfills exist for the rest. We're past the "waiting for support" phase. My prediction: In 2 years, <dialog> will be the standard way we build modals, with libraries becoming the exception rather than the rule. Am I crazy for thinking this? Have you used <dialog> in production? What's been your experience? 👇 #WebDevelopment #HTML #Frontend #JavaScript #Accessibility #WebStandards #Programming #WebDev #100Devs