Random Quote Machine. Feedback would be appreciated

Page looks nice.

Two things I noticed:

Resizing does not work properly.
When I block connection to quotable.io I see " " in a place of quotes.
You can use empty string or some fill quote.

Code (only one thing that irked me):
A little bit confused about element attributes and element contents inside render.
Indentation will work wonders.

Nice job overall.

1 Like

Thank you i have made this change.

I used and just reused the inbuilt formatter in Codepen.

I don’t know how I did it but changed some units and it works now. I think I spent a lot of time than I needed on this project so going to submit it now. Thank you for the suggestions.

By the way do you know what’s the easiest way to deploy this to a netlify page. In my previous to do list app I did npm run build and then uploaded the file to the hosting server. I wonder whether I have to do that every time for even small projects like this with just one component. [The create react app has a ton of stuff in it right. Wondering whether whether there is a quick and easy way to deploy react apps to netlify. I’m assuming directly uploading the html css and js files would not work right? ]

@DanCouper tagging you since you had recently commented.

Nope, did not use netlify.

now my quote box is not in the center of the screen. Do you have any suggestions on how to fix it?

This for some reason is not working

display: flex;
justify-content: center;
align-items: center;

https://codepen.io/pieheart/pen/KKqKogV?editors=0110

Nevermind solved it using min-height instead of height

A few suggestions:

  • I think the <blockquote> element would be appropriate here. Check out how MDN marks up a blockquote.

  • The content should be inside a <main> element.

  • I don’t comment on style too much since I’m no artist but I’m not sure I like the way the width of the box changes each time and thus the buttons are always shifting left/right. I think it would be better if you kept the width consistent.

  • Bravo on customizing the keyboard focus outline so it is more obvious. I’m assuming you used box-shadow in order to get the rounded corners. The only problem with using box-shadow is that if you use windows high contrast mode (or something similar) the box-shadow colors are not affected and thus they can be hard to see. Fortunately, the browsers are beginning to make the outline property respect the border radius set on the element. The newest versions of Firefox already do this and Chrome is going to be supporting it very soon. You can use a media query to detect high contrast mode and then alter the box-shadow color accordingly. I don’t expect you to actually do this for this project I’m just letting you know that soon you won’t have to use box-shadow to get the rounded focus outline and that there are accessibility concerns with using box-shadow.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.