Skip to content
Submitted about 2 years ago

Interactive-Rating! Html5, Css, Javascript vanila

nicolascabreradev•30
@Kafka22
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

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!

Community feedback

  • Elaine•11,400
    @elaineleungPosted about 2 years ago

    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
    0
  • nicolascabreradev•30
    @Kafka22Posted about 2 years ago

    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">---------------------
    0
    Elaine•11,400
    @elaineleungPosted about 2 years ago

    @Kafka22 For the level one heading, it means you need an h1 tag. You can ignore it if you want, but in a real life application, you want to make sure you have one because it will help with search results.

    If you want to fix this, you can try adding an h1 with a visually-hidden class so that you cannot see it on screen.

    // HTML
<h1 class="visually-hidden">Interactive rating component</h1>

// CSS
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

    Let me know if that helps you or not!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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