Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rock Paper Scissors Lizard Spock

Alex Kim• 1,325

@alex-kim-dev

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


UPDATE: the issue is fixed!

Initial message:

Currently the solution is not working properly on FEM preview because the access to the local storage is restricted. Not sure how to go around this.

Visit this direct link to the solution to check out how it works.

Community feedback

P
Emmilie Estabillo• 5,540

@emestabillo

Posted

Adding another thumbs up Alex. Great work...I’m already sweating planning this project in my head lol. Liked and bookmarked!

1
P
Matt Studdert• 13,611

@mattstuddert

Posted

Hey Alex, awesome work on this challenge. Your solution looks amazing and I love the additional animations. They really improve the experience and make it even more fun to play!

What's happening with the localStorage for you? For me, it works without a problem in the preview and saves the score even when you refresh the page. Interested to hear about what's happening for you.

One tiny improvement I'd recommend would be to add position: absolute to the Rules button in the bottom right corner. This would stop it from jumping around when the game moves through the various states.

Amazing work, as always! 🙌

1

Alex Kim• 1,325

@alex-kim-dev

Posted

Hello Matt, thanks for the feedback! Glad to hear you liked it :) I checked the preview page in different browsers and it works fine in Firefox & Opera, but in Chrome & Brave I get

That's on linux (Manjaro). What seems odd to me is that even checking with if (window.localStorage) before accessing the storage doesn't help.

1
P
Matt Studdert• 13,611

@mattstuddert

Posted

@Alex-K1m that's very odd. The way I'd do it would be:

const score = parseInt(localStorage.getItem('score'))

But I'm not sure that would change anything. I'm using Chrome on MacOS and it's working perfectly through the preview 🤷‍♂️

0
Alex Kim• 1,325

@alex-kim-dev

Posted

@mattstuddert I figured out the problem - the third-party cookies are turned off in my browser's settings. It turns out this setting also blocks access to local storage to prevent tracking. (at least for Chrome). I enabled them for frontendmentor and it worked. I also added some code to catch the error and now it doesn't crash even if the access is blocked - the score just won't persist between sessions.

1
P
Matt Studdert• 13,611

@mattstuddert

Posted

@Alex-K1m nice work! That’s great that you’ve resolved the issue 👍

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord