HOW TO BUILD Web Application RANDOM QUOTE GENERATOR USING HTML, CSS, AND JavaScript?

In this article, we are going to discuss in detail how you can easily make a random quote generator that will generate a new random quote every time you click on a button, for making …

RANDOM QUOTE GENERATOR

In this article, we are going to discuss in detail how you can easily make a random quote generator that will generate a new random quote every time you click on a button, for making a random quote generator you should be familiar with basic concepts of some programming language.

For now, you are required to have a basic concept of HTML, CSS & JAVASCRIPT.

Actually, the working of the whole Random quote generator is dependent on the JavaScript file, that’s why it is also called a JavaScript random quote generator.

 To make a random quote generator we will create 3-4 different files like in the HTML part we will create a file index.html and we will store the HTML code of the project in it.

In the CSS part, we are going to make separate files for the styling of a project to sprinkle charm on your project with some creativity. We will create style.css and reset.css files.

Style.css for adding the styling and reset.css  for some modifications in the style.css file.

In the javascript part, we will define the main functioning of the project, that how the project works will create a script.js file to store javascript code.

Let’s discuss it in parts like:

  • HTML
  • CSS
  • JAVASCRIPT

 HTML PART:

Let’s begin with the HTML part, as you all know HTML is used for the basic structuring of the page.

We will dig deep into it and see in the form of steps but first check the code:

Main HTML file :

index.html

<!DOCTYPE html>
<html>

<head>
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta charset="UTF-8">
  <title>Quote Generator</title>
  <meta content="" name="description">
  
  <link href="reset.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <header class="transparent">
      <h1>Quote Generator</h1>
    </header>
    <main class="quote-box border">

      <div class="quote-area">
        <q id="quote">Random Quote</q>
      </div>

      <div class="author-area">
        <p id="author">Author</p>
      </div>

      <div class="buttons-area">
        <a class="btn border-smaller" id="random-quote" href="#" title="Next Quote">Random Quote</a>
        <a class="btn border-smaller" id="tweet-quote" href="https://twitter.com/intent/tweet?" target="_blank" title="Tweet this quote"><i class="fa fa-twitter" aria-hidden="true"></i></a>
      </div>

    </main>
    
  </div>
</body>
<script src="script.js"></script>

</html>

In the above HTML code, we have created the structure of the project.

Let’s discuss it in the form of steps:

Step1:

first we will link the resources of the project, such as CSS stylesheet, bootstrap libraries.

Step2:

We will create the main body of the html code inside the body tag where we will make the structure of the random quote generator.

Step3:

After creating the main body now, it is time for the main html code for the project.

We will divide the areas by using a div tag which will hold for both sides and we will observe how this will appear when everything will be settled.

Step4:

use a div tag that will hold the text, author, and clickable button.

Step5:

we will use the div tag also to hold the quotes author’s name.

Step6:

for displaying the clickable button we will use an anchor tag.

Now, let’s execute the only HTML code file and see how it works.

Random Quote Generator

CSS Part:

As we mentioned earlier in this article, CSS is used to add styling in a project to make it look appealing to add charm to your project with your creativity.

Styling in CSS files entirely depends upon your creativity level.

The top and left properties in the CSS file are used to Centre the quote box,

Apply padding and margin to the elements that are in need to be adjusted in terms of margin and padding.

Used two font families here in code one for the quote and one for the author like primary and secondary.

Let’s dig in its code:

Here, in the CSS part, we have made two files style.css and reset.css

style.css

body {
  font-size: 14px;
  background: #ECF5B7;
  font-family: sans-serif;
  text-align: center;
  -moz-transition: all .6s; 
  -webkit-transition: all .6s;
  -o-transition: all .6s;
  transition: all .6s;
}

.border {
  border: 6px solid #9CB418;
  -webkit-box-shadow: 4px 4px 0 3px #7D9014;
  -moz-box-shadow: 4px 4px 0 3px #7D9014;
  box-shadow: 4px 4px 0 3px #7D9014;
}

.border-smaller {
  border: 4px solid #9CB418;
  -webkit-box-shadow: 3px 3px 0 2px #7D9014;
  -moz-box-shadow: 3px 3px 0 2px #7D9014;
  box-shadow: 3px 3px 0 2px #7D9014;
}

/*.border-smaller:active {
  box-shadow: none;
} */

.transparent {
	zoom: 1;
	filter: alpha(opacity=40);
	opacity: 0.4;
}

