Day 5 of my 21-day challenge. Today I built a mouse hover spotlight effect using JavaScript and DOM manipulation. LINK: https://lnkd.in/gsWAn74n What it does: • The screen stays dark by default • When you move the mouse, a circular spotlight follows the cursor • Only the area around the cursor becomes visible • The rest of the page remains dimmed, creating a flashlight-like effect Concepts I practiced: • Mouse move events • Dynamic styling with JavaScript • DOM interaction to create real-time visual effects Small interaction, but it shows how powerful simple mouse events can be when combined with DOM manipulation. Learning step by step and building in public. #javascript #webdevelopment #frontenddevelopment #dom #learninginpublic #SheriyansCodingSchool

🚀 Day 25 of #30DaysOfJavaScript Just built a ✊ Rock Paper Scissors Game using HTML, CSS & JavaScript! 🎮 It’s a simple game but helped me strengthen my core JavaScript concepts like logic building, DOM manipulation, and event handling. 🔥 Features: ✅ Player vs Computer gameplay ✅ Random AI moves ✅ Live score tracking ✅ Win / Lose / Draw logic ✅ Dark / Light mode toggle 🌙☀️ ✅ Fully responsive UI 📱 🌐 Live Demo: https://lnkd.in/gGdkuZaT 💻 GitHub Code: https://lnkd.in/g5JkVdx3 📚 What I learned: - Writing clean game logic - Handling user interactions - Updating UI dynamically - Improving UI/UX with simple features Consistency is the key 🔑 — 25 days strong and still going 💪 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #HTML #CSS #Projects

#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

🚀Project Showcase: Simon Says Game I recently built a simple interactive Simon Says memory game using HTML, CSS, and JavaScript. The game challenges users to remember and repeat an increasingly complex sequence of colors, helping strengthen memory and attention skills. Key highlights: • Implemented game logic using JavaScript * Used DOM manipulation and event handling for interactive gameplay * Designed a responsive and simple user interface with HTML & CSS 🔗 Live Demo: https://lnkd.in/gBym4-HP 💻 GitHub Repository: https://lnkd.in/gBUPb2g6 This project helped me practice core JavaScript concepts and front-end development fundamentals. I’m continuing to build more projects to strengthen my software development skills. #WebDevelopment #javascript #frontenddevelopment #github #softwaredevelopment

JavaScript Project | Tic Tac Toe Game Turning concepts into real projects! Today, I built a Tic Tac Toe game using my JavaScript knowledge from previous lectures, and successfully implemented the full game logic with an interactive UI. This project helped me understand how to build real-world applications using core JavaScript concepts. Here’s what I implemented: ● DOM Manipulation to create and update the game board dynamically ● Handling user clicks using event listeners ● Implementing game logic (win, lose, draw conditions) ● Tracking player turns (X & O) ● Writing clean logic to check winning patterns ● Displaying real-time results and game status ● Reset functionality to restart the game instantly ● Improving UI interaction for better user experience Key Learning: Building this project helped me connect multiple concepts like events, conditions, loops, and DOM handling into a single working application. It’s exciting to see how small concepts come together to create something fully functional! Looking forward to building more projects and sharpening my development skills every day. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #100DaysOfCode #CodingLife #Projects #GameDevelopment #DOM #EventHandling #BuildInPublic #TechLearning

Sometimes the best way to learn is by building small things just for fun. ❤️ I created Cursor Hearts, a small interactive project using HTML, CSS, and JavaScript where animated hearts appear and float upward as the cursor moves across the screen. This project started as a simple experiment with DOM manipulation, event listeners, and CSS animations, but it turned into a fun visual effect. Projects like this may be small, but they are great for understanding how JavaScript can dynamically create and control elements on a webpage. Small projects like this keep the learning process enjoyable while helping build stronger fundamentals. 🔗 Live Demo: https://lnkd.in/dAPmyFhv 💻 GitHub Repository: https://lnkd.in/dZ9FUn2W #javascript #webdevelopment #frontend #coding #learning #buildinpublic

Built a memory matching game using HTML, CSS, and JavaScript. It's a browser-based card flipping game where you match pairs of food emojis against the clock. The game has 3D card flip animations, a live move counter and timer, randomized shuffling every round, and a best score tracker. Everything runs in a single HTML file with no frameworks needed. This project helped me get a better understanding of how CSS animations, game state management, and DOM manipulation work together in a real project. Building something you can actually play makes the learning process a lot more enjoyable. I also want to thank Mam Juhinah Batool for her guidance and support. GitHub: https://lnkd.in/dBfWHUKK Medium: https://lnkd.in/dNVPBUYu #WebDevelopment #JavaScript #jQuery #HTML #CSS #StudentProject #Project #100DaysOfCode #OpenSource #GitHub #Learning

Day 12/21 – Built a Virtual Piano using JavaScript Today I built a Virtual Piano using JavaScript. When a user presses different keys on the keyboard, the corresponding piano sound plays instantly. This makes the webpage feel interactive and fun. This project helped me understand how JavaScript can respond to real-time user input. Concepts I practiced today: • Keyboard events in JavaScript • Playing audio using JS • DOM manipulation • Mapping keyboard keys to sounds • Making the UI interactive The exciting part was connecting keyboard keys with sound effects so that every key press produces a different piano note. Projects like this show how powerful JavaScript can be when building interactive web experiences. Link:https://lnkd.in/decw2u5v Learning and building consistently with #sheryianscodingschool 🚀 #Day12 #21DaysChallenge #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #LearningInPublic

🚀 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

Learn in Public – Day 20 🚀 Built a small Image Resizer project today. The idea is simple.......use + and - buttons to increase or decrease the width of an image by 5px. I also added limits so the image can’t become too big or too small, and a warning message appears if it reaches the limit...! While building this, I practiced: DOM manipulation Updating styles dynamically Handling button click events Using simple conditions for limits Small project, but it helped me get more comfortable controlling UI with JavaScript...! Live Project 👇 https://lnkd.in/dh5iq6gR GitHub Repo 👇 https://lnkd.in/dtBNRGZ7 #LearnInPublic #JavaScript #WebDevelopment #Day20