Building Image Resizer with JavaScript DOM Manipulation

building daily with Access Denied Built a Tic Tac Toe game using JavaScript today. this one was more challenging than expected because the main task was managing the game logic properly: tracking turns, checking winning conditions, and making sure the board updates correctly after each move. felt nice seeing everything work together instead of just writing isolated pieces of code. Slowly getting more comfortable with how JavaScript controls behaviour on a webpage instead of just styling it. More projects coming soon... github link in comments. #javascript #buildinpublic #webdevelopment #learning #codingjourney

#TheWebBlueprintSeries | Day-01: DOM_inating_JS 🌐 Two months into my journey at Programming Hero, I’ve uncovered the true engine behind web interactivity: the Document Object Model (DOM). In simple terms, it is the browser's way of making a website dynamic. When a browser loads your HTML code, it immediately creates the DOM—a live, hierarchical tree structure where every tag (like <div>, <h1>, or <p>) becomes an Object. Small details on a website become interactive tools in our hands through specific DOM methods. It’s the bridge that turns a static layout into a real-world application. Over the next few weeks, I’ll be sharing how I’m mastering DOM manipulation—from Event Delegation to Optimized API fetching. 🚀 I’m documenting this to stay accountable and connect with fellow learners. Have any tips on DOM? Let me know in the comments! 👇 #JavaScript #WebDevelopment #ProgrammingHero #DOM #MERNStack #CodingJourney #BuildingInPublic

🚀 Just built a Hangman Game using HTML, CSS & JavaScript! 🎯 Features: • Letter-by-letter guessing system • Hint provided for each word • Maximum 6 wrong attempts • 😢 Sad emoji on loss • 🎉 Victory emoji on success This project helped me strengthen my understanding of: ✔ DOM Manipulation ✔ Event Handling ✔ Game Logic Implementation 💡 It was fun designing the logic behind tracking wrong guesses and updating the UI dynamically. 🔗 Check out the code here: https://lnkd.in/gMnvFf-i #WebDevelopment #JavaScript #FrontendDevelopment #CodingProjects #100DaysOfCode

🚀 Built a Rock-Paper-Scissors Game using HTML, CSS & JavaScript A simple project to strengthen my fundamentals in DOM manipulation and game logic. 🔗 Live Demo: [https://lnkd.in/gJHW63Tg] 💻 Source Code: [https://lnkd.in/gRZkxWcJ]

🚀 Built a Tic Tac Toe Game using HTML, CSS & JavaScript a 2-player Tic Tac Toe game focusing on clean logic and efficient state management. 🛠️ Concepts Used: • DOM Manipulation (querySelector, innerHTML) • Event Handling (addEventListener) • Array Methods (fill) • State Management using Arrays • Functions & Early Returns • Iteration (for...of loop) Features: Real-time winner detection & restart functionality #JavaScript #FrontendDevelopment #WebDevelopment

𝐃𝐚𝐲 𝟐/𝟑𝟎 🚀 𝐓𝐨𝐝𝐚𝐲 𝐈 𝐥𝐞𝐚𝐫𝐧𝐞𝐝: DOM manipulation and event handling in JavaScript 𝐁𝐮𝐢𝐥𝐭: A random color generator that changes the background color and displays the RGB value on button click 𝐊𝐞𝐲 𝐭𝐚𝐤𝐞𝐚𝐰𝐚𝐲: Used event listeners to trigger functions and dynamically update UI elements 𝐆𝐢𝐭𝐇𝐮𝐛 𝐋𝐢𝐧𝐤: https://lnkd.in/gAdXBSpd #30DaysChallenge #WebDev #LearningInPublic

In Thursday’s class with Suraj Kumar Jha, we explored the DOM (Document Object Model) in depth and built a few small projects to better understand how JavaScript interacts with the UI. In this screen recording, I'm sharing a small DOM project – Theme Toggle. The task was simple but interesting: when the theme toggles, the button text should also update dynamically. Completing this helped me understand DOM manipulation and event handling more clearly. Step by step learning and improving every day. 🚀 Chai Code Hitesh Choudhary #javascript #dom #webdevelopment #learninginpublic #100DaysOfCode

Day 37 JavaScript Journey Today was all about mastering Events, Event Bubbling, and Timers in JavaScript * What I learned today: - Event Handling Used addEventListener instead of old onclick Understood how event object (e) works Identified clicked elements using e.target - Event Bubbling & Propagation Learned how events travel from child → parent Used e.stopPropagation() to stop bubbling Controlled event flow like a pro - Prevent Default Behavior Used e.preventDefault() to stop link navigation (like Google link) - DOM Manipulation Removed elements dynamically using: remove() parentNode.removeChild() - setTimeout & clearTimeout Changed text after delay Stopped execution using button click - setInterval & clearInterval Started and stopped repeated execution Avoided multiple intervals using proper logic * Real Concept Learned - Event Delegation (handling multiple elements with one listener) * Big Takeaway: Understanding how events flow in the DOM makes your JavaScript much more powerful and optimized. - Small steps daily = Big progress over time github link : https://lnkd.in/gZu8669F #JavaScript #WebDevelopment #LearningInPublic #MERN #FrontendDeveloper #100DaysOfCode

Built a little browser game over the weekend using just vanilla JavaScript. No frameworks, no libraries — one HTML file. Move your cursor to destroy enemies, survive boss waves, grab power-ups. Runs at 60fps with particle effects and procedural audio. Sometimes the best way to sharpen your skills is to build something fun. Try it: https://lnkd.in/gQGEcv-v #JavaScript #WebDev #CreativeCoding

🔥 Day 13 of My JavaScript Journey 🚀 | Mastering DOM Events ✨Today I learned one of the most important concepts in JavaScript — DOM Events 💡 Now I finally understand how clicks, scrolls, and typing actually work behind the scenes 😎 🎓 What I Learned Today: 🔹 Event Basics (Strong Foundation 💪) 👉 DOM Event = like a 🔔 doorbell (it triggers an action) 👉 3 Core Components: Target 🎯, Event Type ⚡, Handler 🧠 👉 "addEventListener()" = the modern & best approach ✅ 👉 Avoid using "onclick" (clean code = professional code) 🔹 Event Flow (Behind the Scenes Magic ✨) 👉 Event Bubbling 🔼 (child → parent) 👉 Event Capturing 🔽 (parent → child) 👉 Understood the complete event flow 🔄 👉 Learned to control it using "event.stopPropagation()" 🛑 🔹 Event Delegation (Smart Coding 🧠⚡) 👉 Handle multiple elements with just ONE listener 😱 👉 Difference between "event.target" vs "event.currentTarget" 👉 Managing dynamic elements became much easier 💯 💭 My Learning: Events used to feel confusing, but now I clearly understand how JavaScript handles user interactions 🔥 📌 Consistency is the key — Day 13 completed! 🌐 Learn more: https://coderarmy.in #Day13 #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #100DaysOfCode #LearnInPublic #DeveloperLife 💻🚀