Ronaldo Vitto Lewerissa

Software engineering learning documentation.

Creating a Random Quote Generator

I was playing around with this new project from Free Code Camp, you can check it out here.

So basically what you have to do is to create a simple random quote machine which would generate new quotes every time you click on the button, yet it needs to have certain transition.

I just figured out what makes a transition and animation different, since I noticed they are quite the same thing. You can glimpse on the tutorial right below:

The point is, what makes them different is the trigger, loop, and keyframe.

Animations don't require any explicit form of triggering, once you define an animation, it will start playing automatically once the browser read the statement, whereas a transition does have scenario of triggering, such as when you hover into an element.

Next up is looping where an animations may have predefined iteration setting, such like:

animation-iteration-count: 2;

or making it it plain infinite .

Another key point is the keyframes. You can marked up any keyframe you'd like on an animation, and having a precise control on when that keyframe would fire up. Here's the visualisation I got from Kirupa.

keyframes on animation

Back on the project itself, it may seem that this was so damn easy. It's true since I meant this for beginners, myself including.

Here's what my code would generated into:

random quote generator 2

Though you can style it way better, yet it has the main functionality as it supposed to.

Mind that I will use Visual Studio Code from Microsoft through out this post.

Here's what my HTML look like:

<!DOCTYPE html>  
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="css/index.css" type="text/css">
        <script src="index.js"></script>
        <title>Quote generator!</title>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <blockquote>
                    <div class="col-xs-12">
                        <p class="quote roboto"><h2><span class="quote">"Get shit done."</span></h2></p>
                        <div class="text-right cite">- unknown</span></div>
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <a  title="Tweet this quote"><button class="tweet"><i class="fa fa-twitter"></i></button></a>
                            <a title="Post on Tumblr!" href="https://embed.tumblr.com/share"><button class="fa fa-tumblr tumblr"></button></a>
                        </div> 
                        <div class="col-xs-6">
                            <button class="roboto fontSizeSmall">New Quote!</button>
                        </div>
                    </div>
                </blockquote>
            </div>
        <div class="footer">by Vitto Lewerissa</div>    
        </div>
    </body>
</html>

Frankly it's quite not the best code I've written yet. I'd say it's way too long, a couple of div's would just be fine. Still, it's the code I've written for the projects, though. It's not perfect, but whatever, as my motto says: it's about PROGRESS :)

Let me break down to a smaller pieces.

It will start off with the head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/index.css" type="text/css">
<script src="index.js"></script>
<title>Quote generator!</title>

It is a simple import task, where I include the jQuery library on the first line, a mere Bootstrap CDN on the second line, a Google Font (which I supposed to include it in the CSS file instead using the @import), a Font Awesome CDN, and eventually the my own CSS and JavaScript relative link.

<body>  
    <div class="container-fluid">
        <div class="row">
            <blockquote>
                <div class="col-xs-12">
                    <p class="quote roboto"><h2><span class="quote">"Get shit done."</span></h2></p>
                    <div class="text-right cite">- unknown</span></div>
                </div>
                <div class="row">
                    <div class="col-xs-6">
                        <a  title="Tweet this quote"><button class="tweet"><i class="fa fa-twitter"></i></button></a>
                        <a title="Post on Tumblr!" href="https://embed.tumblr.com/share"><button class="fa fa-tumblr tumblr"></button></a>
                    </div> 
                    <div class="col-xs-6">
                        <button class="roboto fontSizeSmall">New Quote!</button>
                    </div>
                </div>
             </blockquote>
         </div>
        <div class="footer">by Vitto Lewerissa</div>    
   </div>
</body>

