Skip to content
Submitted almost 3 years ago

Interactive-Rating! Html5, Css, Javascript vanila

nicolascabreradev•30
@Kafka22
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi! after going over and over how to submit a new child for my span, I finally understood that the submit has a default mission. That's what took me the longest. This challenge helped me to understand how to traverse an array with "forEach" and implement "arrows functions". Please, any criticism is welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Elaine•11,360
    @elaineleung

    Hi Nicola, great job completing this second challenge! Well done in learning who to use forEach and then applying it to this project 😊

    I'll try to give some feedback here, just two points:

    1. I see that in your addEventListener you are using focus for the buttons, and this can have some problems. If you click on a button and then accidentally click something else, such as the text or even the background, your button will lose focus, and it will look like no buttons were selected, even though the score is already collected in the background. What you want to do instead is to use a class for styling. In the CSS, you can write a selected class with the style changes and then use the event listener to add the class. The CSS can look like this:

      .is-selected {
  background-color: hsl(25, 97%, 53%);
  color: hsl(0, 0%, 100%);
}

    2. If I don't select anything but hit the Submit button, I still get brought to the "thank you" page. You can try to write an if statement to prevent that from happening.

    If you need any ideas, you can check out the CodePen that I made for this challenge: https://codepen.io/elaineleung/pen/RwMqMxZ

    Once again, great job with all the research and learning!

    Marked as helpful
  • nicolascabreradev•30
    @Kafka22

    Please, I am always appearing in all reports, and I don't know what to do. What does it mean?

    ---------------The page must contain a level one heading

    Context:

    <html lang="en">---------------------

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