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

Interactive rating component solution using dom manipulation

@Ranadheerm6

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


Javascript newbie here. This is the first js challenge that I have completed all by myself. I know the code looks crude and less sophisticated but I managed to finish this challenge without looking at anyone's code. However I will keep optimising the code as I get better. Till then please do take some time out to review and give me pointers as to how I can make it less dry. Thanks :)

Community feedback

@anderson-fndz

Posted

  • to improve the code and not need to store each button in a variable it would be interesting to create a form and for each button to have an input type: radio this would make your code smaller, and adding a functionality to the buttons, the checked that would leave the selected button with a different color so that the user can see which option he selected
  • to make the card more like the original, try:
.card{
    width: 400px;
    height: 415px;
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    border-radius: 35px;
    background-color: #1F2630;
    color: #ffffff;
}
  • And you are to be congratulated for being able to do this code without needing help

Marked as helpful

1

@Ranadheerm6

Posted

@anderson-fndz Sounds great. Will try! Thank you :)

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