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:
Check it out here.
To approach this Zipline, I broke it down into manageable parts.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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!