Thrilled to share my latest JavaScript project: Rock-Paper-Scissors (Human vs Computer)! 🎮 Built from scratch with HTML, CSS & pure JavaScript: > Real-time gameplay with dynamic UI updates > Score tracking (user vs computer) > Win/Draw/Lose messages with color feedback > Responsive design & smooth event handling This project helped me master DOM manipulation, events (click), array methods, conditions, and logic flow. GitHub: https://lnkd.in/d7VequBY Watch the gameplay below! Excited to keep building more interactive projects. Feedback & suggestions welcome! #JavaScript #WebDevelopment #Frontend #GameDev #DOM #CodingJourney #SelfTaught
More Relevant Posts
-
🚀 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
To view or add a comment, sign in
-
Happy St. Patrick's Day! ☘️ I built a small interactive web experience for the occasion — a pot of gold you can actually click. What I practiced with this project: • CSS keyframe animations & physics-style coin arcs • Dynamic DOM manipulation with vanilla JS • SVG illustration entirely in code • Deployed via GitHub Pages in under 5 minutes Sometimes the best way to sharpen your skills is to build something fun and ship it. Try it here →[https://lnkd.in/g3jcGzcn] #WebDevelopment #JavaScript #FrontendDev #BuildInPublic #StPatricksDay #100DaysOfCode #OpenSource
To view or add a comment, sign in
-
🐍 Built a Snake Game using HTML, CSS, and JavaScript! I recently worked on building the classic Snake Game from scratch using Vanilla JavaScript. This project helped me practice DOM manipulation, game logic, and state management while creating an interactive browser game. ✨ Features of the game: • Dynamic grid-based game board • Smooth snake movement using keyboard arrow keys • Random food generation • Score system that increases when the snake eats food • High score saved using Local Storage • Timer to track gameplay duration • Start Game and Game Over modals • Restart functionality to play again instantly 🧠 Concepts I practiced while building this: • DOM manipulation • Event handling with keyboard input • Game loops using setInterval() • Working with arrays and objects for game state • Using Local Storage to persist data Projects like this are a great way to strengthen JavaScript fundamentals and understand how interactive applications work in the browser. I’m planning to improve this further by adding: 🎯 Self-collision detection 🎯 Better animations and UI 🎯 Mobile controls 🔗 Live Demo: https://lnkd.in/g8ZDj5hy #JavaScript #WebDevelopment #FrontendDevelopment #Coding #BuildInPublic #100DaysOfCode
To view or add a comment, sign in
-
🎮 Built a Snake Game using HTML, CSS & JavaScript — with persistent high scores! This project was more than just recreating a classic game. I focused on making it interactive and state-aware. 💡 Highlights: • Smooth snake movement & keyboard controls • Real-time score tracking • 🧠 High score saved using LocalStorage (persists even after refresh) • Game over + restart functionality • Clean UI for better user experience ⚙️ One interesting challenge was managing game state and ensuring the high score updates correctly without breaking the flow. This project helped me understand DOM manipulation, event handling, and how browsers can store data locally. 🚀 Next: Adding levels, sound effects, and mobile responsiveness! Would love your thoughts and suggestions 🙌 #JavaScript #WebDevelopment #Frontend #Projects #Coding #100DaysOfCode
To view or add a comment, sign in
-
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
To view or add a comment, sign in
-
Building simple games is seriously one of the best ways to level up your JavaScript logic! 🎮💻 I recently challenged myself to build a dynamic Quiz Game using just HTML, CSS, and JavaScript. My main goal was to focus on creating a seamless, interactive user experience with snappy feedback and a responsive design that adapts to any screen size. A few things I focused on: ✅ Writing modular, easily readable JavaScript logic ✅ Adding subtle CSS effects to make the interactions feel "alive" ✅ Ensuring the layout doesn't break on smaller mobile screens Every project teaches you something new, and this one really helped me sharpen my DOM manipulation skills. Source code is up on my GitHub: [https://lnkd.in/gm3Ey5wD] If you're a developer, what was the first game you ever coded? Let me know in the comments! #JavaScriptDeveloper #FrontendDev #Coding #WebDesign #TechCommunity #BuildInPublic #Developer
To view or add a comment, sign in
-
Built a Snake Game using HTML, CSS & JavaScript 🎮 Today I built the classic Snake Game from scratch using pure frontend technologies 🚀 🛠 Tech Used: HTML – Structure CSS – Styling & Game Board Design JavaScript – Game Logic & Movement 💡 What I implemented: ✔ Snake movement using arrow keys ✔ Food generation at random positions ✔ Score tracking system ✔ Collision detection (wall + self) ✔ Game Over logic This project helped me understand: DOM manipulation deeply Event listeners (keydown events) setInterval & game loops Array manipulation for snake body tracking Real-time UI updates Building small games is one of the best ways to improve JavaScript logic 🔥 Next goal: Add levels & increasing speed 😎 What was the first game you built while learning JavaScript? #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #LearningInPublic
To view or add a comment, sign in
-
Day 62/100 🚀 Built a Rock–Paper–Scissors game using HTML, CSS, and JavaScript. Play against the computer and the score updates dynamically. Next step: adding animations and sound effects to improve the experience. 🔗Live Demo : https://lnkd.in/dEYfa7zd 💻GitHub Code:https://lnkd.in/ddjK3m7P #100DaysOfCode #JavaScript #WebDev #BuildInPublic
To view or add a comment, sign in
-
-
Hey Everyone!! #Day25 of #30DaysCodingChallenge Today I built a Number Guessing Game Web Application using HTML, CSS, and JavaScript. What I Built An interactive game where users guess a number between 1 and 10. The application provides feedback on whether the guess is too high, too low, or correct, and tracks the number of attempts and the high score. Purpose of the Project The goal was to improve my understanding of JavaScript logic, DOM manipulation, and localStorage while creating a fun and engaging game. Key Features ✔ Input validation for guesses. ✔ Real-time feedback: “Too High”, “Too Low”, or “Correct! ”. ✔ Counts the number of attempts. ✔ Stores and displays the high score using Local Storage. ✔ Reset button to start a new game instantly. ✔ Clean and centered UI with intuitive design. What I Learned 🔹 How to generate random numbers with Math.random(). 🔹 How to handle user input and provide dynamic feedback. 🔹 How to track attempts and implement high score logic. 🔹 How to persist data with localStorage. 🔹 How to structure a small game logically and efficiently. Creating small games like this is helping me practice JavaScript fundamentals while building something enjoyable and interactive. #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #CodingChallenge #BuildInPublic
To view or add a comment, sign in
-
Work in progress: Building the Snake Game using JavaScript logic Yesterday I shared the idea and visual design of the Snake Game. Today I started implementing the core logic in JavaScript. The first step was creating the board dynamically instead of writing HTML for every cell. The board is divided into blocks using fixed block width and height. Using the board's width and height, I calculate how many rows and columns can fit inside the board. I then use two nested loops to generate the grid. For each row and column, a new div element is created and added to the board. Each block is also stored inside an object using coordinates like row-column so that it can be accessed quickly later. Next comes the snake structure. The snake is represented as an array of objects where each object contains x and y coordinates. These coordinates represent the position of each segment of the snake on the grid. The render function is responsible for displaying the snake on the board. It loops through each segment of the snake and finds the corresponding block using its coordinates. Then it adds a class to visually fill that block, making it appear as part of the snake. This approach makes the board behave like a coordinate system where every cell can be accessed instantly using its row and column values. The next steps will be implementing movement logic, keyboard controls, food generation, collision detection, and score updates. Currently focusing on building the core logic step by step. #JavaScript #WebDevelopment #GameDevelopment #LearningByBuilding #FrontendDevelopment
To view or add a comment, sign in
-
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development