Chingu FCC Speedrun Project 3 — Random Quotes App

Random Quote Generator is my third project. There are 2 ways of doing this:

1. Get quotes from an API.
2. Hard code some quotes in an object and display one at random.

Since I will be learning how to create an API in the future, I chose method 2 so that I can come back to this and recreate it with my own API.

Stage 1: Initial setup

I followed steps similar to the previous project. Some differences:

• Used SVG Background pattern from http://www.heropatterns.com/. Its a great place to experiment with different patterns and various colors.
• CSS Flex box for center aligning the elements horizontally and vertically.
• Icons from fontawesome.
• Fixed position for buttons using position: fixed so that the buttons don’t move up and down while quotes of different length load.
• Spent some time using media queries to optimize the display for all screen sizes. In case you open this project on your mobile and it doesn't look right, please drop in a comment. :-)

Stage 2: Display random quotes

I stored quotes and their authors in 2 different arrays. When New Quote button is clicked, I did the following:

• Picked a random index using Math.random()and used it to display the corresponding quote and author.
• Added some animation by adding a class from animate.css and changed the text color at random when a new quote loads.

//When New quote button is clicked, do this
   randIndex = Math.floor(Math.random() * quotes.length);
   //select random quote
   quote = quotes[randIndex]; 
   author = authors[randIndex];

Stage 3: Tweet out button

This was quite simple. When Tweet button is clicked:

• Add the text that you want to tweet in the end of Twitter’s url to tweet out — ‘https:twitter.com/intent/tweet?text=’ like so :

tweet = document.getElementById('link');
var url = "https:twitter.com/intent/tweet?text=" + quote + ' - ' + author;
tweet.attr('href', url);

My Project finally looks like this:

My Experiments with Pinkish colors :P

Improvements — Notes for Myself

• Create an API ASAP and come back to this.
• Spend more time on media queries.
• Check the length of quote+author so that it doesn’t extend Twitter’s tweet character limit.

This Project is live here.

Repo for the project can be found here.