.container {
  margin-top: -40px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #7D9014;
  } 

header {
  margin-bottom: 20px;
  font-size: 22px;
  text-transform: uppercase;
}

.quote-box {
  border-radius: 1px;
  width: 90%;
  max-width: 800px;
  margin: auto;
  padding: 0 20px 30px 20px;
  display: inline-block;
  background-color: rgba(255,255,255,.7);
}

.quote-area {
  min-height: 250px;
  position: relative;
  }

#quote {
  padding: 40px 20px;
  font-size: 28px;
  font-weight: 600;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
}

.buttons-area {
  float: left;
}

.btn {
  float: left;
  background-color: #ECF5B7;
  border-radius: 1px;
  font-size: 20px;
  margin-right: 8px;
}

.btn:first-of-type {
  margin-right: 24px;
}
#random-quote {
  padding: 12px 24px;
}

#tweet-quote {
  padding: 6px 16px;
  font-size: 30px;
}

.author-area p::before {
  content: "- ";
}

.author-area {
  float: right;
}

#author {
  font-size: 18px;
  padding: 16px 8px 16px 0px;
  font-style: italic;
}

footer {
  padding-top: 10px;
  font-size: 16px;
  font-weight: bolder;
}
footer p a {
  font-weight: 800;
  font-size: 20px;
}

@media only screen and (max-width: 650px) {
  .container {
  position: relative;
  margin-top: 0;
  padding-top: 30px;
  height: 1vh;
  } 
  
  .quote-box {
    width: 92%;
  }
  .quote-area {
    min-height: 330px;
  }
  #quote {
  padding: 30px 20px 0 20px;
  width: 100%;
  }
  
  .author-area {
    float: none;
    display: block;
  }
  
  .btn {
    vertical-align:middle;
    float: none;
    display: inline-block;
    margin-top: 20px;
  }
  .buttons-area {
    margin-bottom: 20px;
    float: none;
  }
  #tweet-quote {
  padding: 6px 16px;
  }

}
@media only screen and (max-width: 400px) {
  .btn:first-of-type {
  margin-right: 0;
  }
  .quote-box {
    padding: 0 10px 10px 10px;
  }
  .quote-area {
    min-height: 300px;
  }
  #quote {
  padding: 0;
  }
}

reset.css

/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
  text-decoration: none;
  color: inherit;

}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}
/* end reset browser styles */

Now, let’s execute the CSS files with HTML file and see how the application  looks:

Random Quote Generator

JavaScript Part

JavaScript is used to make the application interactive and engage the users. It is responsible for the functioning of an application as in javascript we transform all the logic into action.

Let’s  first check out it’s code and then discuss it in detail:

script.js

/* jshint browser: true */
/* jshint esversion: 6 */

