Advice Generator App using typescript

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello man, congrats on finishing the challenge, I think I know why your button is getting the box-shadow effect when clicked.

  You are using the :focus pseudoelement, this mean that your button will get the opacity prop every time is focused (when is clicked and you dont click in other elements), you dont need to set a focus or after to get the desired effect, you can remove both pseudoclasses and just keep :hover with these styles:

  #btn:hover {
    box-shadow: 0 0 2em 0.5em hsl(150, 100%, 66%);
    transition: box-shadow 500ms linear;
  }
  

  Hope this helps, just with the :hover pseudoelement you will get the desired result.

  1
• 

  Tim•100

  @tlauffsPosted over 2 years ago

  Try using the :hover Selector instead of an ::after pseudoelement to create the glow effect. It will only trigger on hover and you should only need a box-shadow to create the effect. You should also consider adding a :focus state for keyboard navigation as :hover states aren't shown.

  1
• 

  Artur Harutyunyan•400

  @ArturHarutyunyan1Posted over 2 years ago

  Make your .advice-container centered. *{margin: 0; padding: 0; box-sizing: border-box}. Remove body{padding: 10%;} and set body height to body{height: 100vh}

  0