🌟 Day 5 — Learning JavaScript 👋 Hi everyone! Today’s learning was amazing 🤩 -> I worked on DOM Manipulation and JavaScript Timers (setInterval & clearInterval). -> To practice these concepts, I built a Bomb Blast Simulation Task , and the entire UI was generated using JavaScript only — no manual HTML tags. 🔹 1. DOM (Document Object Model) Methods: -> DOM allows JavaScript to interact with a webpage dynamically — create elements, modify them, remove them, and handle events. -> Here are the DOM methods I learned and used today: ✅ Selecting / Accessing Elements -> document.getElementById() -> document.getElementsByClassName() -> document.getElementsByTagName() -> document.querySelector() -> document.querySelectorAll() ✅ Creating Elements -> document.createElement() ✅ Inserting Elements into DOM -> append() → add at the end -> prepend() → add at the beginning -> appendChild() → insert a node i-> nsertBefore() → insert before another element -> insertAdjacentHTML(position, HTML) → inserts HTML without removing existing content ✅ Modifying Elements -> .innerText → change text inside an element -> .innerHTML → change HTML content -> .textContent → similar to innerText but shows hidden text too -> .style.property → change CSS from JS (example: element.style.display = "none") -> .setAttribute(name, value) → set attributes (id, class, src) -> .getAttribute(name) → read attribute value -> .classList.add() → add class -> .classList.remove() → remove class -> .classList.toggle() → add/remove class automatically ✅ Removing Elements -> .remove() Using these DOM methods, I created: -> Main container -> Sub-container -> Heading text -> Timer text -> Start & Stop buttons -> Bomb and blast images Everything was built dynamically through JavaScript! 🔹 2. setInterval() & clearInterval(): ⏱ setInterval() → executes code repeatedly at a fixed time ⛔ clearInterval() → stops the interval -> I used this to create a countdown timer. When the timer reached 0 : -> Bomb image hides -> Blast image shows -> Timer stops automatically 💣 Bomb Blast Task (JS Only) ✔ JavaScript dynamically created all HTML content ✔ Timer starts on the "Start" button ✔ Bomb explodes using image toggle ✔ "Stop" button stops the interval immediately This task helped me understand how real-time UI updates work in JavaScript. 🚀 What I improved today -> DOM Manipulation (create, insert, update, delete elements) -> Dynamic UI generation using JavaScript -> Event handling (button click actions) -> Timer control using setInterval() & clearInterval() 🔗 Source Code & Live Demo Links 📂 GitHub Repo: https://lnkd.in/gtxXv9sJ 🌐 Live Demo: https://lnkd.in/gcGjqpKJ #100DaysOfCode #Day5 #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #DOM #CodingJourney #SetInterval #ClearInterval #DynamicUI #Developer #ProjectBuilding

To view or add a comment, sign in

Explore content categories