Random Joke Machine - Chuck Norris

Hey guys,

https://jokesofchucknorris.netlify.com/

Although this isn’t my first random quote machine project, please take a second to review it.

Thank y’all.

1 Like

OMG, I love this. I just did the survey form, using Chuck Norris.

1 Like

Thanks! appreciate your compliment :slight_smile:

Nice, I like it. That gif is pretty fantastic as well.

  1. I would give the quoted text a tiny text shadow to make it more legible against the white star in the background.

text-shadow: 1px 1px 2px black;

  1. Personally, I would speed up the button hover background color transition just a hair (like .3 instead of .5). I think it is partly because of the ease-in easing that makes it feel slow if you use ease-in-out the .5 works fine.

  2. I think stacking the layout sooner might be better (like at 680px).

  3. The font size change in the max-width: 1024px media query is causing the rem positioning of the gif to move down. If you set its position as a px value I think you then won’t have to change the position in a media query (top: -55px; seems to work OK).

.QuoteBox_quote_box__15vRA .QuoteBox_img_box__bFqC8 {
  position: absolute;
  top: -55px;
  left: 45%;
}

Thanks @lasjorg I find your comments very helpful like last time :slight_smile:

No problem, I’m glad you found the feedback constructive. You have some nice projects going, keep trucking.:+1:

Made few more changes like giving an option to filter out explicit content and give type write effect on the quote rather than popping it up.