Interactive rating component using HTML, CSS, JS.

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  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

  Marked as helpful

  2

  ---

  

  Petru Banceanu•110

  @Petru14Posted over 2 years ago

  @elaineleung thank you for your feedback, I will try to use the first solution, just in case it's not working I will check the second one. Thanks! 😀

  1
• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 2 years ago

  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.

  3. 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.

  4. 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.:)

  Marked as helpful

  1

  ---

  

  Petru Banceanu•110

  @Petru14Posted over 2 years ago

  @pradeeps4ini thanks for your feedback it's really helpful , the only problem that I still have is with rating value, to change the background color only for the value selected, I fix the part when the value on the thank you card is = with the value selected , and also for the refresh button I try your solution but unsuccessfully. Thank you again I really appreciate your help!

  0