Random Quote Machine

Today I completed the FreeCodeCamp Zipline: Build a Random Quote Machine!

It took me about two hours, plus an hour of styling to get something that I liked.

This is what the completed machine looks like:

quote

Check it out here.

To approach this Zipline, I broke it down into manageable parts.

  1. I created the HTML file with three main items: my page title, div container where I wanted to put the quotes, and two buttons. I used Bootstrap to get the positioning the way it is.
  2. I then wanted to add text to my currently empty div container so I did a Google search on how to dynamically add text with JavaScript and came across this.
  3. Then I created an array of quotes that could be randomly chosen by their array index number. I pulled a sample of quotes from here.
  4. When a user presses the ‘Another thought’ button, I want a quote from my sample to appear. I did a Google search on how to implement an .onClick event and found this.
  5. To pull randomly, I did a search on how to select random items in an array using jQuery and found this. I created a function to hold the sample array and the random number generator.
  6. To create the Twitter sharing button, I used this to help generate the correct data for my link. If you want to use Twitter’s pre-designed buttons, you can go here to generate code for that.
  7. After I got all that to work, I did the page styling. I used Unsplash for my background image. Go here for a text-shadow lesson.

Whoohoo! Working quote machine!

Advertisements

One thought on “Random Quote Machine

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s