Quote Generator Feedbback

Friend’s give me some feedback on css, javascript so that i do better.
Here’s the my quote generator link.

hey @madansinha,

I think the design is really good and the code is very simple but effective and also easy to read so that’s good, one thing i would say about the design is change the font, that font makes it very hard to read the quote .

If you want to challenge yourself a bit more it might be a good idea to fetch your quotes from an api and display them on your page instead of having them hardcoded in your js file, its definitely a good idea to learn how to handle api calls as we all have to use them at some point.

@biscuitmanz thanks😊 for your valuable feedback , I will take note for future projects.

A few accessibility issues I’ll point out:

  • There is no keyboard focus indicator on the Click button. You have the CSS outline property set to none, which is fine if you then replace it with something else to indicate that the keyboard focus is on the button.
  • Speaking of the Click button, this is not a very accessible name for the button. Everyone knows that you click on a button. The name should describe what the button actually does. So something like “Get Quote” or “New Quote”.
  • As I manually increase the text size the quote breaks out of its container. If you don’t know how to manually increase the text size, using Firefox, go to Edit->Preferences, scroll down to Zoom and activate ‘Zoom text only’. Then while holding down the Ctrl key scroll your middle mouse button to increase the text size. Your app should be able to gracefully handle a minimum 200% increase. This one is pretty easy to fix, you just need to get rid of the CSS height on the containers so they can grow as the text size gets bigger. I’d probably change the width on those to em units as well so they can grow wider as the text size increases.
  • Semantically, there are better HTML elements you can use for the quote. At a minimum you could use <q> but this feels more like a <blockquote> to me. If you really want to get fancy you could put the whole thing in a <figure> and use a <figcaption> for the author, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote.
  • You should probably have this wrapped in a <main>.

@bbsmooth great points but he looks like he aint been coding long so most of this will go over his head, keyboard focus indicator this means nothing to him.

if your doing bullet points explain what each point means and how it works.

remember how hard it is learning from points and how easy it is from explanations