When you make it. When it works.

Building the Random Quote Generator in FreeCodeCamp or looking for the random character in your API address.

The SeekingCat
Aug 23, 2017 · 3 min read

I’ve been working on my Intermediate Front End Development projects, which start with building a Random Quote Generator. You are tasked with calling an API and pulling information from it, to display on your own site, in a beautiful and interesting way.

It is a relatively simple request. And when I was finished with the first, it resulted in a few simple lines of code that were required to make the site function. It can be so elegant. It can be so very very easy. When those few lines are written on the page, you can see just how easy it is to do what you are asked to do.

That is, when you get it to work.

Build the house.

And that took me a while. I had all the basic building blocks. A div and a button. One click of the button would populate the div with whatever I needed. All wrapped in a responsive div. Easy.

I didn’t really want to style it just yet. But I wanted to get the info into that simple structure that I had laid down. I knew, somewhat, what the syntax was supposed to look like. I knew what I wanted my end result to be. I researched the APIs that I wanted to use, and built a very simple structure in which my functions would operate


As an aside, the one thing that I realise is that I am more interested in making the thing work, than making the thing pretty. I’m currently building my weather web app, and I worked on the functionality before even starting to think about design. This may be useful information for me going forward.


Back to the story.

Now that I look at it, I don’t know why it was so hard. And in the end, it wasn’t. Boy, did I google the heck out of everything. I was really trying to understand it. People are really helpful and lay out quite a bit over the internet for you. My quotes API source was one such bit of help. And thank you to Chris Coyier for publishing his helpful site – Quotes on Design. However, the simple code still wasn’t working.

Yes, I know it’s clipart!! I like clipart!!!


More googling and some days later (yes! It took me days!!), I learned:

  1. that I should set my Ajax cache property to false, so the browser won’t cache it and I can get a new quote every time.
  2. that I have to use ‘https’ and not ‘http’ in Codepen

It was only after I was able to pull information into my simple structure, did I want to go back and get creative with my design. I am not very creative. I have a simple colour transition in the background so it changes with every click, and a tweet button. I like a pretty font but I want to make sure it’s readable.

Here she is, my little quote generator. You can visit her and leave feedback in the comments below.

)

The SeekingCat

Written by

Actress, psych graduate and code newbie. Follow me on Twitter @theseekingcat

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade