My Quote Generator that uses 5 APIs

Hey, guys. So I’m finally done with my Random Quote Generator project.

It uses API of 5 different sites, and you lets you choose the category of the quote you want to see. I ran into some problem with crossorigin.me, and so I went the JSONP way. Also, I couldn’t choose a color, so I created two versions of the same generator with different color schemes.

I would love some feedback on my project and also some advice on how to choose colors (that seems to be difficult for me). It would be awesome if you can recommend some books.

Here are my projects:

Random Quote Generator: Light theme and Bluish theme

7 Likes

Wow, great job! I would suggest that after I choose random quote from a random category I will see the category of the random quote.

Hey, thanks a lot!

Yeah, actually it is not “random” per se. It’s just a category I couldn’t name. Lol. So, I named it Random. Clicking on the Random category doesn’t show quotes from any of the other categories but just quotes from Forismatic. I’ll implement the actual “Random” logic soon.

Great stuff, the design is awesome especially for the light theme, as well as the variety of quotes.

I’d suggest one thing: The hover animation bugs me a bit because it moves the adjacent button a decent amount. Use CSS transforms to avoid this:

.btn:hover{
    transfrom: scale(1.2);
    -webkit-transfrom: scale(1.2);
}

That way, you get the animation without messing with the positions.
Besides that, I really liked the project. Good work.

Thanks a lot, @imtoobose. But when I added your code, it didn’t transform the buttons on hover. Are you sure it works?

It was an example, not specific to your code sorry. In your code, put transform:scale(1.1) at line 164, specifically:

buttons .btn:hover {
   transform: scale(1.1);
}

This works! But I kinda like the Mac OS’ dock like feel my version gives. I didn’t intentionally do it knowing that would happen. But I like how it turned out. Haha. Anyway, I’ll use transform for this one and leave it like that in my other one. Thanks a lot again!

:open_mouth: This is really cool! I had a hard time making mine with one API, I can’t even imagine what trying to do one with 5 would be like. :laughing: Great job! I have one question, if you don’t mind. How long have you been coding for?

Hi, @Bosa100. Thanks a lot, man! I have a job and I don’t get much time to work on this right now. I only code for an hour or two max. It took me 8 days to complete this. I didn’t know about JSONP before I started this project. I was using crossorigin.me but then it went down (talk about luck). Thanks to that, I now know how to use API without the use of proxies. I recommend you to use JSONP too. And trust me when I say this, once you get one working, adding a few more is just a matter of hours. :smile:

EDIT: Reading your post again, I guess I misunderstood your question. I haven’t been coding for long. But I learnt HTML, CSS and a little bit of JavaScript 3 years ago. Never actually built anything with it. But time to change that. Lol.

1 Like

I see. Thanks! My story is somewhat similar. I was learning web development a few years ago, but then I lost interest for some reason. Trying to get back into it. :smiley: I’ll definitely look into JSONP, and yes, those were certainly 8 days well spent! Good job! :slight_smile:

1 Like

Hey!
It’s really amazing!
One quirk though - at times when you get a longer quote the category dropdown expands out of the window. I have no ideas on how to fix it, besides replacing, but maybe there is some clever way to wrap the overflowing content!
Once again, great work!

1 Like

Thanks a lot, @jadczakd! But I haven’t encountered that even once. It would be really helpful if you can link a screenshot of that.

Here you go! I hope that explains what I mean :slight_smile:

Lol. Yeah, now I get it. I saw it too. The category dropdown can still be accessed by scrolling down. But you’re right. I guess I should put the categories button on top. Maybe add a logo or something. I’ll fix it as soon as I can :slight_smile:

Awesome job integrating 5 different quote APIs! I also like the responsive design! You also used JSONP, awesomeee. :smile_cat:

1 Like

Lol. Thanks a lot @jinrawx! :smile:

1 Like

Very nice. I like the design, the animation, the 5 different quote APIs. Well done.

1 Like

Thanks a lot @hepabolu!