Quote Machine / Help with CSS

Code Feedback
1

Code Feedback JavaScript HTML-CSS

Preview
Github

So in my website, transformations are applied when a user hovers over the buttons. After clicking, the transformation remains even when I’m no longer hovering. How do I modify it so that that It goes back no normal when the user isn’t hovering?

I would also like some feedback on my JavaScript, mainly about organization or anything that would make it better.

1 Like
2

Hi @Arlen

Here is a suggestion.

Add :active before the hover pseudo selectors.
Remove all two pseudo selectors with :focus .

.quote-box button:hover,
.quote-box button:focus,
.quote-box a:hover,
.quote-box a:focus {
  transform: scale(1.1);
  box-shadow: 0.0625rem 0.0625rem 1.5625rem var(--accent);
  cursor: pointer;
}

However about generating a random index so you don’t always request the same quote?

Happy coding

1 Like
3

Thanks for the help with the CSS. Regarding the quote, this api work when I open it manually in my browser. Fetching the data, I get this error

image
image706×102 6.11 KB

I thought this issue was because I was using live server extension. I didn’t realize that it would carry over to github pages.

4

You can try using https://dummyjson.com/docs/quotes instead.

1 Like
5

Thank you. I’ll try it.