My Thursday JS project :P I built a simple 30-minute countdown timer using HTML, CSS, and JavaScript. The timer includes START, STOP, and RESET buttons, and it dynamically updates the time every second. Key learnings from this project: Using setInterval to create a countdown Updating HTML elements dynamically with JS (textContent) Connecting buttons with JavaScript using addEventListener Managing timer state safely to prevent multiple intervals from running at once This was a small but super practical exercise for practicing JavaScript fundamentals. Adding comments in the code also really helps me understand each step better! 💡 Tip for learners: Start with small projects like this – they are excellent for building confidence and understanding core JS concepts. #JavaScript #WebDevelopment #Frontend #CodingPractice #LearningByDoing

Stop using .innerHTML for everything! 🛑 I’ve been diving deep into DOM Manipulation in JavaScript today, and it’s eye-opening to see how many ways we can interact with the web page structure. While innerHTML is the "quick and easy" way, it’s not always the most efficient (or safest) for large-scale apps. What I practiced today: • Creating Elements: Using document.createElement to build new list items dynamically. • Optimized Appending: Learning why document.createTextNode is often better for performance than template literals. • The "Edit" Flow: Mastering .replaceWith() and .outerHTML to swap out content on the fly. • The "Clean Up": Using .remove() to target and delete specific elements from the DOM. Coding is all about finding the balance between "making it work" and "making it optimized." Each small optimization in the DOM tree makes for a smoother user experience! #JavaScript #WebDevelopment #CodingJourney #DOMManipulation #FrontendDev #FullStack

🚀 Built a browser-based Image Editor using pure Vanilla JavaScript No libraries. No frameworks. Just HTML, CSS, JavaScript. This image editor lets you upload any image from your device and edit it directly in the browser using filters like: 1.Brightness 2.Contrast 3.Saturation and more The real learning came from working with the <canvas> element — drawing images, manipulating pixel data, and rendering a new edited version in real time. Through this project, I strengthened my understanding of: 👍DOM manipulation with Vanilla JS 👍Canvas drawing & image rendering 👍Handling user input and UI state 👍Writing clean, browser-native logic Projects like this remind me why I enjoy JavaScript so much — it gives you low-level control and forces you to truly understand what’s happening under the hood. Still learning. Still building. Feedback is always welcome 👇 #JavaScript #VanillaJS #WebDevelopment #FrontendDeveloper #CanvasAPI #Projects #LearningByBuilding

Day 46/100 – Understanding JavaScript Events ⚡ Today I focused on learning how JavaScript events work and how user actions connect to functionality. JavaScript events allow us to run code when something happens on a webpage — like a click, keypress, or form submission. What I learned and practiced: ✔️ What events are and why they matter ✔️ Using addEventListener() ✔️ Handling click events on buttons ✔️ Connecting events to functions ✔️ Debugging event-related issues with console.log() Example: When a user clicks a button → An event is triggered → A function runs → The UI updates. Understanding this flow helped me see how interactive websites are built. Day by day, I’m getting more comfortable turning ideas into working features. Day 46 complete ✅ On to Day 47 🚀 #100DaysOfCode #JavaScript #LearningInPublic #WebDevelopment #FrontendDevelopment #CodingJourney #Events

Day 16 | JavaScript – Events & User Interaction 🚀 JavaScript interacts with users through events. I learned how JavaScript communicates with HTML using the DOM (Document Object Model) and responds to user actions like button clicks. Key concepts covered today: Understanding the document object and DOM Using getElementById() to access HTML elements Handling user actions with addEventListener() Writing anonymous functions for event handling Dynamically updating content using innerText This made JavaScript feel more real and interactive, not just theory. Step by step, I’m building confidence in handling real user interactions on web pages. #Day16 #JavaScript #WebDevelopment #FrontendDeveloper #LearningJourney #FullStackDevelopment #DOM #CodingLife #Consistency

Lately, my learning has looked a lot less like “rushing to build things” and a lot more like slowing down and understanding what’s really going on. Another concept that finally clicked for me, getting to understand how it works behind the scenes is the DOM. I used to think of the DOM as just "HTML that JavaScript can manipulate". Studying how the DOM works behind the scenes made me realize that it's actually a very complex API, built around objects, nodes and inheritance. Every element on a page - text, comments, buttons, divs, is represented as a JavaScript object. Everything becomes a node. And what makes it all work is how these nodes inherit properties and methods from one another. That’s why an element can have .textContent, listen to events, and still have special behavior depending on what kind of element it is. Understanding this took a little bit of time, sitting with confusion before things started to connect. But the joy that comes from clarity is worth it. #JavaScript #TechJourney #WebDevelopment #Growth

