My New Random Quote Machine , constructive criticism will be very appreciated

Pressing the New Quote button does not seem to work. :frowning:

maybe you didn’t import jquery on your javascript field. :smile:

I’m the viewer. Why would I need to import something to view your website?

or it happens that a uploaded 16 Quote, so it probably has showed the same quote two times after each other , so you will not see the change happening :slight_smile:

Two responses to that:

  1. I clicked it over and over again, not just once. Using Firefox 58.
  2. If a user getting the same quote twice is a possibility, why not change your code to prevent that?

the problem it works with me ,can you try again :slight_smile:

It works for me in Chrome but not in Firefox. Ignoring that, here’s my feedback:

  1. The background takes too long to load because the file is too big. If you deploy this to production I would suggest scaling back the resolution from the existing 300 dpi to a web standard 72 dpi.
  2. Update your code to prevent the possibility of a user getting the same quote twice.
  3. Put the quote’s author in the same well as the quote instead of outside the well.

Nice use of Bootstrap. The site, over all, looks quite nice. :slight_smile:

#1) Your New Quote does not work in Firefox for me either. To fix this you need to uncheck the box under the JS Pen Settings under

Add script as a module
Add type=“module” on the Pen’s <script> tag

#2) If the quote has a semi-colon in it like "Be yourself; everyone else is already taken.”, then all text after the semi-colon is missing if you try and Tweet it.

#3) Avoid using inline-styling (such as seen in your New Quote button below) and instead make use of classes to define all of your styling. Why not move the font-family:Cursive;margin-left:150px; to the .box1 definiton?

<button id ="newQuote" style="font-family:Cursive;margin-left:150px;" class="box1">New Quote</button>

#4) You need to decide which Bootstrap version (3 or 4) you want to use and use only that syntax. Currently, you are loading both Bootstrap 3 and 4 under your CSS settings. Also, if you do not need the Bootstrap jQuery functions, then you should not add them as this makes your page load slower. The same goes for the jQuery UI library.

#5) Another strange effect when using any browser is when clicking the New Quote button. When the button is clicked, the text shifts below the button as shown below.

1 Like