Private Click Counter & Theme Manager with JavaScript Fundamentals

🚀Sharing my progress in mastering JavaScript(DOM) I built a small interactive component as part of a structured learning system — but focused on going beyond just making it work. 🔹What I worked on: ⊳ DOM manipulation and state handling ⊳ Designing clear interaction feedback (not just instant changes) ⊳ Improving UI perception using spacing, hierarchy and subtle motion 🔹Key focus: Instead of only changing text on click, I explored how users perceive state changes — adding timing and visual feedback to make interactions feel intentional. 🔹Live demo: https://lnkd.in/dt94TTW5 🔹Code: https://lnkd.in/dDA8u28H This is part of my journey building JavaScript projects from basic → advanced with a focus on engineering thinking, not just features. #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic

Built a Task Tracker using JavaScript. But the real learning wasn’t the UI, it was debugging real problems. This project helped me move beyond “writing code” to actually understanding how things break in real-world scenarios. Some challenges I faced: • Data not persisting correctly due to localStorage handling • Events not working on dynamically created elements • API-like behavior issues with async flow and DOM updates • UI breaking due to incorrect DOM manipulation • CSS bugs caused by specificity and layout issues Instead of patching things blindly, I debugged and fixed each issue step by step. Key things I learned: • Why JSON.parse is necessary when using localStorage • Difference between response-level errors vs data-level errors • Importance of event delegation for dynamic elements • How small DOM mistakes can break the entire UI • CSS pitfalls like flex overflow, specificity, and animation conflicts I also improved the user experience by: • Adding proper task states (pending/completed) • Ensuring smooth UI updates without reloads • Handling edge cases like empty inputs and invalid actions This project was less about building a “task app” and more about learning how to think like a developer. Project Repo: https://lnkd.in/gCgxHuWC Live Website: https://lnkd.in/gC3CJNx8 Would appreciate feedback! #javascript #webdevelopment #html #css #beginnerdev #100daysofcode #frontenddevelopment #vanillajs

I have been rebuilding my understanding of JavaScript by focusing on how UI systems behave - not just how to make them work. Recently, I built two small DOM-based projects as part of a structured learning path: • Toggle Text Component • Theme Toggle System Instead of focusing on features, I focused on how UI systems behave: → State-driven UI updates → Persistent state using localStroge → Clear interaction feedback → Consistent visual behavior across components Live demo: https://lnkd.in/dt94TTW5 Code: https://lnkd.in/dDA8u28H The biggest shift for me was realizing: UI is not just HTML + CSS + JS - it is a system that reacts to state over time. I am continuing to build JavaScript projects with focus on engineering thinking, system design and user perception. #JavaScript #FrontentDevelopment #WebDevelopment #LearningInPublic

JavaScript isn’t hard unclear logic is. One thing I’ve learned while building real frontend features is this: Most bugs don’t come from JavaScript itself… They come from assumptions we make while writing it. Here’s a simple rule that has saved me countless hours: Always validate your data before using it. Because in real projects, you’re not just writing code you’re handling unpredictable inputs, API delays, null values, and user behavior. A few examples that prevent 80% of silent failures: • Check if an array actually exists before mapping • Confirm API responses before rendering UI • Avoid chaining methods on undefined • Never trust user input without validation • Use optional chaining when the structure isn’t guaranteed Small checks. Big impact. Clean code isn’t about writing more it’s about writing responsibly. When your logic is predictable, your UI becomes reliable. And reliability is what users remember. #JavaScript #FrontendDevelopment #WebDevelopment #CleanCode #TechTips #UIUX #DeveloperLife

🚀 Built a Fully Functional Kanban Board with JavaScript! I’ve been focusing on improving my JavaScript logic and real-world problem solving, and this project pushed me to think beyond just syntax. 💡 What I implemented: • Drag & Drop functionality • Dynamic DOM manipulation • Local Storage (data persists even after refresh) • Task creation & deletion • Clean UI with responsive design This project helped me understand how real applications manage state, user interaction, and data persistence. 🔗 Live Demo: https://lnkd.in/gxvxPPwF I’m currently working on strengthening my DSA + Web Development skills, and this is one step toward building more complex applications. Would love your feedback! 🙌 #JavaScript #WebDevelopment #Frontend #Projects #LearningInPublic #180DaysOfCode #DSA

