Here is my attempt at creating a random quote machine, I wasn’t able to get it to work with React sadly so I used vanilla JS. I’m still waiting for Twitter to approve my developer application to access the API so I thought it’s better to get some feedback during that time, thanks.
Congrats on completing the project. This one is fairly simple so using React is somewhat overkill. But you’ll definitely want to use it for some of the others since that’s part of the point of these challenges.
A few suggestions:
Some of the colors make the content very hard to read, such as the bright baby blue and neon green. You should use the WebAIM color contrast checker to make sure all of your color combinations are accessible.
You have set the width on the quote box to 500px which doesn’t allow it to grow wider as I increase the text size. I’m not referring to page zoom here, but text only zoom. Users may be viewing your page with a much larger text size then you anticipate and your page should be able to handle that gracefully. Therefore, I suggest you set the width in em units so the box can grow wider as the text size increase.
The new quote button is embedded in an anchor tag, you don’t want this. Lose the <a> and just use a <button> there. (This is related to the second point below.)
For accessibility, the twitter link needs to have actual text associated with it. Add something like “Tweet this quote” to the <a> and then you can visually hide it with CSS so it doesn’t show up on the page (google it if you don’t know how).
Speaking of <a> tags, you’ve got a bunch of empty ones that should be removed (look at your HTML in dev tools). I would recommend you use codepen’s HTML analyzer.
When I narrow the browser all the way in the new quote button drops to a separate line and floats all the way to the left. Was this your intent?
Part of design is making sure it is accessible. Your theme colors should be accessible. For this simple personal project you can get away with it. I pointed this out because if you are going to do this stuff professionally then you will need to know about color accessibility.
The <button> was originally being wrapped in an <a> tag by the browser because of the problems with your <a> tag in the HTML. If you had looked at the HTML in dev tools you would have seen that the <button> was wrapped in an <a>. Now that you have fixed your HTML issues this is no longer happening.
I think you have made some changes to the bottom row which is now preventing the new quote button from moving down to a line of its own at narrow views. Or this also could have been because of the issues you had initially with the <a> tag in your HTML. Regardless, it is now fixed. It’s amazing how many issues clear up when something basic like the HTML is fixed