JavaScript Rock Paper Scissors Game with HTML CSS

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

DOM Manipulation Project – JavaScript in Action! I’m excited to share my latest JavaScript DOM project, where user interaction directly controls the UI behavior. In this project, clicking a button dynamically changes the colors of multiple elements on the screen, demonstrating how JavaScript can manipulate HTML and CSS in real time. What I learned through this project : 1.) Understanding the Document Object Model (DOM) and how web pages are structured. 2.) Selecting and targeting elements using methods like getElementById, querySelector, etc. 3.) Handling events (button click) to trigger actions. 4.) Dynamically updating styles and properties using JavaScript. 5.) How JavaScript acts as a bridge between HTML structure and CSS styling. 6.) Improving interactivity and responsiveness without reloading the page. This project helped me strengthen my foundation in core JavaScript concepts, especially DOM manipulation and event handling, which are essential for building interactive and user-friendly web applications. Small projects like these give big clarity. Feel free to check out my work on github and share your feedback : https://lnkd.in/guFaS8uq #JavaScript #DOMManipulation #WebDevelopment #FrontendDevelopment #LearningByDoing #CodingJourney #JavaScriptProjects #WebDesign #DeveloperLife #Programming #UIInteraction

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

Excited to share a recent front-end practice project. I built a straightforward, interactive webpage to solidify my understanding of vanilla JavaScript and DOM manipulation. - Dynamic Styling: Created a button that triggers a color change upon interaction using JavaScript event listeners. - Time-Based Logic: Programmed a dynamic greeting alert that checks the current time (new Date().getHours()) and delivers a context-aware message (Morning, Afternoon, or Evening). - Interactive Calculator: Built a simple calculator that takes values from user input fields, parses the data, performs the addition, and instantly updates the DOM with the correct result. It is always rewarding to see the code come to life on the screen. You can see the HTML, CSS, and JS logic working together in the attached video. #JavaScript #WebDevelopment #FrontEnd #CodingJourney #HTML #CSS #DOMmanipulation #cognifyz #cognifyzTechnologies

🚀 Built a Rock Paper Scissors Game using Pure HTML, CSS & JavaScript! Excited to share my recent mini project — a fully functional Rock Paper Scissors Game built using only HTML, CSS, and basic JavaScript (no frameworks, no AI tools). 💡 Features: 🎮 Interactive Rock, Paper, Scissors gameplay 📊 Live Scoreboard 💾 Score persistence using Local Storage 🔄 Reset button to clear scores instantly 🔁 Automatically restores latest score even after closing & reopening the browser This project helped me strengthen my understanding of: -DOM Manipulation -Local Storage Basic Game Logic Implementation Clean UI structuring with CSS Small projects like these are helping me build strong fundamentals in JavaScript and frontend development. More projects coming soon 🚀 #HTML #CSS #JavaScript #WebDevelopment #FrontendDeveloper #LearningByDoing #Projects

🚀 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

🚀 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

#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day48 Project: Dynamic Profile Card Generator What I built Today I created an interactive Profile Card Generator where users can enter their details and instantly generate a stylish profile card with image, bio, and Instagram link. It dynamically creates multiple cards in real time using JavaScript. Technologies Used HTML5 CSS3 (Flexbox, Glow Effects, Overlay Design) JavaScript (DOM Manipulation, Event Handling, File API) Challenge I faced Handling image upload preview and dynamically creating multiple cards without breaking layout. How I solved it Used URL.createObjectURL() for instant image preview and structured DOM creation properly to manage multiple cards efficiently. Live Demo: https://lnkd.in/dQujcG8j Open to feedback and suggestions Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #HTML5 #CSS3 #WebDevelopment #100DaysOfCode #DeveloperJourney #UIUX

🎲 Just Built a Dice Roll Game using HTML, CSS & JavaScript! 🌐 Live Demo: [https://lnkd.in/g6PtRh2P] 💻 GitHub Repository: [https://lnkd.in/gRDY-dE3] Excited to share my latest mini project — a Dice Roll Game that I built from scratch using core web technologies. This project helped me strengthen my understanding of DOM manipulation, event handling, and basic game logic. 🚀 Features: • Random dice generation on each roll • Dynamic UI updates using JavaScript • Clean and responsive design with CSS • Simple and interactive gameplay 💡 What I learned: Working on this project improved my problem-solving skills and gave me hands-on experience in connecting JavaScript logic with UI elements. It also reinforced how powerful vanilla JavaScript can be when building interactive applications. Feel free to check it out and share your feedback! #JavaScript #WebDevelopment #FrontendDevelopment #HTML #CSS #JS #Projects  ❤️

IPL Winner Predictor – JavaScript DOM Project: I’m excited to share another small project I built while practicing JavaScript DOM manipulation and event handling. In this project, when the “Click Me” button is pressed, the application dynamically displays a random IPL team name as the predicted winner of IPL 2026. This project helped me understand how JavaScript can make web pages interactive by updating content dynamically based on user actions. Key Concepts I Practiced: 1.) DOM Manipulation – Updating elements on the webpage dynamically. 2.) Event Handling – Triggering actions using button click events. 3.) JavaScript Logic – Selecting a random team using JavaScript logic. 4.) Dynamic Content Update – Changing the UI without reloading the page. Through building projects like this, my understanding of JavaScript and DOM interactions is gradually improving, and I’m gaining more confidence in creating interactive web applications. Learning step by step and building small projects every day. Checkout my projectcode on github: https://lnkd.in/gv3cm597 Feedback and suggestions are always welcome! #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #IPL #WebInteraction