Day 18 of my JavaScript learning journey 🚀 Today, I improved my Contact Form Validation project by making it more interactive and user-friendly. Instead of just showing errors on submit, I implemented real-time validation, so users get instant feedback as they type. Here’s what I added: • Live validation using onkeyup • Proper validation for: * Full name (format check with regex) * Phone number (digits + length check) * Email (pattern validation) * Message (minimum character requirement) • Dynamic error messages that update instantly • Visual success indicators (check icons ✔️) • Cleaner and more structured validation functions One thing I really noticed today is how much small UI feedback improves user experience. Now the form actually guides the user instead of just reacting after submission. I also started thinking more about how users interact with forms, not just how the code works. Next step: building an Image Gallery 🔥 #JavaScript #WebDevelopment #Frontend #100DaysOfCode #LearningInPublic

Many developers use addEventListener() every day, but still get confused about how events actually propagate in the DOM. When you click an element inside another element, the event doesn't just stay there — it travels through the DOM tree. This behavior is called: • Event Bubbling – event moves from child to parent • Event Capturing – event moves from parent to child Understanding this concept helps you write cleaner event handling logic, especially when working with complex UI structures. I wrote a simple guide explaining Event Bubbling & Capturing in JavaScript with clear examples. https://lnkd.in/dpM4Xix7 If you're learning JavaScript or improving your frontend skills, this will definitely help. #JavaScript #FrontendDevelopment #WebDevelopment #Programming #DOM

Just built a dynamic product card using JavaScript DOM manipulation What I love about this project is how flexible it is — I can generate as many cards as I want dynamically, making it super useful for real-world applications like e-commerce or dashboards. Features: Fully dynamic card creation using DOM Clean and modern UI design Reusable component structure Easy to scale for multiple products This project helped me strengthen my understanding of how the DOM really works behind the scenes — not just static HTML, but building everything programmatically. 📂 GitHub Repository: https://lnkd.in/gwcZG2pf Would love to hear your thoughts or suggestions for improvement! #JavaScript #WebDevelopment #Frontend #DOM #Coding #Projects #Learning #100DaysOfCode

I took a longer break from building things than I intended. Life got busy, motivation dipped, and somehow weeks turned into months away from writing a single line of code. But I'm back, and instead of waiting for the perfect moment, I just started. Here's what I built to get back into it: ~Form Validation App A React signup form with real-time validation, a password strength indicator, and conditional error handling -- built from scratch with a focus on clean architecture and UI quality. 🔗: https://lnkd.in/dkdYZHWH What it does: -Validates name, email, and password on submit -Shows inline error messages per field -Rates password strength live (Weak → Strong) as you type -Conditionally styles inputs based on validation state -Renders a success screen on valid submission Tech used: -React (Vite) -- component-based architecture -Tailwind CSS -- utility-first styling with custom design tokens -JavaScript -- pure validation logic separated from UI What I learned: -How controlled inputs work and why they matter in form handling -Separating concerns -- keeping validation logic in its own utility file -Applying conditional styling cleanly without bloating component code -Thinking in reusable components (InputField, PasswordStrength) rather than writing everything in one place Small project. Real fundamentals. This is Project 3 of my structured React learning path -- more coming. #React #JavaScript #TailwindCSS #WebDevelopment #Frontend #100DaysOfCode #Fullstack #fullstack #MERN #learner #Developer

🚀Day 18 — Event Delegation in JavaScript (Simplified) Handling events efficiently is key when working with the DOM 🚀 --- 🔍 The Problem 👉 Attaching event listeners to multiple elements can be inefficient document.querySelectorAll("li").forEach(item => { item.addEventListener("click", () => { console.log("Item clicked"); }); }); ❌ Adds multiple listeners ❌ Not scalable for dynamic elements --- ⚡ Solution: Event Delegation 👉 Attach a single event listener to a parent document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("Item clicked"); } }); --- 🧠 What’s happening? 👉 Events bubble up from child → parent 👉 Parent handles events for all children --- 🚀 Why it matters ✔ Better performance (fewer listeners) ✔ Works for dynamically added elements ✔ Cleaner code --- 💡 Real-world example 👉 Handling clicks in: Lists Tables Dynamic UI components --- 🔥 One-line takeaway: 👉 “Use one parent listener instead of many child listeners.” --- If you're working with dynamic UIs, this pattern is a must. #JavaScript #EventDelegation #WebDevelopment #Frontend #100DaysOfCode 🚀