Submitted about 2 years ago

Interactive-Rating! Html5, Css, Javascript vanila

nicolascabreradev• 30

@Kafka22

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

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

@elaineleung

Posted 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:

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%);
}
```
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

Posted 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">---------------------

Elaine• 11,400

@elaineleung

Posted 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

Please log in to post a comment

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