I built an interactive Drum Kit using HTML, CSS, and JavaScript as part of my learning journey. This project helped me understand how to handle keyboard events and play sounds dynamically. 🔑 Key Features: Play drum sounds using keyboard keys Real-time key press detection using event listeners Smooth UI interaction with visual feedback Clean and responsive design 💡 What I Learned: JavaScript event handling (keydown) Working with data-key attributes DOM manipulation Audio integration in JavaScript 🔗 Live Demo: https://lnkd.in/dqJCbH8P Github link : https://lnkd.in/daWFt6Rm Team : Ahsen Adil Muhammad Shayan Sir : Muhammad Fareed Ali Aftab Sheikh Zeeshan Aijaz Wajid Ullah Ghous Ahmed GI’m continuously improving my JavaScript skills and building more projects. Feedback is always welcome! #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode

⚡ Event Bubbling vs Event Capturing in JavaScript When working with DOM events in JavaScript, an event doesn’t occur only on the target element — it travels through the DOM. This behavior is known as event propagation. Event propagation consists of two main phases: 🔹 Event Capturing (Capture Phase) The event begins at the top of the DOM tree (the document) and travels down through its ancestors until it reaches the target element. 🔹 Event Bubbling (Bubble Phase) After the event reaches the target element, it propagates back up through its parent elements toward the root of the DOM. For example, if a button inside a div is clicked, the event flow may look like this: Document → HTML → Body → Div → Button → Div → Body → HTML → Document By default, most event listeners in JavaScript operate during the bubbling phase. However, developers can choose to handle events during the capturing phase when needed. Understanding event propagation is important when managing nested UI elements, controlling event flow, or preventing unintended behavior using methods such as stopPropagation(). Reference from 👉Sheryians Coding School #JavaScript #FrontendDevelopment #WebDevelopment #DOM

Day 10/21: Illuminating the Web with Vanilla JavaScript! 🔦 Halfway through my 21-day coding challenge, and today I decided to dive deep into DOM manipulation and Event Listeners to create a dynamic Spotlight Effect. The goal was simple but the logic is powerful: creating an interactive overlay that follows the user's cursor, revealing the content beneath—much like a flashlight in a dark room. 🛠️ How it works: The Layer: Used a fixed div with a radial-gradient background to create the "darkness" and the "hole" of light. The Interaction: Leveraged the mousemove event to capture the real-time coordinates (clientX, clientY) of the cursor. The Magic: Dynamically updated the CSS background property using JavaScript template literals to move the center of the radial gradient to the cursor's exact position. 💡 Key Takeaways: Event Handling: Understanding how addEventListener drives high-performance UI updates. CSS-in-JS: Learning to manipulate complex CSS properties (like gradients) on the fly. User Experience: Seeing how interactive elements can make a landing page feel more premium. 🌐 Live Demo: https://lnkd.in/g9BnnDBG 🔗 Check out the source code here: https://lnkd.in/gd7eyfEm Building this from scratch reinforced my understanding of how JavaScript interacts with the browser's coordinate system. It’s not just about writing code; it's about creating an experience. Check out the video below to see it in action! 👇 Sarthak Sharma Ritik Rajput Devendra Dhote #JavaScript #WebDevelopment #Frontend #CodingChallenge #21DaysOfLinkedIn #MERNStack #CodingJourney #SoftwareEngineering

Day 14/21 – Built an Image Slider using JavaScript Today I built a simple image slider using JavaScript. The idea was to allow users to navigate through images using Previous and Next buttons. When the user clicks Next, the slider moves to the next image. When the user clicks Previous, it goes back to the previous one. Concepts I practiced today: • JavaScript DOM manipulation • Handling button click events • Updating images dynamically • Basic slider logic using JavaScript • Combining HTML, CSS, and JavaScript together. This project helped me understand how JavaScript can control content changes and user interactions on a webpage. Learning and building consistently with #sheryianscodingschool 🚀 #Day14 #21DaysChallenge #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #LearningInPublic

