💥 Bubble Pop Madness — My First JS Game! 🎮 I turned a simple idea into a fun little challenge — a Bubble Game made completely using HTML, CSS & JavaScript! 😍 Try it out here 👉 https://lnkd.in/gDZHWACR You get 20 seconds ⏱️ to hit the correct bubble (a random number challenging you each time), gain points for each correct click, and lose points for a wrong one. Each click updates your score instantly and reshuffles the bubbles — super addictive! This project helped me dive deep into how game logic, DOM manipulation, and event handling work together for real-time interactivity. It’s a small project but taught me that with just core web tech, you can build something dynamic and fun! 💡 💬 I’d love to hear your thoughts, ideas or suggestions to make it even better! #Coding #JavaScript #FrontendFun #GameDevelopment #WebDevJourney #LearnByBuilding #HTML #CSS #FrontendDeveloper #Programming

When I started learning the DOM in Javascript, I thought it would be simple. You know… “Just select elements and change them,” right? 😂 I didn’t know I was entering a battlefield. Let me share a short story. The first time I wrote document.getElementById(), I spent almost 20 minutes wondering why my code wasn’t working… Only to realize my HTML had id="titel" instead of id="title". One small typo. One long headache. 😭 Then came the moment I tried to change text with .textContent. I refreshed the browser like 12 times, cleared cache, even restarted VS Code… Turns out I placed my script above the HTML, so the DOM hadn’t loaded yet. 🥲 But here’s where it gets interesting: Every error made me better. Every bug forced me to understand what the browser was actually doing. Every “why is this not working?” pushed me to learn one more thing. Now when I manipulate the DOM, it feels like I understand it better. So here’s my question to you: What was the first big challenge you faced while learning the DOM or JavaScript in general? Let’s share and learn from each other. 👇 #javascript #frontend #webdevelopment #codingjourney #learninpublic  #techcommunity #developerlife #programming #html #css #DOM

Day 68 of #100daysofcodechallnge Today, I practiced building a Movie Reviews App using HTML, CSS, and JavaScript 🎯 Task Overview: Added HTML elements inside the container with id movieReviewsContainer. Created: An input element (id="titleInput") for movie titles. A textarea (id="reviewTextarea") for reviews. A button (id="addBtn") to add the review. Dynamically displayed the reviews inside the container (id="reviewsContainer"). ⚙️ Functionality Achieved: When the Add button is clicked: ✅ If the movie title is empty → show an alert asking for the title. ✅ Otherwise → add the entered title and review to the reviews section. ✅ Finally, clear the input fields for the next entry. Each day I’m learning how to make web pages more interactive and user-friendly through JavaScript DOM manipulation. #CCBP #NxtWave #100DaysOfCode #WebDevelopment #HTML #CSS #JavaScript #CodingChallenge #FrontendDevelopment #LearnCoding #PracticeMakesPerfect #DevelopersCommunity #CodeEveryday #TechJourney #SoftwareDevelopment #CodingIsFun #BuildInPublic

🚀 Just built a Tic-Tac-Toe game using HTML, CSS, and JavaScript! 🔗 GitHub Repository: https://lnkd.in/gFSYmYnz This project is more than just a game—it's a hands-on way to understand how the core pillars of web development work together: 🧱 HTML – The foundation of the game board Semantic HTML structures the layout: buttons for each cell, containers for grouping, and headings for clarity. It’s a great example of how HTML gives shape to your ideas. 🎨 CSS – Styling that brings the game to life Responsive sizing with vmin units, hover effects, and shadows make the interface intuitive and visually engaging. Flexbox ensures the board stays centered and clean across devices. 🧠 JavaScript – The brain behind the game JS handles turn logic, win detection, draw conditions, and UI updates. I used arrays to define win patterns and event listeners to track player moves—perfect for learning DOM manipulation and game logic. 🎯 Why this project matters If you're new to web development, this is a perfect starting point. It shows how HTML, CSS, and JS interact in a real-world scenario—and it’s fun to play too! 💬 I'd love feedback from fellow developers! Try it out, fork it, or suggest improvements. Let’s learn and build together. #WebDevelopment #JavaScript #HTML #CSS #TicTacToe #Frontend #LearningByDoing #GitHubProjects #VenkatBuilds

