Built a Rock Paper Scissors Game to sharpen my JavaScript skills. As part of improving my frontend development skills, I created this simple but interactive project using HTML, CSS, and JavaScript. It was a great hands-on way to practice: 💠 DOM manipulation 💠 Event handling 💠 Game logic implementation 💠 Dynamic UI updates Working on small projects like this helps strengthen core concepts and builds confidence in writing better JavaScript. I’ve attached a short demo video of the project below. You can also check out the live project here: https://lnkd.in/dBgzzbm4 #JavaScript #WebDevelopment #FrontendDevelopment #100DaysOfCode #CodingProjects #HTML #CSS #LearningByBuilding

🚀 Frontend Practice Projects (JavaScript & DOM) I’ve been consistently practicing core JavaScript by building small projects focused on DOM manipulation, events, and logic building. Here are some of the projects I’ve worked on: 🎨 Color Interaction App – Implemented click and mouseenter events to dynamically change UI colors 🟦 100 Color Boxes Generator – Created 100 boxes using DOM and updated background color on click 🎮 Guess the Number Game – Built with 10 attempts, win/loss logic, reset feature, and win counter 🧩 Pokémon Cards UI – Rendered cards dynamically using arrays (name, ID, image) with click interactions ⚖️ BMI Calculator – Takes user input and calculates BMI with instant results ⏱️ Digital Clock – Implemented using setInterval with start/stop controls These projects helped me strengthen: ✔ DOM Manipulation ✔ Event Handling ✔ JavaScript Logic & State Management I’m currently working on improving these projects and learning APIs & modern JavaScript. 🔗 Check out my work on GitHub: https://lnkd.in/gZj6subx #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🎮 Just built a simple Tic-Tac-Toe game using HTML, CSS, and JavaScript. Nothing too complex — just wanted to strengthen my fundamentals and understand how things work behind the scenes without using any frameworks. What I worked on: • Handling game logic (win conditions, turns) • Updating UI with DOM manipulation • Reset functionality Honestly, small projects like this help a lot in getting comfortable with core concepts. Thinking of improving it next by adding an AI opponent or better UI. Open to suggestions 👀 #JavaScript #HTML #CSS #WebDevelopment #Learning

🎮 Built a Simon Says Game using HTML, CSS & JavaScript I recently built a memory-based game where users have to repeat an increasing sequence of colors. I created this project while learning from #ApnaCollege, and it helped me strengthen my JavaScript fundamentals. 🔧 Key Features: • Interactive UI with color-based buttons • Keyboard event to start the game • Level progression system • Game-over and restart functionality 💡 What I learned: • DOM manipulation and event handling • Writing game logic step-by-step • Improving UI using HTML & CSS 🔗 Live Demo: https://lnkd.in/gJKbbDHq I would love to hear your feedback and suggestions to improve this further. #WebDevelopment #JavaScript #Frontend #Projects #LearningJourney #100DaysOfCode

Today I explored some core concepts of JavaScript events, and here’s my simple understanding: 🔹 Event Bubbling Event bubbling means when an event starts from the element you interact with and then travels upward through its parent elements. For example, if I click a button inside a div, the event first happens on the button, then the div, then the body, and so on. A simple way to imagine it: If I’m dancing in my room, you can also say I’m dancing in my house, in my city, or even in my country. It’s like: room → house → city → country 🔹 Stopping Event Bubbling Sometimes we don’t want the event to go upward. We only want it to stay on that specific element. For that, we use: element.addEventListener("click", (event) => {  event.stopPropagation(); }); 🔹 setInterval() Used when we want something to run repeatedly after a fixed time interval. Example: setInterval(() => { /* code */ }, 3000); 🔹 setTimeout() Used when we want something to happen once after a delay. Example: setTimeout(() => { /* code */ }, 4000); Learning these small concepts is helping me understand how interactive web applications really work. #JavaScript #WebDevelopment #Learning #Frontend #Programming

𝐖𝐡𝐞𝐧 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 𝐥𝐢𝐭𝐞𝐫𝐚𝐥𝐥𝐲 𝐬𝐢𝐠𝐡𝐬 𝐚𝐭 𝐲𝐨𝐮𝐫 𝐦𝐢𝐬𝐭𝐚𝐤𝐞𝐬... 🤦♂️🔊 I just finished a project where I built a 𝐒𝐢𝐦𝐨𝐧 𝐒𝐚𝐲𝐬 𝐁𝐫𝐚𝐢𝐧 𝐠𝐚𝐦𝐞, and I wanted it to feel a bit more "alive." So, instead of the usual boring buzzer, I added a custom “𝗳𝗮𝗮𝗮𝗵” sound that plays every time you lose. 😂 😂 It’s surprisingly motivating (or frustrating, depending on your high score)! This was a great chance to get hands-on with Vanilla JavaScript and manage complex game states. Here’s a breakdown of what I implemented: 🚀 𝐊𝐞𝐲 𝐅𝐞𝐚𝐭𝐮𝐫𝐞𝐬:  • 𝐃𝐲𝐧𝐚𝐦𝐢𝐜 𝐋𝐨𝐠𝐢𝐜: Classic “repeat the sequence” setup where the pace picks up as you progress.  • 𝐏𝐞𝐫𝐬𝐢𝐬𝐭𝐞𝐧𝐭 𝐒𝐜𝐨𝐫𝐢𝐧𝐠: Integrated localStorage so your Best Score sticks around between sessions.  • 𝐌𝐨𝐝𝐞𝐫𝐧 𝐓𝐨𝐨𝐥𝐢𝐧𝐠: Built with Vite for a smooth dev experience and used ES modules to keep the codebase clean.  • 𝐀𝐮𝐝𝐢𝐨 𝐀𝐫𝐜𝐡𝐢𝐭𝐞𝐜𝐭𝐮𝐫𝐞: Leaned on the Web Audio API and HTML audio to provide instant feedback, including that "iconic" game-over roast.  • 𝐍𝐞𝐨𝐧 𝐔𝐈: A fully responsive design with a sleek neon aesthetic using custom CSS. 🛠️ 𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤: JavaScript (ES6+) | Vite | HTML5/CSS3 | Web Audio API Check out the link 👇 🔗Live: https://lnkd.in/gigMMGGt try to beat your high score, and try not to get roasted by the sound effect!😀 #WebDevelopment #JavaScript #ViteJS #FrontEnd #CodingProject #SoftwareEngineering #SimonSays #ProgrammingHumor #OpenSource

🚀 JavaScript forEach vs map — Know the Difference Like a Pro! Many developers use forEach and map interchangeably… but they serve completely different purposes 👀 Let’s break it down 👇 🔹 forEach() 👉 Executes a function for each element 👉 Perfect for side effects (logging, updating UI, API calls) 👉 ❌ Does NOT return a new array 💡 Use it when you just want to do something, not transform data 🔹 map() 👉 Transforms each element 👉 ✅ Returns a new array 👉 Ideal for rendering lists (especially in React ⚛️) 💡 Use it when you want to create something new from existing data ⚡ Quick Rule to Remember: ➡️ Need a new array? → map() ➡️ Just looping? → forEach() 🧠 Pro Tip: Overusing forEach when you actually need map can make your code less clean and harder to scale! 💬 Which one do you use more in your projects — forEach or map? #JavaScript #WebDevelopment #FrontendDevelopment #ReactJS #ProgrammingTips #CodingLife #SoftwareDeveloper #LearnToCode #100DaysOfCode #DevCommunity

🚀 Exploring JavaScript Timers & DOM Manipulation I recently built a small project to understand how setTimeout, setInterval, and DOM events work together in JavaScript. 💡 Here’s what this mini project demonstrates: 🔹 setTimeout() Updates text after a delay Can be stopped using clearTimeout() 🔹 setInterval() Continuously updates content (live timestamp) Prevented multiple intervals using a condition Controlled with Start/Stop buttons 🔹 Dynamic Background Color 🎨 Generates random HEX colors Changes UI background every second Uses Start/Stop logic for better control 🧠 Key Learnings: Managing intervals properly (avoiding multiple executions) Writing reusable functions like randomColor() Improving user interaction with event listeners Understanding real-time updates in the browser 💻 This project helped me strengthen my fundamentals in: JavaScript • DOM Manipulation • Event Handling • Timers ✨ Small projects like this build strong foundations! #JavaScript #WebDevelopment #Frontend #Coding #100DaysOfCode #Learning #DeveloperJourney

🚀 Built an Interactive FAQ (Accordion) using JavaScript Today I worked on building a dynamic FAQ section to strengthen my JavaScript fundamentals. 🔹 Used DOM manipulation to control elements 🔹 Applied `forEach` to handle multiple FAQ items 🔹 Implemented event listeners for user interaction 🔹 Created an accordion-style toggle (open/close answers) Through this project, I got a better understanding of how to manage UI state and handle multiple elements efficiently in real-world scenarios. Small projects like this are helping me improve my problem-solving skills and build confidence in JavaScript. 🔗See Live Preview : https://lnkd.in/gQPed8jE If you have any suggestions for improvement, I’d really appreciate your feedback 🤲 #JavaScript #WebDevelopment #Frontend #LearningByDoing #MERNStack #CodingJourney

🚀 Just built a cool JavaScript mini-project! Today I worked on a simple but fun concept using DOM manipulation & mouse events 🎯 👉 Created a circle that follows the cursor in real-time 👉 Used event.clientX and event.clientY to track movement 👉 Applied dynamic styling with position: absolute 💡 This small project helped me understand: How browser events work Real-time UI interaction Importance of CSS positioning in JavaScript Sometimes, small projects teach BIG concepts 🔥 Excited to build more interactive UI experiences! #JavaScript #WebDevelopment #Frontend #Coding #Learning #DOM #BeginnerProjects