Photo (c) Frontline Creative

Random Quote Machine Using jQuery

There is an intermediate front end development project in Free Code Camp where we need to create a random quote machine. And we need to fulfill the user stories below:

  1. I can click a button to show me a new random quote,
  2. I can press a button to tweet out the quote.

So we choose whichever libraries or APIs we want to use.

That’s why I’m using Bootstrap and jQuery to accomplish this activity.

1. Markup the content.

 
<div class="body">
<div class="quote">
<div class="quoteText">
<i class="fa fa-quote-left" aria-hidden="true"></i>
<span class="text">Life is 10% what happens to you and 90% how you react to it.</span>
- Charles R. Swindoll
</div>
<div class="buttons">
<a href="" target="_blank" class="tweetQuote btn"><i class="fa fa-twitter"></i></a>
<button class="newQuote btn"> <i class="fa fa-chevron-right" aria-hidden="true"></i> </button>
</div>
</div>
- theproactivedev
</div>
 

 

These are just containers and paragraph tags and span elements. Just a simple markup to build what I need.

And just a quick thing to discuss, I have a div with a class of buttons. Not literally buttons but inside of this div, I have an anchor tag for the tweeting it out part and a button element to get a random quote.

I want to style them the same but I can’t make them both buttons. Because tweeting it out means a different semantic purpose from a button. And an anchor tag is more semantic because you’re going to another page where button is like something happens within the page.

Just check out my markup and if you want to change anything, feel free to do so.

2. Style it for fun.


body {
width: 100%;
background-color: #16a085;
}
.body {
width: 65%;
margin: 0 auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.quote {
 background-color: #fff;
 padding: 40px;
 box-shadow: 0 8px 6px -6px black;
 overflow: hidden;
}

I give my body element of a width of 100% so the background-color will be applied to it. It’s like blue-green color.

Then, my div.body has a width of 65%. And I want to put it in the center of the page like horizontally and vertically. And check its style rules because that is a short CSS trick to put a div in the center of the page.

Also check out my .quote css selector! I add overflow: hidden; because this div has to maintain its height even if the buttons inside it become floated elements.

Floated elements are removed from the document. That’s why my div.quote will become smaller. And to prevent from that, I have to make it overflow: hidden. Try it out for yourself.


.fa-twitter {
color: #fff;
}

.fa-quote-left {
font-size: 40px;
padding-right: 10px;
color: #16a085;
}

.text {
font-size: 30px;
color: #145252;
}

.author {
text-align: right;
padding-top: 10px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #9d9d9d;
}

.buttons {
margin-top: 30px;
}

.tweetQuote {
line-height: 1.1;
}

.btn {
font-family: 'Open Sans', sans-serif;
background-color: #16a085;
border: 0;
text-align: right;
color: #fff;
font-size: 20px;
padding: 10px 20px;
float: right;
}

.btn:hover {
background-color: #145252;
}

.tweetQuote {
float:left;
}

.body > p {
padding-top: 15px;
text-align: center;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #fff;
}

You can download font awesome icons here or you look for a CDN. Check their website on how to use it and it is very simple to use.

I style them just to give a basic look. And I just make my anchor tag and button element to look the same. And that’s it.

Let’s go to less easier part! Haha!

3. Let’s get a new random quote!

So what I have here is that I have array containing objects. And each object has two attributes: quote and author.


var quotes = [
{
"quote": "Life is 10% what happens to you and 90% how you react to it.",
"author": "- Charles R. Swindoll"
},
{
"quote": "If you are going through hell, keep going.",
"author": "- Sir Winston Churchill"
}

]

In the original code, I stored ten objects in my quotes array. I didn’t just copy them all because it’ll be too long. But that’s the idea. And that’s how I did it.


var currentQuote = $(".text").text();
var currentAuthor = $(".author").text();

The text() method gets the value of the elements I selected and store them in my variables.

Why did I do that? So when the user presses on the tweet out button, it will tweet what is the current quote and who is the current author.

Next, let’s code what will happen when the user tweet it out?


 $(".tweetQuote").on("click", function() {
 window.open('https://twitter.com/intent/tweet?hashtags= freecodecamp&text=' + encodeURIComponent("'" + currentQuote + " " + currentAuthor));
 });

So I just searched this on Google. And basically, this is like the destination address to tweet something. The hashtags attribute there is it does make those words to hashtags in your tweet. And the encodeURIComponent method converts white space and other special characters.

So when a user click it, they’ll be linked, for an instance, here.

Okay, let’s hit the getting new random quote.


$(".newQuote").on("click",function() {
var index = Math.floor(Math.random() * quotes.length);
$(".text").text(quotes[index].quote);
currentQuote = quotes[index].quote;
$(".author").text(quotes[index].author);
currentAuthor = quotes[index].author;
});

Okay, let’s split this up.

So when the user clicks on the button, these will happen.

I will generate a number from 0 to 7, for example that is the length of my quotes.

And once I have an index, we can access the elements in that index by array[index].[attribute] . I can change the value of an element using the text() method. Then, we change the values of our currentQuote and currentAuthor so when the user tweets it, that will be tweeted not the last quote.

 

And that’s it. That’s how we can get a random quote machine from our array.

I hope that you can understand it.

Still, I recommend customizing and experimenting it to achieve your desired result.

You can try using an API that generates quotes.

Good luck!

 

Love,
Eirin

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