Interactive rating component using HTML, CSS, JS.

Hi Petru, I did this challenge a while ago and recently updated it with a different approach using radio buttons, but I think my old code might still help you out a bit. First, in your buttons, you'll want to add a value for each button, like this:

<button class="btn" value="1" />1</button>

Here's roughly what the JS looked like:

const cardEl = document.getElementById("cardEl");  
const scoreBtns = document.querySelectorAll(".btn");

let selected = null;  // this will keep track of which button is pressed

scoreBtns.forEach((btn) => {
  btn.addEventListener("click", (event) => {
    event.preventDefault();
    selected = btn.value;
    selectScore(selected);
  });
});

// this function handles what happens when the button is pressed

function selectScore(selected) {
  scoreBtns.forEach((btn) => {

  // first, remove all classes
    btn.classList.remove("is-selected");

  // checks button to see if value matches selected
    if (btn.getAttribute("value") === selected) {

  // adds class to button
      btn.classList.add("is-selected");
    }
  });
}

In the CSS, you just make sure you write a rule for the button with the selected class and also the button hovered:

.btn:hover {
  background-color: // btn color here;
}
.is-selected {
  background-color: // selected btn background color here;
}

Hope this helps you out a bit! If you're interested in my radio button accessibility version (which is more complicated with labels and inputs being hidden and tabbed), you can check out my solution here: https://www.frontendmentor.io/solutions/responsive-interactive-rating-component-SeBo-aR4gB

Hi, @petru14. How are you?

You have done a great job implementing the design.

I would like to suggest some changes, if you don't mind.

1. You've wrote the HTML for the card in a <header>. You should've used <main> instead. <header> is used for the heading of the page. For the main content, which is card in our design, should be in the <main> element. For the footer, you can use <footer> element. Using right elements for the right content is better for readability and accessibility. You can read more here... https://developer.mozilla.org/en-US/docs/Glossary/semantics.

2. You don't need "d-flex and container" styling on the, "container", "cont", and "content" wrappers. They have block level elements, they automatically position themselves vertically.

In the "cont" and "cont-1" wrapper, you don't need a max-width: 600px and width: 100%. Because you've specified a "max-width:380px" in the "content" wrapper element. With these changes you won't need media queries to resize the "content" wrapper element. It will auto resize itself.

In the "cont" and "cont-1" add a property of "margin-inline: 1rem;" to give some side margin.

1. You can set the property "flex-wrap: wrap;" on <ul>. This way the <li> items will break to 2nd line when the size is too small for them to fit.

2. I wrote a simple demo code to show, how you can get the chosen rating and display it. Read it, modify it and learn from it. https://codepen.io/pradeeps4ini/pen/OJvZGev?editors=1011

https://codepen.io/pradeeps4ini/pen/qBojyLK If you want to create something that can refresh the page with a button without refreshing the browser tab. I hope, i could help you.:)