Random Quotes - FrontEnd Library Project

Hi all,
I have completed the random quote machine challenge.
Here is the link to my project https://codepen.io/Pooja_V_Nair/full/JjGqraK

  • Used libraries - Bootstrap,jquery.
  • I used this API to get quotes - https://api.quotable.io/random
  • Used jquery for changing colors selected randomly from a given array of colors.
  • Used javascript to change the model of speech bubbles

Comments and feedbacks are highly appreciated especially about usage of libraries,functionality,responsiveness,colors etc.

Thanks PVN

Just a few things:

  • I can’t see the keyboard focus indicator on either the New Quote button or Twitter link. Use the CSS outline property to make it more prominent.
  • The Twitter link needs text associated with it so that screen readers will have something to announce when the link is focused. Make the text something like “Share this quote on Twitter” and then visually hide the text (google on how to do this).
  • When I narrow my browser as skinny as it will go there is still quite a bit of side margin on the quote box which makes the box very narrow. This may not seem like a problem at the default font size but if you manually increase the font size a little then you really notice the narrow box. I would suggest that you remove most of the side margins on the quote box at narrower widths.
  • All of the content should be wrapped in a <main>.

Hey PVN,

congrats on your project, great work! :clap:

My ideas:

  • great work fetching data from an API and using async/await and try/catch
  • you use a mixture of the default JavaScript selectors and the jQuery ones; I would try to keep this consistent
  • the height of the quote box “jumps” depending on the length of the code; I think a fix height would look better
  • you can increase the readability of your code by 1. clicking on the small arrow on the right side of the code box and 2. clicking Format HTML/CSS

Keep us posted!

Hi @bbsmooth,
Thank you so much for the comments.

  • I have increased the width of the button focus outline to make it more visible.

  • There is a title attribute with value - ‘Tweet this quote!’ for the twitter link.Do I need to add anything else to associate text with the link.

  • I am using bootstrap container class for quote box.Can you provide a screenshot for the exact problem with the width.

  • Wrapped in main

The title attribute doesn’t provide enough accessibility for the link. You should have actual text inside the <a> for the screen reader to read. The good news is that you can visually hide that text so it isn’t seen on the page.

One of the goals of responsive design is to adjust the layout to the amount of horizontal room you have. When you don’t have a lot of horizontal room you should try to maximize your use of the space in order to fit your content as nicely as possible. When I narrow my browser as skinny as it will go your quote box is only taking up around 50% of the horizontal space. To me this seems like a lot of wasted space that could be used by the quote box to allow the lines of text to be wider (i.e. maximize the amount of limited horizontal space). This is especially noticeable if you manually increase the font size a little. The other thing I would recommend is that with narrow view ports you also decrease the line height so the quote box doesn’t stretch as tall. Actually, I think your line height is too big even at a wider browser width.

If you don’t know how to manually increase the text size, using Firefox go to the ‘View-Zoom’ menu and activate ‘Zoom Text Only’. Then while holding down the Ctrl key scroll your middle mouse button to change the text size.

@bbsmooth
Thank you for the response.

*I have added text for screen reader.

  • I have reduced overall line height and adjusted width of speech bubbles for narrow browsers.

Hi @miku86,

Thank you for the feedbacks.

  • Since this is my first FCC front end library project,I used Javascript selectors,Jquery and bootstrap for learning purpose.

  • I have made the 'quote box ’ height fixed .

  • Applied Format HTML/CSS to increase the readability of the code

Thanks
PVN

1 Like