A Random Quote Generator usually pulls quotes randomly from an API, a database or just from an array. We will be designing one of these generators by scratch using HTML and CSS to display the quote in elegant fonts on your screen before diving into JavaScript Logic that generates new random quotes for you every time.
Table of Contents
HTML Section
Let’s break down the bare bones of our application and start at a very basic level. We will be using HTML to create all we need, with some help from CSS too! Start by putting in your CDN links so you don’t have any issues accessing anything later on.
Step 1
We needed to link up the stylesheet and add any other resources required for this project, such as adding some additional Bootstrap libraries. Our next step is to create a main body tag where we will have all of our barebones Random Quote Generator code!
Step 2
Now it’s time to add the main HTML code for our application. Add a div tag that holds both sides, so we can see what they will look like when everything is assembled in one place.
Step 3
Add a div element that holds the text, author, and the clickable button. This is where you will put your content in order to publish it on Quotesnep with as little effort from you as possible!
Step 4
Let’s add a span element that holds our left font awesome icon and the text to be displayed. A span tag is used as an awful image, so we need both on one line of code!
Step 5
Use a div tag to hold the name of the quote’s author.
Step 6
To display the button, use an anchor tag.
Step 7
Repeat the previous five steps to create a clone of the quote box that exists behind the present box. We now have a bare-bones application with no styling or logic after following the steps above.
The whole HTML file code generated by following the aforementioned steps is shown below:
Code
<html>
<head>
<!--META information-->
<meta charset="UTF-8">
<meta name="description" content="Random Quote Generator">
<meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API">
<meta name="author" content="Neha Soni">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--End of META information-->
<title>Random Quote Generator</title>
<!--LINK CUSTOM CSS FILE-->
<link rel="stylesheet" href="style.css">
<!--FONTAWESOME CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
</head>
<body>
<div class="container">
<h1>
<i class="fas fa-quote-left"></i>
<span class="quote" id="quote"></span>
<i class="fas fa-quote-right"></i>
</h1>
<p class="author" id="author"></p>
<hr/>
<div class="buttons">
<a class="twitter" id="tweet" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>
<!--add an onclick event on 'next quote' button-->
<button class="next" onclick="getNewQuote()">Next quote</button>
</div>
</div>
<!--LINK CUSTOM JS FILE-->
<script src="script.js"></script>
</body>
</html> CSS Section
CSS is used to style the application so that it is attractive and visually appealing to the end-user.
The top and left properties are used to Centre the quote box.
Apply padding and margin to the elements that are required.
Use two font families for the quote and the author: Primary and Secondary.
CSS styling is totally determined by the designer’s viewpoint. We strongly advise you to experiment with the code and test out your design.
The CSS file code for Reference is as follows:
Code
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
min-height:100vh;
transition: 0.5s;
transition-timing-function: ease-in;
background-image: linear-gradient(to right bottom, rgb(0, 2, 100), #100191bb);
display: flex;
align-items: center;
justify-content: center;
}
.container
{
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
border-radius: 15px;
width: 600px;
background-color: rgba(255, 255, 255, 0.3);
margin: 10px;
}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: rgb(109, 0, 0);
}
.quote
{
text-align: center;
font-size: 40px;
font-weight: bold;
}
.author
{
margin:10px;
text-align: right;
font-size: 25px;
font-style: italic;
font-family: cursive;
}
hr {
margin: 10px 0;
width: 100%;
border: 1px solid black;
background-color: black;
}
.buttons {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 9px;
}
.twitter
{
border:1px solid rgb(34, 145, 255);
border-radius: 4px;
background-color: rgb(34, 145, 255);
color: white;
text-align: center;
font-size: 1.8em;
width: 60px;
height: 35px;
line-height: 40px;
}
.next
{
font-size:18px;
border-radius: 5px;
cursor:pointer;
padding: 10px;
margin-top: 5px;
font-weight: bold;
color: white;
background-image: linear-gradient(to right bottom, rgb(12, 0, 54), #0084f0a8);
}
.container:hover
{
box-shadow: 0 10px 10px rgb(0, 196, 230);
} After completing the steps above, we should have an application that looks like this:
JavaScript Section
The application’s logic: In this section, we’ll put all of the logics into action.
Step 01
We’ve used a quotes array to keep track of the quotes we got from the API.
Step 02
When the application is loaded or the new quote button is pushed, we have constructed a function called displayQuote that displays the quote.
To produce a number between 0 and the total number of quotes fetched from the API, use the Math.random method. The index of quotes in the array is this number.
Each member in the array is an object with the text and author properties. The following is a picture of the object:
From the array, get the quote and the author.
If the author isn’t specified, set it to anonymous.
To determine which side is now displayed, set a boolean variable to true.
Change the quote on the backside if the front side is visible, and vice versa.
Step 03
We can perform HTTP queries to web servers using JavaScript’s fetch API.
To get the quotations, use the type.fit API.
We can use the async function or promises to collect data from an API because it is an asynchronous activity. To fetch the data and store it in our array, we used promises.
More information about JavaScript promises may be found here.
Step 04
Make the button have a onclick action.
To display a new quote, use the displayQuote function. And the Quote display inside of double quote.
More information about JavaScript buttons can be found here.
The complete JavaScript file code generated by following the aforementioned steps is shown below:
Code
const text=document.getElementById("quote");
const author=document.getElementById("author");
const tweetButton=document.getElementById("tweet");
const getNewQuote = async () =>
{
//api for quotes
var url="https://type.fit/api/quotes";
// fetch the data from api
const response=await fetch(url);
console.log(typeof response);
//convert response to json and store it in quotes array
const allQuotes = await response.json();
// Generates a random number between 0 and the length of the quotes array
const indx = Math.floor(Math.random()*allQuotes.length);
//Store the quote present at the randomly generated index
const quote=allQuotes[indx].text;
//Store the author of the respective quote
const auth=allQuotes[indx].author;
if(auth==null)
{
author = "Anonymous";
}
//function to dynamically display the quote and the author
text.innerHTML=quote;
author.innerHTML="~ "+auth;
//tweet the quote
tweetButton.href="https://twitter.com/intent/tweet?text="+quote+" ~ "+auth;
}
getNewQuote(); That’s all there is to it; we’ve finished application. If you’ve followed along, your final product should look like shown in the video at the top.
Conclusion
In conclusion, we have created a Random Quote Generator Application using HTML, CSS, and JavaScript. You will have access to thousands of quotes from the array of quotes that may include all type of quotes like inspirational quotes, motivational quotes and more random quotations.
You can also import quotes in quote array that are your favorite quotes or other that you want. We have added a button for social sharing by clicking on that button you can share the quote on twitter directly. Hope you will enjoy to use it and create it by yourself.
