Day 05/21: Interactive Canvas & Logic with JavaScript 🖱️✨ Halfway through the first week of my 21-day challenge! Today, I stepped away from standard layouts to build an Interactive Mouse-Tracking Grid. Using dynamic DOM generation and event delegation, I created a "light-trail" effect that follows the cursor across the screen. Technical Highlights of Day 05: Dynamic Grid Generation: Used Math.floor and client dimensions to calculate the exact number of cells needed to fill any screen size perfectly. Proximity Logic: Implemented an index-based check to not only highlight the active cell but also apply a "fade" effect to the surrounding neighbors (Top, Bottom, Left, Right). Mathematical Constraints: Handled edge-case logic using the modulo operator (%) to ensure the light trail doesn't "wrap around" to the other side of the screen accidentally. Asynchronous Cleanup: Utilized setTimeout to manage the lifecycle of the active states, creating a smooth, trailing animation effect. Tech Stack: 🛠️ HTML5 | 🎨 CSS3 (Grid) | ⚡ JavaScript (Event Tracking) Building interactive experiences like this helps me understand how modern web animations and game-like UIs are structured! Check it out here: 🌐 Live Demo: https://lnkd.in/gMhRqxeW 💻 GitHub: https://lnkd.in/gW8a33j2 Devendra Dhote Ritik Rajput #Javascript #CreativeCoding #Frontend #WebDevelopment #21DaysOfCode #CodingChallenge #InteractiveDesign #DOM

 A fully interactive Rock Paper Scissors Game built using HTML, CSS, and JavaScript. This project focuses on strengthening core JavaScript concepts and improving logical thinking by implementing real-time game functionality. 🔹 Technologies Used: - HTML5 - CSS3 (Responsive UI & Styling) - JavaScript (Game Logic & DOM Manipulation) 🔹 Key Features: - Interactive user interface - Random computer choice generation - Real-time result display (Win / Lose / Draw) - Score tracking system - Clean and responsive design 🔹 What I Learned: - Handling click events in JavaScript - Implementing conditional logic - Using Math.random() for dynamic behavior - Updating UI dynamically using DOM - Improving problem-solving skills - Building this project helped me strengthen my JavaScript fundamentals and understand how game logic works in real-world applications. 🔗 Live Demo: https://lnkd.in/gSeDQmQw 📂 GitHub Repository: https://lnkd.in/gY-dV_bY I’m continuously learning and building more projects. Feedback and suggestions are always welcome! #WebDevelopment #JavaScript #FrontendDeveloper #HTML #CSS #LearningJourney

#Hello_Connections #Day14 of #100DaysofCodeChallenge Project Name: Expanding Image Gallery Details:Built an interactive Expanding Image Gallery using HTML, CSS, and JavaScript. When a user clicks on a card, it smoothly expands while the others shrink, creating a dynamic and engaging horizontal scrolling effect. What I Focused On: DOM manipulation using JavaScript Handling click events efficiently Class toggling for dynamic styling Smooth transitions and scaling effects Horizontal scrolling with scrollIntoView() Key Features: Click-to-expand card interaction Smooth scrolling to active card Animated scaling and opacity effects Responsive horizontal layout Hidden scrollbar for cleaner UI Gradient background design Challenges:Ensuring only one card stays active at a time and making the transition smooth without layout breaking. How I Solved It:Used querySelectorAll() to target all cards, removed the active class from the current card, and dynamically added it to the clicked card. Applied CSS transitions and flex adjustments to create the expanding animation effect. This project helped me understand event handling, dynamic class manipulation, and building interactive UI components with JavaScript. Code Of School - Avinash Gour & Ritendra Gour sir #Day14 #100DaysOfCode #FrontendDevelopment #HTML #CSS #JavaScript #WebDevelopment #InteractiveUI #LearningInPublic

🥁 Built an Interactive Drum Kit Using JavaScript DOM! I recently built a Drum Kit Web App to strengthen my understanding of DOM manipulation and event handling in JavaScript. You can play the drums by: 🎵 Clicking the buttons ⌨️ Pressing keys on your keyboard Each key triggers a unique sound along with a button animation effect. 💡 What I Practiced: 1.DOM Selection (querySelectorAll) 2.Event Listeners (Click & Keypress) 3.JavaScript Audio Object 4.Switch Statements 5.Class Manipulation 6.setTimeout() for animations 💻 GitHub Repository: 👉 https://lnkd.in/gfRUffKN This project helped me understand how JavaScript interacts with HTML & CSS in real time. Small project. Big learning. 🚀 If you're learning frontend development — build projects. That’s where real understanding happens. 💡 #JavaScript #WebDevelopment #Frontend #DOM #100DaysOfCode #LearningInPublic #FrontendDeveloper

