My solution to the Frontend Mentor "Rock, Paper, Scissors game" challenge
Caution
Challenges like these are an opportunity to improve by coming up with your own solutions. Take your time and think about your approach. If you can't complete a challenge, skip it and come back to it later. Only look at someone else's solutions as a last resort, and treat it as a defeat.FrontendMentor is a platform that provides real-world front-end coding challenges to help developers improve their skills. It offers projects ranging from simple layouts to complex web applications, allowing users to practice HTML, CSS, and JavaScript by building solutions that closely resemble professional work.
Frontend Mentor is a great resource for developers looking to gain hands-on experience by working on practical projects. The challenges help reinforce best practices, improve design implementation skills, and build a portfolio. However, since there is no automated grading system, feedback depends on community reviews, making it essential to engage with others for constructive criticism.
My solution to the Frontend Mentor "Rock, Paper, Scissors game" challenge. This project was built using pure JavaScript and LESS. The logic part was fairly easy, but setting the pick options in a triangular and pentagonal shape was tricky.
Check out the live version of this project, as well as my Frontend Mentor profile.
Languages:
- JavaScript
- HTML
- CSS
Libraries and frameworks:
Programs:
- ✅ Optimal layout for the game depending on their device's screen size
- ✅ Play Rock, Paper, Scissors against the computer
- ✅ Maintain the state of the score after refreshing the browser (optional)
- ✅ Bonus: Play Rock, Paper, Scissors, Lizard, Spock against the computer (optional)
-
Use live version.
-
Download this repository and:
- Open project in VSCode
- Run VSCode live server extension
- Or open project in Prepros
I do not own the rights to the content of the challenges. All challenge data was downloaded and included only to provide context for the solutions.
The header displays the current game mode name and the player's points for this mode.
The footer contains two buttons:
- Change Game – Switches the game mode.
- Rules – Displays the rules for the selected game mode.
It also includes an attribution section with links to the challenge and solution authors.
The pick menu contains buttons representing the possible choices for the selected game mode. The user must click on one of the options to play.
The result menu displays the user's pick and a randomly generated pick by the computer. It highlights the winner of the round and adjusts the points according to the game rules.
The rules view shows an image illustrating which picks defeat others.
