Learning JavaScript Events and Event Handling

Built some cool stuff with HTML, CSS & JavaScript 👨💻🔥 Instead of just learning concepts, I focused on building mini projects to understand how things actually work. 🎯 This demo shows: – Real-time interactivity – JavaScript logic in action – Clean & simple UI 🚀 Live Demo: https://lnkd.in/gq48vQf5 📌 Code on GitHub (link in comments) Feedback is welcome! 😊 #ClearingDrafts #FrontendDevelopment #JavaScriptProjects #StudentDeveloper #GitHubPages

Today I practiced DOM manipulation and event handling by building a Counter Application. 🔹 Features: Increment button ➕ Decrement button ➖ Reset button 🔄 Dynamic value update using JavaScript Simple UI with styling and box-shadow 💡 What I learned: How to use getElementById() Updating content using innerHTML Handling button click events Managing state using variables Small projects like this help strengthen core JavaScript fundamentals. Excited to keep learning and building more projects every day 💻✨ #HTML #CSS #JavaScript #WebDevelopment #FrontendDeveloper #CodingPractice #100DaysOfCode

Today I practiced generating my checkout page dynamically using JavaScript. Instead of writing all the HTML manually, I used JavaScript to create the elements and display products on the page. It made me realize how powerful the DOM is when building real applications. I also fixed a small but confusing bug with radio buttons. When I selected an option for one product, it affected other products too. I learned that radio buttons are grouped by their "name" attribute — so each product needs its own unique name. What I learned today: JavaScript can build your entire UI dynamically. Small bugs usually teach big lessons. Understanding how things work is more important than just making them work. Slowly but surely improving every day. #Day4OfTakingJavaScriptSeriously The radio selector input is the circle with black dot inside

Everyone who learns JS, should not miss this ❌ Understanding how DOM works is the base for mastering other advanced front end libraries and technologies. 📌 Think of the DOM as a tree-like structure that represents the elements of a web page. 📌 It provides a structured way to access, modify, and interact with the content and structure of HTML documents. Learn the basics of JS from JavaScript Mastery and w3schools.com Follow Scribbler.Live to explore more in JavaScript Share this with a friend who might find it useful #JustScribble.

#Day75 🌈🛠️ Weekend Wrap-Up: JavaScript & Bootstrap Hands-On Practice ⚡ Spent this weekend diving deeper into JavaScript by building interactive UI behavior and strengthening my DOM manipulation skills 🔍💻 📌 What I practiced: 🧲 Class Handling in JavaScript ➕ Adding styles dynamically using classList.add() ➖ Removing styles using classList.remove() 🎯 Math Utilities 🎲 Math.random() to generate random values 📈 Math.ceil() to round numbers upward 🧱 Bootstrap Display Utilities 👀 Showing and hiding elements dynamically using Bootstrap display classes with classList() Each practice helped me better understand how JavaScript controls UI behavior in real-time 🌟🚀 Looking forward to building more interactive web components! #Nxtwave #CCBP #100DaysOfCode

Day 57/100 — The JavaScript Event Loop finally made sense 🔄 For a long time I used setTimeout, Promise, and async/await… but honestly — I never truly understood why JavaScript behaves the way it does. Today I learned about the Event Loop — and everything clicked. JavaScript is single-threaded. So how does it still handle multiple tasks at once? Because of 3 things working together: 🧠 Call Stack – where code runs step by step 📬 Web APIs – timers, DOM events, fetch requests handled outside JS 📋 Callback Queue / Microtask Queue – waiting tasks And the Event Loop keeps checking: “Is the call stack empty? If yes → push the next task.” The biggest surprise for me: console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output is NOT what beginners expect: Start End Promise Timeout Because microtasks (Promises) run before macrotasks (setTimeout) 💡 Realization: JavaScript is not slow… I just didn’t understand its scheduling system. Now async code feels predictable instead of magical. Learning fundamentals is like turning chaos into logic. #100DaysOfCode #JavaScript #EventLoop #AsyncJS #WebDevelopment #LearningInPublic

Over the last two days, I’ve been strengthening my JavaScript fundamentals and exploring how things actually work behind the scenes. Here’s what I learned: ✅ Array Methods ✅ reduce() method ✅ Finding maximum in an array ✅ Spread operator (...) ✅ Rest operator ✅ Destructuring (Arrays & Objects) ✅ Introduction to DOM ✅ Query Selectors ✅ Manipulating Attributes ✅ classList property ✅ Page Navigation using JavaScript Understanding how JavaScript interacts with the DOM really changed the way I look at web pages. It’s amazing how dynamic websites are built just by manipulating elements in the browser. Step by step, getting closer to becoming a better developer 💻 #JavaScript #WebDevelopment #FrontendDeveloper #LearningJourney #100DaysOfCode #DOM

JAVASCRIPT NOTES — PART 2 (Arrays • Objects • DOM) Foundations build clarity. Practice builds confidence. This post focuses on the parts of JavaScript that actually make web pages interactive: • Arrays and important methods (map, filter, reduce) • Objects and destructuring • DOM manipulation • Events and event propagation • this keyword & event delegation Understanding these concepts properly is where JavaScript starts feeling practical. Before async, before frameworks — this layer must be clear. 📌 Save this if you're strengthening your JS fundamentals. #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #InterviewPrep #StudentDeveloper #Consistency

Day 3/30 JavaScript Challenge: Giving the Browser a Voice! 🗣️ I just finished Day 3 of my 30-day JavaScript series, and today was all about the Web Speech API. I built a Text-to-Voice application that turns any typed input into spoken words instantly! It’s amazing how much functionality is built right into the browser without needing any external libraries or APIs. Key Learnings Today: => Using SpeechSynthesisUtterance to handle voice properties. => Manipulating the DOM to capture user input. => Creating a clean, responsive UI with CSS gradients and transitions. Live Demo: https://lnkd.in/decEYAvw Onward to Day 4! ⚡ #JavaScript #WebDevelopment #CodingChallenge #100DaysOfCode #Frontend #LearningToCode