Random Quote Generator Using HTML, CSS and JavaScript

This generator randomly pulls from my collection of favorite quotes, just over 300 as of November 2021. Come back every so often to copy new additions.

A Random Quote Generator is capable of pulling quotes randomly from an API, a database, or simply from an array. We will be designing a Random Quote Generator from scratch using HTML, CSS, JavaScript, and type.fit API.

The webpage displays a random quote from a collection and upon the click of a button, it randomly generates a new quote. We will first generate the basic HTML Template and style it using CSS before diving deeper into the JavaScript Logic.

Making the Bare Bones Of Our Application: In this section, we will use only HTML and put all the required CDN links.

Step 1 (Adding our Foundation): Link your stylesheet and add other resources required for the project as desired, for instance, we have added additional bootstrap libraries and Google fonts for styling purposes. Our next step is to add the main body tag, where the bare bones of the Random Quote Generator Lie.

Below is the code for the above step:

Step 2 (Holding the front part and the back part of the Quote Box): Now it’s time for adding the main HTML Code of our application. Add a div tag that holds the front side and the backside of the Quote Box.

Step 3 (Adding front part of the Quote Box): Add a div element that holds the text, author, and the clickable button.

Step 4 (Allocating area for displaying the quote): Let’s add a span element that holds the left font awesome quote icon and the quote to be displayed. A span tag is used as the quote icon and the quote needs to be on the same line.

Step 5 (Allocating area for displaying the author): Use a div tag to hold the author of the quote.

Step 6 (Adding the button): Use an anchor tag to display the button.

Step 7(Adding the back part of the Quote Box): Repeat the above 5 steps and generate a replica of the quote box which exists behind the current box. After performing the above steps, we have a bare-bones application with no styling or logic.

Below is the entire HTML code generated by following the above steps:

HTML Code

<div class="container text-center">
  <div class="page-header col-xs-6 col-xs-offset-3">
    <h1>Random Quotes Rewritten</h1>
    <p>They said WHAT?!?!</p>
  </div>
</div>
<div class="container text-center">
  <div id="quoteButtons">
    <div class="row">
      <button type="button" id="quoteTastic" class="btn btn-default">New Quote</button>
    </div>
    <div class="row">
      <a id="tweetTastic" type="button" class="btn btn-default"><i class="fa fa-twitter"></i> Tweet Quote</a>
    </div>
  </div>
  <div id="party" class="col-xs-6 col-xs-offset-3">
    <p id="newQuote"></p>
    <p><em id="newAuthor"></em></p>
  </div>
</div>

CSS Code

Styling The Application: CSS is used to make the application attractive and visually appealing to the end-user.

Center the quote box using the top and left properties.

Apply padding and margin to the necessary elements.

Use two font families, Primary for the quote and Secondary for the author.

Two classes namely rotateB and rotateF are added to rotate the backside and the front side when the button is clicked.

CSS Styling is solely based on the designer’s perspective. We highly recommend you tinker with the code and try out your design.

*Below is the CSS code for Reference: *

body {
    font-family: 'Open Sans', sans-serif;
}

button {
  margin :10px;
}

#tweetTastic {
    margin :10px;
}

#party {
  padding:5px;
  margin-top :20px;
  border-radius:5px;
}

JavaScript code

var quotes = ["There are two types of people in this world.  Those that enter a room and say 'Here I am!' and those that enter a room and say 'There you are!'.@Unknown", "Because it's there.@George Mallory on climbing mountains", "Footsteps always follow us, whenever it is snowing.  They always show us where we've been, but never where we're going.@Winnie the Pooh's A-Z", "For I know the plans that I have for you.@The Lord, Jer 29:11", "The only way to climb properly is to realize that just getting up a route is nothing, the way it is done is everything.@Royal Robbins", "Small minds discuss people.  Average minds discuss events.  Great minds discuss ideas.@Unkown", "The significant problems we face cannot be solved at the same level of thinking we were at when we created them.@Albert Einstein", "We must not cease from exploration and the end of all our exploring will be to arrive where we began and to know the place for the first time.@T S Eliot", "One man asked another on the death of a mutual friend, 'How much did he leave?' His friend responded, 'He left it all.'@Proverb", "It is more noble to give yourself completely to one individual than to labor diligently for the salvation of the masses.@Dag Hammarskjold, Sec. Gen. of the UN", "Maps are a way of organizing wonder.@Edward Tufte", "I have decided to make my life my argument.@Albert Schweitzer", "Now it's a sqirt mecca for mystery artist, but back then it was just magic.@Jim Snyder on Kayaking", "Knowledge keeps about as well as fish.@Alfred North Whitehead", "It all began, I said, when I decided that some experts don't really know enough to make a pronouncement of doom on a human being.  And I said I hoped they would be careful about what they said to others; they might be believed and that coud be the beginning of the end.@Norman Cousins, Anatomy of an Illness", "Do not go gentle into that good night.  Rage, rage against the dying of the light.@Dylan Thomas", "For you will look smart and feel ignorant and the patient will not know which day it is for you and you will pretend to be smart out of ignorance.@John Stone, Gaudeamus Igitur"];

var finalQuote = "";

$(document).ready(function() {
  $("#quoteTastic").click(function() {
    var i = Math.floor((Math.random() * 17) + 1);
    var inputs = quotes[i];
    var quoteText = "";
    var authorText = "";

    function xyz() {
      for (y = 0; inputs[y] != "@"; y++)
        quoteText += inputs[y];
      return quoteText;
    }

    function abc() {
      for (x = y + 1; x < inputs.length; x++)
        authorText += inputs[x];
      return authorText;
    }
    $("#newQuote").text(xyz);
    $("#newAuthor").text(abc);
    var tweetButton = document.getElementById("tweetTastic")
    tweetButton.setAttribute("href", "https://twitter.com/share?text=" + quoteText + " - " + authorText);
    tweetButton.setAttribute("target", "blank");
  });
});