🔹 Day 1/30 – JavaScript Variables (var, let, const) When I started learning JavaScript, I thought variables were one of the easiest topics. But very quickly I realized that many beginner mistakes actually start from here. Variables are used to store data that JavaScript needs to remember — user input, calculations, API data, and application state. Without variables, JavaScript would not be able to create dynamic and interactive websites. JavaScript provides var, let, and const for declaring variables. While var was used earlier, modern JavaScript mostly relies on let and const because they are safer and more predictable. Understanding scope and reassignment early helps avoid confusion later when working with functions, loops, and frameworks. Today reminded me that strong fundamentals matter more than speed. ❓ Do you use const by default while writing JavaScript? #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

🔑 Variables & Scope — The Foundation of Writing Smarter JavaScript One thing that has really clicked for me recently in JavaScript is how powerful variables and scope actually are. At first, they look simple: * var * let * const But when you truly understand how they work together with scope, your code becomes cleaner, safer, and way less confusing. Here’s what I learned: 👉 var: can be redeclared and reassigned (but can cause unexpected bugs if misused) 👉 let: can be reassigned but not redeclared (great for controlled updates) 👉 const: is constant — once assigned, it cannot change (perfect for fixed values) But the real magic is scope. Scope determines where your variable lives and who can “see” it: * Global scope – accessible everywhere * Function scope – available only inside a function * Block scope– { } creates its own world for let and const This is why a variable may “mysteriously” work in one place and break in another. It’s not JavaScript being wicked — it’s scope doing its job😄 Understanding variables & scope saves you from: ✔️ accidental overwriting ✔️ hard-to-track bugs ✔️ unpredictable behavior And here’s the bigger life lesson 👇 Just like variables have scope, our attention should too. Focus on what matters now, avoid distractions outside your “block,” and your productivity skyrockets. I’m excited to keep going deeper into JavaScript, one core concept at a time. 🚀 💬 Your turn: Which did you struggle with first — var, let, const, or scope? #JavaScript #WebDevelopment #CodingJourney #LearnInPublic #ProgrammingBasics

🚀 Day 50 of My JavaScript Learning Journey Understanding Browser Events (The Backbone of Interactivity Today I learned how browsers communicate user actions to JavaScript using events. This is the foundation of every interactive website. 🔑 What I Learned 🧠 What is an Event? •An event is a signal from the browser •Example: click, double-click, key press, scroll, pointer events •It simply says: “Something just happened” 🎯 Event Target •The exact HTML element where the event occurs •Example: clicking a button → button is the event target 🧩 Event Listener •A function that waits for an event and reacts •element.addEventListener("click", handler); •Listeners can also be removed using the same function reference 🔄 Event Lifecycle (Very Important) Events move through three phases: •Capturing → top to target •Target → where event happens •Bubbling → target back to top (default) 💡 By default, JavaScript listens during the bubbling phase. ✨ Key Takeaway Understanding how events travel through the DOM helps avoid bugs and gives better control in complex UI interactions. This is how JavaScript makes websites feel alive. ⚡ #JavaScript #BrowserEvents #DOM #FrontendDevelopment #LearningInPublic #WebDevJourney

Day 11 | JavaScript Fundamentals 🚀 🔹 Topic: DOM Manipulation 🔹 Post: How JavaScript Interacts with HTML Today’s learning focused on understanding the Document Object Model (DOM) and how JavaScript uses it to interact with HTML elements. DOM manipulation allows developers to dynamically update content, change styles, handle user events, and create interactive web experiences in real time. This concept is a core foundation for building responsive, dynamic, and user-friendly web applications. #JavaScript #DOMManipulation #WebDevelopmentJourney #FrontendDevelopment #JavaScriptBasics #LearnJavaScript #WebDeveloper #CodingLife #HTML #CSS #Programming #DeveloperCommunity #30DaysOfCode #DailyLearning #TechSkills #SoftwareDevelopment