HTML, CSS and JavaScript

Community feedback

• 

  mahen2-cmd•150

  @mahen2-cmdPosted over 1 year ago

  Great Job Ali!

  I just solved the challenge with the background color changing when the input is :checked. You might want to look at my solution.

  https://www.frontendmentor.io/solutions/interactive-rating-component-solution-using-html-css-and-javascript-iGOlR8A7xn

  Here is what I did:

   {
              button.addEventListener("click", function() {
                if (selectedButton) {
                  selectedButton.classList.remove("highlight");
                }
                button.classList.add("highlight");
                selectedButton = button;
              });
            });
  
  
  

  and added css

  .highlight {

  background-color: hsl(25, 97%, 53%);
  color: white;
  

  }

  Now, whenever a button is clicked the .highlight css is activated and it would change the color of the button.

  0
• 

  P

  Amy Spencer•300

  @amyspencerprojectPosted over 1 year ago

  Good Job Ali!

  I remember having some of the same issues with the :checked. In the end I took my <input> out of the <label> div for accessibility reasons. And then just used adjacent sibling combinators to get my :hover and :checked. Like this input:checked + label { background-color: var(--light-grey); }

  Did you try combining the label and input?

  label input:checked { background-color: red; }

  or maybe

  label > input:checked { background-color: red; }

  The Stephanie Eccles article I used as a resource has a solution that also might work for you. And she has the <input> nested into the <label>. Step #4 https://moderncss.dev/pure-css-custom-styled-radio-buttons/

  Hope this helps you. Amy

  0

  ---

  

  Ali Ali•40

  @alibeniaminaliPosted over 1 year ago

  @amyspencerproject

  Hey Amy, thanks a lot. I actually tried both options and none of them worked. I might need to take the inputs out of the label and work it from there. I will have a look at the link you suggested too. Thank you

  Kind regards, Ali

  0

  

  Ali Ali•40

  @alibeniaminaliPosted over 1 year ago

  @amyspencerproject

  Hey Amy,

  I found a very useful solution to the problem.

  label:has(input:checked) {
    background-color: var(--orange);
    color: var(--white)
  }
  

  This is basically checking if the label has a checked input inside of it and if it does it changes the color.

  My solution usually starts with a disabled button so the users cannot submit until they don't select an input.

  Hope this can help in the future.

  0

  

  P

  Amy Spencer•300

  @amyspencerprojectPosted over 1 year ago

  @alibeniaminali

  Of course! :has 😆

  Thanks for the update!

  0