Random Quote App - Your Thought

1

Hello fellow campers,

After much tinkering, I have completed my “Random Quote App”. I will appreciate your feedback.
http://www.alexporobe.com/quotes. I have to host it on my custom domain as I struggled with making codepen.io to talk to the Javascript and could not. If you did this project, how did you achieve that?

Thanks

2

Nice work.

A few suggestions:

  1. Remove the height property from your .buttons class so it doesn’t spill over on mobile display. See before and after. (Actually, the cream box only enclosed the green button because it thought it only has a height of 45px… not taking into account the blue button has wrapped around the next line. By removing the hardcoded height, the cream box then correctly took into account that the blue button has wrapped around, and now it displays properly.)

quotebox.png751×511 28.5 KB

  1. Again, remove height property on your red .quoteBox class and instead rely on padding: 10px 5px to automatically give your quote some spacing around.

quotebox_padding.png363×548 22.6 KB

Other suggestions… can you add fadeIn/fadeOut effect on your quoteBox when getting a new quote?

3

@Owel, thanks for the suggestions, I will work to implement them.

4

Hi,

I want to add something to what owel just said.

Have a look at Bootstrap to use its classes correctly. Right after the container-fluid div you placed another div with some weird classes:

<div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-3">

Way too much for that div, i think :slight_smile: That causes the layout to work unexpectedly sometimes. For example, it gets almost all the width of the document (aprox. 95%), but as soon as you get to 992px in width, it shrinks itself till about 45% of the total width of the document. Check it out.

991px:

Captura%20de%20pantalla%20de%202018-03-28%2023-19-06
Captura%20de%20pantalla%20de%202018-03-28%2023-19-06987×932 24.1 KB

992px:

Captura%20de%20pantalla%20de%202018-03-28%2023-19-23
Captura%20de%20pantalla%20de%202018-03-28%2023-19-23984×932 26.7 KB

5

That’s not weird.

Those are Bootstrap classes defining the behavior for different screen widths.
XS
SM
MD with offset 3 to center the div.

1 Like
6

@SpaniardDev, thanks for taking the time to look through. As already pointed out by @owel however, those classes define how I want to display my app on different screen sizes. Thanks again.

7

I have fixed the Javascript API call by simply adding ‘s’ as in using https instead of just http to reference the site on codepen.io. link here (https://codepen.io/freeCodeCamp/pen/ONjoLe)

8

Sorry, I didn’t think it was actually on purpose (it was late here :). I thought you wanted your layout go all from side to side fluidly. That’s why I thought there was too many classes.

Anyway, in my opinion, having an easy layout like this and testing it on my screens, I would be less explicit on the breakpoints:

<div class="col-xs-12 col-sm-8 col-sm-offset-2">

In this case you get the effect of the box-like layout you want to achieve at 992px but just right after 768px.

Again, sorry for the confusion.

PS: Check the link to your pen, it is the FreeCodeCamp example :slight_smile:

9

@SpaniardDev, thank you all the same, I will give yours a try and any general improvement on the layout is welcome. I do appreciate.

Thanks