🚀 Built an RGB Color Generator using HTML, CSS, and JavaScript 🎨 I created a small interactive project where users can generate custom RGB colors using sliders for Red, Green, and Blue values. The color preview updates in real-time, and the RGB value can be copied instantly to the clipboard with a single click. 💡 Features of the project: • Adjustable RGB sliders (0–255) • Live color preview box • Copy RGB value using JavaScript Clipboard API • Simple and clean UI 📚 Concepts I practiced: ✔ DOM Manipulation ✔ Event Listeners ✔ JavaScript Clipboard API ✔ Dynamic style updates using JavaScript Small projects like this help strengthen JavaScript fundamentals and frontend development skills. Looking forward to building more mini projects while continuing my DSA and development journey. Checkout my project code: Github link👇 https://lnkd.in/dC3Z5Xua #JavaScript #WebDevelopment #FrontendDevelopment #Coding #LearnInPublic

Hi everyone! 🚀 Day 7 of #30DaysCodeChallenge – Element Display using CSS (No JavaScript!) Today I worked on a simple yet interesting mini project – Element Display & Removal using Pure CSS 🌍🌙 🔹 Created two buttons: Display Earth and Display Moon 🔹 Used the CSS sibling selector (~) to control image visibility 🔹 Implemented display: none and display: inline-block for dynamic effect 🔹 Added hover interaction to display respective images 🔹 Styled buttons with box-shadow and custom font 💡 The most interesting part? I achieved this interaction without using JavaScript – only HTML & CSS! This helped me understand: ✔️ CSS selectors deeply ✔️ How sibling combinators work ✔️ UI interaction using hover states ✔️ Clean structuring of elements Small projects like these improve core fundamentals step by step 💻✨ Looking forward to building more interactive UI components in the coming days! #Day7 #30DaysCodeChallenge #HTML #CSS #FrontendDevelopment #WebDesign #LearningInPublic #WomenInTech

Yes, JS-less accordions could not be easier. Including being initially opened or closed, opening and closing separately, allowing only one to be at a time, animating the opening/closing, even customizing and animating the “marker”. All of tgis can be done using just native HTML and CSS. Find examples of all of these variations in the NoLoJS library: https://lnkd.in/gibDtnzU

Day 12 – Built a Rock Paper Scissors Game with HTML, CSS & JavaScript Today I built a simple but fun Rock Paper Scissors game using pure HTML, CSS, and JavaScript. The game allows a user to choose Rock, Paper, or Scissors, and the bot randomly selects its move. The result is instantly displayed showing whether the player wins, the bot wins, or it’s a draw. What I practiced in this project: • DOM manipulation using JavaScript • Generating random choices for the bot • Game logic implementation • Interactive UI design with CSS • Handling user events (click interactions) Tech Stack HTML | CSS | JavaScript If you’re learning JavaScript, this is a great beginner project to understand how frontend logic works in real-time. #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #CodingJourney #BuildInPublic

🚀 Mini Frontend Project – Update CSS Variables with JavaScript Today I built a small but powerful project while learning modern JavaScript concepts. ✨ What this project does: • Real-time CSS variable updates using JavaScript • Interactive sliders to control spacing & blur • Dynamic color picker for theme changes • Smooth animations & transitions • Fun feature: Added “Thug Life” glasses with rotation 😎 This project helped me understand: 🔹 CSS Variables (:root & setProperty) 🔹 DOM selection & events 🔹 Real-time UI updates using the input event 🔹 Combining CSS + JS for interactive UI Small projects like this make learning much more practical and fun 💡 #JavaScript #CSS #FrontendDevelopment #WebDevelopment #100DaysOfCode #LearningInPublic

Just wrapped up building a Web Based Memory Matching Game using HTML, CSS, and JavaScript under the supervision of Ma'am Juhinah Batool  In this game, players flip cards to find matching pairs, with a move counter, timer, and audio feedback for correct or wrong matches. Images remain hidden until flipped, adding a fun challenge, and the dark neon theme gives it a clean, modern look. Skills I practiced while building this: DOM manipulation with jQuery Event handling and game logic CSS transitions and styling for a polished UI Timer and state management in JavaScript It was a great exercise in combining dynamic functionality with visual design, and it really strengthened my front-end development skills. Check out the project and try it yourself: https://lnkd.in/g8ctU5VX #WebDevelopment #JavaScript #HTML #CSS #FrontEnd #Coding