https://github.com/umarSiddique010/rock-paper-scissors-js
Rock-Paper-Scissors Game: A modern take on the classic hand game, fully designed and developed from scratch. Built with HTML, CSS, and modular JavaScript, featuring responsive design, SOLID principles, OOP, and dynamic DOM manipulation for an interactive user experience.
https://github.com/umarSiddique010/rock-paper-scissors-js
css dom-manipulation front-end-development game-development html javascript modular-javascript oop responsive-design solid-principles the-odin-project-game web-development
Last synced: 5 months ago
JSON representation
Rock-Paper-Scissors Game: A modern take on the classic hand game, fully designed and developed from scratch. Built with HTML, CSS, and modular JavaScript, featuring responsive design, SOLID principles, OOP, and dynamic DOM manipulation for an interactive user experience.
- Host: GitHub
- URL: https://github.com/umarSiddique010/rock-paper-scissors-js
- Owner: umarSiddique010
- Created: 2024-12-27T07:13:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-27T07:16:08.000Z (over 1 year ago)
- Last Synced: 2024-12-27T08:25:23.184Z (over 1 year ago)
- Topics: css, dom-manipulation, front-end-development, game-development, html, javascript, modular-javascript, oop, responsive-design, solid-principles, the-odin-project-game, web-development
- Language: JavaScript
- Homepage: https://umarsiddique010.github.io/Rock-paper-scissors/
- Size: 138 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Rock-Paper-Scissors Game
Welcome to the **Rock-Paper-Scissors Game** repository! This project is a modern implementation of the classic hand game, combining an elegant design with advanced programming concepts, showcasing the **SOLID principles** and object-oriented programming.
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [Color Palette](#color-palette)
- [Technologies Used](#technologies-used)
- [Learning Objectives](#learning-objectives)
- [Credits](#credits)
## Overview
The **Rock-Paper-Scissors Game** is a creative and engaging project designed to deepen my understanding of fundamental programming and design concepts. Inspired by [The Odin Project](https://www.theodinproject.com/), this project reflects my originality and vision, featuring:
- An independently imagined game flow, design, and UI/UX.
- Implementation of **SOLID principles** and modular JavaScript.
- A fully responsive and interactive interface built with custom CSS.
## Features
- **Interactive Gameplay**: Users can choose between Rock, Paper, or Scissors, with live feedback on the results.
- **Dynamic Feedback**: Displays the winner of each round and updates the user interface accordingly.
- **Responsive Design**: Adapts seamlessly to various screen sizes, ensuring a smooth experience across devices.
- **Reset Functionality**: A reset button allows users to restart the game effortlessly.
## Color Palette
This project uses a cohesive and modern color scheme to enhance the user experience:
- **Primary Background**: `#222831` (Dark Charcoal)
- **Game Pad Background**: `#31363F` (Slate Gray)
- **Text Color**: `#EEEEEE` (Off-White)
- **Accent Color**: `#76ABAE` (Soft Cyan for buttons and highlights)
- **Shadow Color**: `#EEEEEE` (Light Gray for depth and emphasis)
## Technologies Used
- **HTML**: Structured the page layout and semantic elements.
- **CSS**: Styled with a responsive and minimalist design for modern aesthetics.
- **JavaScript (ES6)**: Applied dynamic functionality, game logic, and event handling.
- **SOLID Principles**: Integrated principles for scalable and maintainable code.
- **Object-Oriented Programming**: Used classes and encapsulation to manage game logic efficiently.
- **DOM Manipulation**: Updated the UI dynamically based on user actions.
## Learning Objectives
This project was an excellent opportunity to:
- Apply **SOLID principles** and enhance my understanding of their real-world usage.
- Implement **OOP** concepts like classes, methods, and encapsulation.
- Practice **DOM manipulation** for creating interactive web applications.
- Deepen my skills in **responsive design** and creating visually appealing layouts.
- Gain experience in designing and implementing a project from scratch.
## Credits
- **Inspiration**: Project concept derived from [The Odin Project](https://www.theodinproject.com/).
- **Design & Development**: Entirely envisioned, designed, and developed by me, including the UI/UX and game logic.
- **Icons**: Custom assets like Rock, Paper, and Scissors icons designed to match the aesthetic of the game.
---
This project showcases my growing expertise in web development, focusing on writing clean, scalable code while maintaining a high standard of originality and design. Feedback and suggestions are always welcome to help me improve!