Random Quote Generator Feedback, Please :)

Code Feedback
1

Hi Everyone,

I just finished my random quote generator. It took way too long and I honestly don’t feel like I really grasp the concept of working with APIs yet, but I’m hoping that will come soon…

Anyway, I was wondering if I could get some feedback from you guys and gals. I’m not very confident about the “efficiency” of my code (if one can call it that), so any comment in that regards are very much appreciated.

Here’s the link.

Also, I had two specific questions:

  1. When the two buttons stack on smaller screens, I seem to lose the top/bottom padding. What’s going on here?
  2. How do I force the buttons to revert back to their normal styles after they are clicked?

Much thanks!

2

Hey @plasticookies
First of all the quote machine is well done, good work.
Second, I checked out your code and fixed the issues so let me explain

  1. That happens because padding does not matter here, padding is INSIDE the button but you want it to not stack here you need MARGIN (outside the buttons) now I added margin to you col-sm-3 because the button was surrounded by it check this code:

/adds 5px margin on top of buttons/
.col-sm-3{
margin-top: 5px;
}

  1. As for the second problem: you added the " background: #356f64;" to both hover and FOCUS, you don’t want for the focus to darken the color so what I did was:

.btn-custom:hover {
background: #356f64;
}

.btn-custom:hover,
.btn-custom:focus {
/removed background: #356f64; from here/
border: 4px solid #fff;
color: #fff;
-webkit-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.45);
box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.45);
}

now there is another tricky part if you do what I did above the tweet button still be focused, why? because of its a link inside a button so you need to customize the link as well like this:

/* set*/
a:visited {
background: transparent;
}

now if you come back from twitter new tab and just move the mouse with no need of clicking the twitter button will revert back to its normal style

3

@xNavid, thanks for the help! Been focusing so much on javascript, I’ve neglected to work on css. Definitely could use some more practice.