Here is where I thought the immense (if not exaggerating) occur :(

When I finish this code and think thoroughly. I figured out that several lines are not required, but I was eager to finish the project so that I could continue to the next project. I know, it's not a good thing to left by, it would a great disaster if this happen by the office in terms of maintenance.

Anyway, I figure to use the Bootstrap predefined class container-fluid instead of the container so the page will generate on a wide scale, and I would easily configure it using the margin-auto  by the CSS file.

I added some extra unnecessary div's all the way through ;-)

Further down, an anchor tag to sustain the button elements.

Ignore the href attribute which links to some disrupted page in Tumblr. Not the wisest way to share a post though (a decent Tumblr API should go the way before :")).

Let's proceed on this middling CSS file:

@charset "UTF-8";  
body {  
  background-color: #D102CA;
  transition: 1.5s;
}

div.row {  
  margin: auto;
  margin-top: 100px;
  width: 500px;
}

blockquote {  
  border-radius: 7px;
  background: #f9f9f9;
  text-align: center; 
}

blockquote > p {  
  display: inline; 
}

.roboto {
  font-family: "Roboto", sans-serif; 
}

.fontSizeSmall {
  font-size: 0.8em;
}

button {  
  margin-top: 10px;
  margin-bottom: 10px;
  transition: 1.5s;
  background-color: #D102CA;
  font-size: 1em;
  border: none;
  border-radius: 3px;
  padding: 7px;
  color: white;
}

button:hover {  
  opacity: 0.6;
}  

span.quote {  
  color:#D102CA;
}

.footer{
  text-align: center;
  color: white;
}

div.cite {  
  color: grey;
}

.tweet {
  position: relative;
  right: 80px;
  min-width: 40px; 
}

.tumblr {
  position: relative;
  right: 70px;
  bottom: 1px;
  min-width: 40px;
  min-height: 39px;
}

It is not a hard task to scan all the way through the CSS file. It's quite brief.

Not the best yet, but frankly not a monstrous stylesheet anyway.

I would not hash around the CSS as it is easy to digest in my humble opinion.

Let's get down to the dirty part if I may say.

$(document).ready(function(){  
    var temporary;
    var quote = "\"Get shit done.\"";
    var random = function(){
        var temp = (Math.floor(Math.random() * 5)) + 1;
        var quoteArray = ["\"Get up and Code!\"","\"Let them see results in 5 YEARS!\"","\"Let them spend while you SAVE.\"","\"Let them sleep while you GRIND.\"","\"Let them party while you WORK.\""];
        while(temp === temporary){
            temp = (Math.floor(Math.random() * 5)) + 1;
        }
        temporary = temp;
        quote = quoteArray[temp - 1];
        var fadeIn = $("span.quote").delay(750).fadeIn();
        var unknownFade = $(".cite").delay(750).fadeIn();
        switch(temp){
            case 1: 
                $("span.quote").html(quoteArray[0]);
                $("body").css("background-color", "#34B5E0");
                $("button").css("background-color", "#34B5E0");
                $("span.quote").css("color", "#34B5E0");
                unknownFade();
                fadeIn();
                break;
            case 2: 
                $("body").css("background-color", "#E33977");
                $("button").css("background-color", "#E33977");
                $("span.quote").html(quoteArray[1]);
                $("span.quote").css("color", "#E33977");
                unknownFade();
                fadeIn();
                break;
            case 3:
                $(".cite").fadeIn();
                $("body").css("background-color", "#259C08");
                $("button").css("background-color", "#259C08");
                $("span.quote").html(quoteArray[2]);
                $("span.quote").css("color", "#259C08");
                unknownFade();
                fadeIn();
                break;
            case 4: 
                $("body").css("background-color", "#C27F0C");
                $("button").css("background-color", "#C27F0C");
                $("span.quote").html(quoteArray[3]);
                $("span.quote").css("color", "#C27F0C");
                unknownFade();
                fadeIn();
                break;
            case 5:
                $("body").css("background-color", "#C9B902");
                $("button").css("background-color", "#C9B902");
                $("span.quote").html(quoteArray[4]);
                $("span.quote").css("color", "#C9B902");
                unknownFade();
                fadeIn();
                break;
        }
    };

    $("button.tweet").click(function(){
        var array = quote.split(" ");
        var joinArray = array.join("%20");
        var total = "https://twitter.com/intent/tweet?text=" + joinArray + " - Unknown";
        // var test = "http://twitter.com";
        window.location.replace(total);
    });

    $(":button").click(function(){
        $(".cite").hide();
        $("span.quote").hide();
        random();
    } );
});

There are way much more better way rather than using the switch statement. A JSON is another delicate, if not elegant, way to shorten the code.

Basically, what I did is using the jQuery method of hide()  and fadeIn()  to gain the effect of transition. There would a be a delay (, so the transition would seen on the play.

The Math.random()  is used to  come up with a pseudo-random number between 0 (inclusive) to 1 (exclusive). There you need to twist on the expression.

The temp  variable will hold on the result and thus go through the switch statement.

Any comment regarding my code will be highly appreciated as it will help me to attain progress :)

Written by Ronaldo Vitto Lewerissa

Read more posts by this author.