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

Rating Card (HTML, CSS, JavaScript)

IV1011 20

@IV-1011

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How can I keep my hover effect after clicking an option? I lose the hover color when an option is selected.

How can I reassign the localStorage value? If the user presses back on the browser, the value remains the same.

Community feedback

@jonathon-eng

Posted

To answer your first question, the most common and easy way to keep the hover color after selecting was just to build it using radio buttons and styling them to look like the sample. To achieve that with your method could require a lot more (and possibly unnecessary javascript)

The second question seems to be to the fact that you built the site using 2 html files and you are linking them via the submit button. There's a bunch of stuff regarding that fact, but the point is that I don't think manipulating localStorage is necessary, and frankly required, for a task that can be done in one page.

One way to solve that issue is to just put the finished card directly from your typage.html into your index.html and hide it with CSS. Then upon submitting, you can just toggle between showing and hiding the start and complete cards with some Javascript.

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