GitHub: https://lnkd.in/gBBRvbsY 🔥 Project 9/20 – Scroll to Top Button ✨ Create a Smooth Scroll-to-Top Button using JavaScript! ✨ This simple yet modern feature improves your website’s user experience instantly. In this project, I used: ⬆️ window.scrollY to detect scroll position 🌪️ scrollTo({ top: 0, behavior: "smooth" }) for smooth scrolling 💡 CSS for fade-in and pop animations A clean, practical JavaScript project that adds polish to any webpage. Don’t just scroll — glide to the top in style 🚀 #webdevelopment #javascript #frontenddevelopment #frontendprojects #htmlcssjs #scrolltotop #smoothscroll #vanillajs #learnjavascript #programming #webdesign #techcommunity #githubproject #uicomponents #frontendinspiration #modernui #creativefrontend #webdevcommunity #codinglife #developerlife #softwareengineering #programminglife #scrollbehavior #frontendskills #codewithusman

🚀 JavaScript Gotchas: var vs let in Loops & setTimeout Same code, different output 👇 Ever wondered why this code prints 5 5 5 5 5 instead of 0 1 2 3 4? for (var i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } 💡 Reason: var is function-scoped — only one i exists for the entire loop. setTimeout callbacks run after the loop finishes, so each callback sees the final value of i → 5. ✅ Fix it with let: for (let i = 0; i < 5; i++) { setTimeout(() => { console.log(i); }, 1000); } let is block-scoped — each iteration gets a new copy of i. Now, callbacks “remember” the correct value of i. ✅ Output: 0 1 2 3 4 💡 Key takeaway: var → shared variable in loop → tricky in async callbacks let → separate variable per iteration → safer & predictable ✨ Tip: Even setTimeout(..., 0) behaves the same! The event loop always runs callbacks after the current synchronous code. #JavaScript #CodingTips #FrontendDevelopment #WebDevelopment #Programming #LearnJS #DeveloperTips #AsyncJavaScript #Closures

Rock–Paper–Scissors in JavaScript using ternary operators I just built a simple Rock–Paper–Scissors game using JavaScript, a fun exercise in logic, randomness, and conditional statements! How it works: The program first defines the possible game choices: Rock, Paper, or Scissors. The player is prompted to enter their choice. The computer randomly picks one from the list. Using ternary operators inside an if statement, the code checks the winning conditions and prints out who won. Key Concepts Practiced: Array indexing Random number generation (Math.random() + Math.floor()) Conditional checks (if + ternary operators) Basic user interaction with prompt(); Example Output: Computer choice: Scissors. User choice: Rock Player wins! I really enjoyed blending logic with a little randomness here. Next, I might upgrade it to keep scores, add rounds, and even a UI version with buttons! What do you think — should I turn this into a full browser game? ⚡ #JavaScript #Coding #BeginnerProjects #WebDevelopment #LogicBuilding #GameDev

🎲 Just built a Dice Game using HTML, CSS, and JavaScript! Here’s a short demo of the website in action 👇 💡 What I learned: -DOM manipulation and event handling in JavaScript -Generating random numbers for dice rolls -Dynamically updating images and text in the browser This project helped me connect my frontend design with real JavaScript logic to make something interactive and fun. 🔗 Check out the complete code on my GitHub: 👉 [https://lnkd.in/dDgrvdeB] Would love your feedback or suggestions for improvement! 🙌 #WebDevelopment #JavaScript #Frontend #HTML #CSS #CodingProjects #DeveloperJourney #LearningByDoing #StudentProjects

Simon Says Game (HTML | CSS | JavaScript) I just built a fun Simon Says game using HTML, CSS, and JavaScript! This project helped me practice DOM manipulation, event handling, and sequencing logic in JavaScript. 🧠 How to Play: Press any key to start the Game. Watch the sequence of flashing colors. Repeat the sequence by clicking the pads in the same order. Each round adds a new step — how long can you go without a mistake? 💡 Tech Used: HTML for the structure CSS for styling and layout JavaScript for the core game logic It’s a simple yet great project to strengthen JavaScript fundamentals and improve UI interaction handling. 👉 Check it out on GitHub: https://lnkd.in/dCE7zgmR

I recently built "Simon Says" Game 🎮 🎮, using JavaScript, CSS and HTML. This project helped me understand how to make web pages interactive and dynamic through DOM manipulation. While developing it, I worked with : 🔹 DOM Events – to detect user clicks and match them with the generated game sequence. 🔹 setTimeout() / setInterval() – to create the flashing color patterns. 🔹 Event Listeners – to control the player’s input and trigger the next game step. 🔹 Arrays & Conditions – to store and compare game patterns. code source : https://lnkd.in/eySXMdHN game link : https://lnkd.in/eS-jFuqX