//Make sure DOM is ready
document.addEventListener("DOMContentLoaded",function(){
  
// DATA
// 1. dataset of quotes and their authors
  const quotesPool = [["Less is More", "Ludwig Mies Van Der Rohe"],
                ["God is in the Details", "Ludwig Mies Van Der Rohe"],
                ["Architecture starts when you carefully put two bricks together. There it begins", "Ludwig Mies Van Der Rohe"],
                ["Good building come from good people and all problems are solved by good design", "Stephen Gardiner"],
                ["There are 360 degrees, so why stick to one?", "Zaha Hadid"],
                ["Form ever follows function", "Louis Sullivan"],
                ["Recognizing the need is the primary condition of design", "Charles Eames"],
                ["Architecture is the learned game, correct and magnificent, of forms assembled in the light", "Le Corbusier"],
                ["An idea is salvation by imagination", "Frank Lloyd Wright"],
                ["When I'm working on a problem, I never think about beauty. But when I've finished, if the solution is not beautiful I know it's wrong", "Buckminster Fuller"],
                ["As an architect you design for the present, with an awareness of the past, for a future which is essentially unknown", "Norman Foster"],
                ["To provide meaningful architecture is not to parody history but to articulate it", "Daniel Libeskind"],
                ["To create, one must first question everything", "Eileen Gray"],
                ["One of the great beauties of architecture is that each time, it is like life starting all over again", "Renzo Piano"],
                ["You’ve got to bumble forward into the unknown", "Frank Gehry"]];

// 2. dataset of color schemes
 const colorsPool = //["#ECF5B7", "#9CB418", "#7D9014"]; 
                    // ["#B7E1CE", "#358260", "#1E4835"],
                    // ["#FFAB91", "#FF7043", "#E64A19"],
                    // ["#C3C8BC", "#919A84", "#5E6553"],
                    // ["#EF9A9A", "#F44336", "#D32F2F"],
                    //["#E6EE9C", "#CDDC39", "#827717"];
                    // ["#90CAF9", "#2196F3", "#1565C0"],
                    // ["#CE93D8", "#AB47BC", "#6A1B9A"],
                    // ["#F8BBD0", "#F06292", "#E91E63"],
                    // ["#C5CAE9", "#7986CB", "#3F51B5"],
                    // ["#B0BEC5", "#78909C", "#546E7A"],
                     ["#B2EBF2", "#26C6DA", "#0097A7"];
                    // ["#BCAAA4", "#795548", "#3E2723"]
                  

// VARIABLES
  let oldQuoteIndex;
  let oldColorIndex;

//Generate a random number based on argument's length
  function generateNumber(dataPool) {
    return Math.floor(Math.random() * dataPool.length);
  }

//1. Get random number from generateNumber()
//2. check random number to make sure it's not same as last one
//3. Use random number to get new quote from array
//4. Display the quote
  function generateNewQuote() {
    let index = generateNumber(quotesPool);
//While loop so no same quote is generated in a row
    while (index === oldQuoteIndex) {
      index = generateNumber(quotesPool);
    }
    let newQuote = quotesPool[index];
    let quote = document.getElementById("quote");
    let author = document.getElementById("author");
//Show new quote and author on page
    quote.innerHTML = newQuote[0];
    author.innerHTML = newQuote[1];
//Update Tweet href attribute with new quote and author
    let tweet = document.getElementById("tweet-quote");
    tweet.href = 'https://twitter.com/intent/tweet?hashtags=quotes&text="' + newQuote[0] + '" -' + newQuote[1];
//update index checker
    oldQuoteIndex = index;
  }

//1. Get random number from generateNumber()
//2. check random number to make sure it's not same as last one
//3. Use random number to get new color scheme from array
//4. Update page with new color scheme
  function generateNewColor() {
    let index = generateNumber(colorsPool);
// While loop so no same color scheme is generated in a row
    while (index === oldColorIndex) {
      index = generateNumber(colorsPool);
    }
    let colorShade = colorsPool[index];
    let randomQuoteButton = document.querySelectorAll(".btn")[0];
    let twitterButton = document.querySelectorAll(".btn")[1];
    let background = document.body;
    let text = document.querySelector(".container");
    let border = document.querySelector(".border");
    let randomQuoteBorder = document.querySelectorAll(".border-smaller")[0];
    let twitterBorder = document.querySelectorAll(".border-smaller")[1];
//Update page with new color scheme
    randomQuoteButton.style.background = colorShade[0];
    twitterButton.style.background = colorShade[0];
    background.style.background = colorShade[0];
    text.style.color = colorShade[1];
    border.style.borderColor = colorShade[1];
    border.style.boxShadow = "4px 4px 0px 3px " + colorShade[2];
    randomQuoteBorder.style.borderColor = colorShade[1];
    randomQuoteBorder.style.boxShadow = "3px 3px 0px 2px " + colorShade[2];
    twitterBorder.style.borderColor = colorShade[1];
    twitterBorder.style.boxShadow = "3px 3px 0px 2px " + colorShade[2];
//update index checker
    oldColorIndex = index;
  }

//Show new quote and change color scheme on 'Random Quote' button click
  function onQuoteButtonClick() {
    let randomQuoteButton = document.querySelector("#random-quote");
    randomQuoteButton.addEventListener("click", function(){
      generateNewQuote();
      generateNewColor();
    });
  }

  onQuoteButtonClick();

// Get the first quote and color scheme on window load
  window.onload = function () {
    generateNewQuote();
    generateNewColor();
  };
  
});

Step1:

we have used quotes array to keep track of the quotes from the array.

Step2:

when the application is loaded and when the clickable button is pressed it will display a random quote from an array every time it will display a new random quote.

 To produce a number between 0 and the total number of quotes fetched from the array, use the Math. random method. The index of the quotes in the array is this number.

Each member in an array is an object and that object is the text and consists of author properties.

It will fetch the quote and author from the array.

Step3:

Create a button that can be clickable, and it will display a new quote with every click.

Here is the video of the application we have made so far:

Suggested Read: OpenCV VS Tensorflow

Leave a Comment