Random Quote Generator

I recently completed the Random Quote Generator Zipline project on Free Code Camp!

Going through the Bonfires is definitely making a difference in how I approach bigger things like Ziplines. There’s much less “HOW THE HECK DO I DO THIS?!” anxiety and a lot more “Okay, let’s start breaking this down.”

In this case, I started with the HTML and CSS. Bootstrap is becoming my favorite thing for quick and minimal styling by the way. I could have spent forever customizing the styling, but I decided to keep it bare so I could focus on the JS. I can infinitely change the look some other time.

Next, I grabbed a bunch of quotes and stuck them in a multi-dimensional array. Each index in the array is another array of two values- the quote itself and its author. Then, I used jQuery/JavaScript to choose a random index from the array, and insert them in the html when the “New Quote” button is clicked.

var quotes = [
    ["Dance is the hidden language of the soul of the body", "Martha Graham"],
    ["The dance is a poem of which each movement is a word.", "Mata Hari"],
    ["I try to dress classy and dance cheesy.", "Psy"]
  ];

  $(".genbtn").click(function() { 
      $(".quote").html(quotes[0][0]);
      $(".source").html("– " + quotes[0][1]);
});

Once I got the button working to display a quote, I started focusing on trying to randomize which one displayed. So, I first found out how to randomize a whole number using Math.floor and Math.random.

var x = Math.floor((Math.random() * quotes.length) + 1)

 

Then I celebrated by adding some animation- the quote box fades out and in when a new one is generated.

There are probably at least a dozen other ways to do this project, and I am pleased with the solution I found. For now. I’ll be coming back to this after the JSON APIs and AJAX section on FCC.

Check out my solution below.

Critique of my code is absolutely welcome 🙂

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s