Built and shipped my Learning Journal 🛠️ This started as a simple project, but quickly turned into a deep dive into layout systems, responsive design, and structuring reusable components in JavaScript. A lot of small details, but that’s where the real learning happens. Check it out 👇 🔗https://lnkd.in/eZSzCYUw #CodingJourney #FrontendDevelopment #JavaScript #BuildInPublic #Scrimba

⏰ Mini Project #3 – Digital Clock (JavaScript DOM Project) Continuing my journey of learning JavaScript DOM Manipulation, I built a simple Digital Clock that displays the real local time. 💻 What I implemented in this project: 🔹 Used JavaScript Date() object to get the current local time 🔹 Converted it using toLocaleTimeString() 🔹 Updated the UI dynamically using DOM manipulation 🔹 Used setInterval() to update the clock every second 🔹 Learned how JavaScript can continuously update webpage content without refreshing Even though it’s a small project, it helped me understand how JavaScript interacts with the DOM in real time. ⚡ Next step: Building more mini projects to strengthen my JavaScript fundamentals and DOM skills. 💡 “Small projects today build strong developers tomorrow.” #JavaScript #WebDevelopment #DOMManipulation #FrontendDevelopment #CodingJourney #LearnInPublic #BuildInPublic #TechStudent #DeveloperJourney #100DaysOfCode #Programming

🚀 From Learning JavaScript to Building a Real-Time Clock I built a real-time Analog Clock using JavaScript, and here’s a quick demo of it in action ⏱️ 🔧 Tech Stack: HTML | CSS | JavaScript ✨ Features: • Live time updates • Smooth hand movements • Responsive layout 💡 Key Learning: Learned how JavaScript handles time-based functions, DOM manipulation, and real-time updates. 🎥 Check out the working demo in the video! 👉 What should I build next? Suggestions are welcome! #WebDevelopment #JavaScript #HTML #CSS #FrontendDeveloper #Projects #Learning

Today I built a real-time digital clock using JavaScript, applying the concepts I learned in my previous JavaScript lectures. Instead of just understanding theory, I focused on implementing the concepts in a working project. This project helped me strengthen my understanding of DOM manipulation and JavaScript fundamentals. Here’s what I used while building this project: ● Using HTML, CSS, and JavaScript together to build an interactive webpage ● Accessing DOM elements using document.getElementById() ● Updating webpage content dynamically using innerHTML ● Using setInterval() to update the clock every second ● Working with JavaScript Date object to get current time ● Styling elements dynamically using JavaScript style properties ● Applying flexbox styling through JavaScript to center elements ● Understanding how JavaScript controls the behavior of a webpage through the DOM Building small projects like this helps convert concepts into real development skills. Excited to keep learning and building more projects as I move forward in my Web Development journey. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #TechLearning #BuildInPublic

One of the best ways to learn JavaScript is by creating small interactive projects. In my latest practice project, I focused on: • JavaScript variables and conditions • Event listeners • DOM manipulation • User input handling • Logical problem solving Tech Stack: HTML, CSS, JavaScript Step by step, I’m improving my Front-End Development skills by building real projects. 🔗 GitHub: https://lnkd.in/gEzDSdwn #JavaScript #FrontendDevelopment #gressthenumber

Day 13/21 – Creating a Spotlight Effect with JavaScript Today I built an interesting spotlight effect using JavaScript and the mousemove event. The idea was simple: When the user moves the mouse across the screen, a radial gradient follows the cursor, revealing the image while the rest of the screen stays dark. This creates a spotlight-like interactive effect. Concepts I practiced today: • Mousemove event in JavaScript • Getting cursor position (X & Y) • Dynamically updating CSS radial-gradient • Creating interactive UI effects • Combining JavaScript with CSS visuals This project helped me understand how JavaScript can control visual effects in real time and make websites feel more dynamic and interactive. Learning and building consistently with #sheryianscodingschool 🚀 #Day13 #21DaysChallenge #JavaScript #FrontendDevelopment #WebDevelopment #CreativeCoding #LearningInPublic