Learned Event Bubbling and Timing in JavaScript

Just built a Bookmark Manager using JavaScript! 🚀 This Allows users to save their favorite website links dynamically. By entering a site name and URL, the app instantly adds them to an unordered list, with the name and clickable link displayed neatly. ✨ Key Features: ✅ Input validation using change and submit events 🧩 Dynamic list creation using DOM methods ⚠️ Error handling for empty fields 🧹 Automatically clears inputs after each entry 💡 This small project helped me understand: ⚡ The power of addEventListener() and event.preventDefault() 🧠 How to manipulate the DOM effectively 🛡️ The importance of form validation in user interfaces #JavaScript #WebDevelopment #LearningByDoing #CodingJourney #HTML #CSS #Projects #DOMManipulation #NxtWave

Web Development – DOM Manipulation & Events Today’s practice focused on DOM Manipulation and Event Handling in JavaScript. We selected elements, modified their content and attributes using innerHTML, setAttribute(), and insertAdjacentHTML(), and explored how to hide or unhide elements dynamically. We also handled single and double click events to change text in real time — a practical example of how JavaScript interacts with the DOM to make web pages dynamic and responsive. GitHub: https://lnkd.in/euDPucHx #JavaScript #DOMManipulation #WebDevelopment #FrontEnd #HTML #CSS #Coding #LearnToCode #SoftwareDevelopment

🎲 Just built a Dice Game using HTML, CSS, and JavaScript! Here’s a short demo of the website in action 👇 💡 What I learned: -DOM manipulation and event handling in JavaScript -Generating random numbers for dice rolls -Dynamically updating images and text in the browser This project helped me connect my frontend design with real JavaScript logic to make something interactive and fun. 🔗 Check out the complete code on my GitHub: 👉 [https://lnkd.in/dDgrvdeB] Would love your feedback or suggestions for improvement! 🙌 #WebDevelopment #JavaScript #Frontend #HTML #CSS #CodingProjects #DeveloperJourney #LearningByDoing #StudentProjects

👇 💣 Day 38/100 – Bomb Defuser Timer using JavaScript ⏱ Thrilled to continue my #100DaysOfCode journey with an exciting mini-project — a Bomb Defuser Timer App 💥 In this project, I created a countdown timer that ticks down from 10 seconds, and the user must type “defuse” before it hits zero to prevent the bomb from exploding! 🧨 ✨ What I learned today: 🔹 How to use setInterval() and clearInterval() for timer control ⏳ 🔹 Handling keyboard events (like pressing Enter) 🔹 Real-time DOM updates for dynamic interactions A fun way to practice JavaScript timing and event handling — definitely one of the most thrilling projects so far! ⚡ #100DaysOfCode #JavaScript #WebDevelopment #Frontend #LearningByDoing #NxtWave #CCBP #CodingChallenge #HTML #CSS #DOMManipulation #TimerApp #JavaScriptProjects

Day 68 of #100daysofcodechallnge Today, I practiced building a Movie Reviews App using HTML, CSS, and JavaScript 🎯 Task Overview: Added HTML elements inside the container with id movieReviewsContainer. Created: An input element (id="titleInput") for movie titles. A textarea (id="reviewTextarea") for reviews. A button (id="addBtn") to add the review. Dynamically displayed the reviews inside the container (id="reviewsContainer"). ⚙️ Functionality Achieved: When the Add button is clicked: ✅ If the movie title is empty → show an alert asking for the title. ✅ Otherwise → add the entered title and review to the reviews section. ✅ Finally, clear the input fields for the next entry. Each day I’m learning how to make web pages more interactive and user-friendly through JavaScript DOM manipulation. #CCBP #NxtWave #100DaysOfCode #WebDevelopment #HTML #CSS #JavaScript #CodingChallenge #FrontendDevelopment #LearnCoding #PracticeMakesPerfect #DevelopersCommunity #CodeEveryday #TechJourney #SoftwareDevelopment #CodingIsFun #BuildInPublic

My web development journey Day(21) - Javascript Lecture(13) Javascript DOM Manipulation what i learned in this video: What the DOM is and the difference between the 'window' and 'document' objects. Modern selection methods like 'querySelector' and 'querySelectorAll'. Traversing the DOM to find parents, children, and siblings. The critical difference between .innerHTML, .textContent, and .innerText. Security Deep Dive: What an XSS Attack is and how .textContent protects you. The modern way to handle CSS classes with the 'classList' API (.add, .remove, .toggle). Creating, adding, and removing elements dynamically. Performance Pro-Tip: How to use 'DocumentFragment' to efficiently add thousands of elements. #CoderArmy #webdevelopment #javascript #css

💻 Web Development Journey Update – JavaScript & DOM Just wrapped up Sections 12–17 of The Complete Full-Stack Web Development Bootcamp by Dr. Angela Yu 🎯 🔑 Key Takeaways: ✨ Core JavaScript concepts – functions, loops, conditionals ✨ DOM manipulation – making pages react to user actions ✨ Event handling & randomization – bringing interactivity to life 🎮 Project Highlight: Built the Dicee Game, where two dice roll on refresh and a winner is declared instantly. A perfect mini-project to understand logic + real-time UI updates! 🎥 Attached a short screen recording below showing the game in action 👇 Feeling great to see the shift from static to interactive web pages — moving next into Advanced JavaScript & jQuery! 🚀 #WebDevelopment #JavaScript #DOM #FrontendDevelopment #CodingJourney #AngelaYu

Just built a small yet cool project — a Color Changer App 🎨 using plain JavaScript! It’s a simple idea: click any color button, and the entire background changes instantly. But behind the scenes, I got hands-on practice with some core JS concepts — like event listeners, DOM manipulation, and style updates through JavaScript. It’s amazing how even small projects like this can boost your understanding of the basics. Step by step, learning and improving every day 💻✨ #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #HTML #CSS #LearningByBuilding #WebDeveloper #DOMManipulation #Frontend #ProgrammerLife #100DaysOfCode #ExlonTech

Today I built a simple yet powerful project — a To-Do List App using HTML, CSS, and JavaScript! 📝 This project helped me understand so many new things like: ✨ How to select and update elements using the DOM ✨ How to use localStorage to keep data even after page refresh ✨ How to handle button clicks and user input events ✨ How to use array methods like .forEach() and .filter() ✨ How small things like data-id make big differences in logic 💡 It was an amazing hands-on experience seeing my code come to life — adding tasks, marking them complete, and deleting them, all with just a few lines of JavaScript. Here’s a short video demo 🎥 showing my app in action 👇 Building this gave me more confidence to explore deeper JavaScript concepts and DOM manipulation. #JavaScript #100DaysOfCode #CodingJourney #FrontendDevelopment #WomenInTech #WebDevelopment #LearningByDoing

🧠 Day 37/100 – KeyCode Detector using JavaScript ⚡ Continuing my #100DaysOfCode challenge with another fun and interactive project! Today, I built a KeyCode Detector App that shows the key codes of the keys you press. 🎹 ✨ What I learned today: 🔹 How to use keyboard events (keydown) in JavaScript 🔹 How to dynamically create and update HTML elements using the DOM 🔹 Improved understanding of event objects and how browsers handle user input This project is simple yet powerful — great for understanding real-time interactions between users and web applications. 💡 #100DaysOfCode #JavaScript #WebDevelopment #Frontend #LearningByDoing #CodingChallenge #NxtWave #CCBP #HTML #CSS #DOMManipulation #KeyboardEvents