Check out my Random Chuck Norris' Quotes Generator!

Check out my Random Chuck Norris' Quotes Generator!
0
#1

This is my second project in FreeCodeCamp.
I posted on CodePen but since it doesn’t support directories which I downloaded I uploaded it to my website.
Please check out this link


And tell me about your opinion.
Thanks!

#2

it doesn’t do anything when i click the next button.

#3

Well, it does work for me. However, I’d definitely change a few things:

  • Decrease font size
    These fonts are huge at the moment and make it kinda unreadable.
  • Make it responsive
    As your #centerBox's margins are given in pixels (300px on both sides), your box width is only 70px if the viewport is 740px. With that huge font size only 2 letters are displayed within the box. You could set the margins to auto and specify the width of the box.
  • Use Bootstrap’s grid correctly
    You added a .container-fluid div, but never added any rows or columns.
    Edit: you actually use columns and rows for the buttons, which make it even stranger :slight_smile:
  • Use semantic elements
    Instead of using <p id="title"> for your title, you could simply add an h1 element here.

I hope it helps.

#4

Thanks for your time, it helps a lot.
I’ll try to find time tomorrow to fix all you wrote.

edit : @michaelhenderson I don’t know why you cant see any random quote after clicking. I checked the website with two different computers and browsers.

#5

Design/programming issues aside, the quotes are quite funny.

I’m probably gonna use this generator when I have those random "wanna hear a good chuck norris joke’ moments with friends :grin:

#6

That is odd! I am using Firefox. I will check again later on chrome

#7

It worked fine for me on a Android smartphone.

Lol, this is a funny quote.
“Chuck Norris does not wear a condom. Because there is no such thing as protection from Chuck Norris.”

#8

Looks great I thought I had an original idea! Take a look at my version it is a work in progress. I came to the forum to see if I could find some info on how to dynamically change the background color.