Feedback about my project - Random Quote Machine

Code Feedback
1

Hello everybody,

please tell me something feedback and suggestions about my project Random Quote Machine…

I have a problem whit Twitter option. When I want tweet code in the new page I just see this:

image
image1366×768 128 KB

Please help me, why don’t have a quote and author in tweet?

Here is my code:

Thanks…

2

First of all, props on the keyboard focus indicator for the buttons. Most people just leave the browser default (which in my opinion is not good enough) or remove the indicator completely.

Now for a few suggestions:

  • You skipped from an h1 heading to an h5 heading. That h5 should be an h2. And to be honest, IMHO it should not even be a heading.
  • All of the content should be wrapped in a <main>
  • There is an empty <p> that should be removed (between the author and the buttons).
  • What is a <wrapper>?
  • The responsiveness to both changes in view port width and text size is overall very good. I only have one minor suggestion. At larger text sizes sometimes the quote box is narrow enough that only two or three words can fit on a line but yet there is plenty of space to expand the box horizontally. I would recommend that instead of putting side margins on the quote box you instead place a max-width on it (in em units) and then center it with auto side margins. And I don’t think you need bootstrap at all (it’s probably overkill for a layout this simple). You can put a small padding on the <body> to keep the box from getting too close to the browser edges.
  • If you want to strive to be more semantically correct then consider using a <figure> and <figcaption> to mark up the quote. Find the “Quotations” section on this page to see how the people at mozilla do it:
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

As for why your twitter quote isn’t working, look very closely at the ampersands in the URL, I think you’ll have a little double vision.