Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Build a Random Quote Generator Using HTML, CSS, and JavaScript
In this tutorial, we are going to build a project using HTML, CSS, and JavaScript which will be generating a random quote from an API (type.fit).
Steps
We will be following some basic steps
Creating HTML Elements and Templates
Adding Styles using CSS
JavaScript Logic
Creating HTML Elements and Templates
The first step is to create HTML elements and templates. We first add a box in which items will be shown, then we will add a button when the button will be clicked that it will display a new random quote in the box, then span tag is used to show quote sign type font awesome icon.
HTML
<!DOCTYPE html> <html> <head> <title>Random quote generator using HTML, CSS and JavaScript</title> </head> <body> <div class="boxSize"> <h1> <i class="fas fa-quote-left"></i> <span class="QuoteText" id="QuoteText"></span> <i class="fas fa-quote-right"></i> </h1> <p class="QuoteWR" id="author"></p> <hr/> <div class="QuoteBtn"> <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button> </div> </div> </body> </html>
Adding Styles using CSS
Now we will add style to the HTML items we have written. We will add property like box shadow, padding and margin to the box and for the author we will use cursive font family we will also add background color to the box as well as to the main body to make it look awesome.
We will be working on internal CSS so that making extra files can be avoided but making external files for CSS and JavaScript is considered as a good practice.
We will add CDN font awesome link inside our head for the purpose of using font awesome icon in our application.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />
CSS
body{
min-height:100vh;
transition: 0.5s;
display: flex;
background-color: #A4E5E0;
align-items: center;
justify-content: center;
}
.boxSize {
margin: 10px;
border-radius: 10px;
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: blue;
}
.QuoteText {
text-align: center;
font-size: 40px;
font-weight: bold;
}
.author {
margin:10px;
text-align: right;
font-size: 25px;
font-style: italic;
font-family: cursive;
}
.QuoteBtn {
width: 100%;
display: flex;
margin-top:10px;
}
.GenerateQuote_next {
font-size:18px;
border-radius: 5px;
cursor:pointer;
padding: 10px;
margin-top: 5px;
font-weight: bold;
color: white;
background-color: #2C5E1A
}
.GenerateQuote_next:hover{
background-color: black;
}
JavaScript Logic
Now logic part comes in scene which will be JavaScript in this part only we will define about what element will be doing what job and using API where we fetch and display our data So let’s make a dive into our JavaScript function.
Steps
We have to follow the below steps to get our things done
Fetch quote data from type.fit API.
Received data will be stored in the array.
Take a random index variable named as ‘randomIdx’.
Then set the ‘randomIdx’ maximum size as quote list length.
Get the quote and author using that generated random index
Now we will assign the value we get to the item elements.
JavaScript
var url="https://type.fit/api/quotes"; const response=await fetch(url); const Quote_list = await response.json(); const randomIdx = Math.floor(Math.random()*Quote_list.length); const quoteText=Quote_list[randomIdx].text; const auth=Quote_list[randomIdx].author; if(!auth) author = "Anonymous"; console.log (quoteText); console.log (auth);
Let’s embed our JavaScript function code to make It work.
Example - Complete Program
Below is the complete program to build random quote generator.
<!DOCTYPE html>
<html>
<head>
<title>Ramdom quote generator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />
<style>
body{
min-height:100vh;
transition: 0.5s;
display: flex;
background-color: #A4E5E0;
align-items: center;
justify-content: center;
}
.boxSize {
margin: 10px;
border-radius: 10px;
width: 800px;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
font-size: 35px;
color: blue;
}
.QuoteText {
text-align: center;
font-size: 40px;
font-weight: bold;
}
.author {
margin:10px;
text-align: right;
font-size: 25px;
font-style: italic;
font-family: cursive;
}
.QuoteBtn {
width: 100%;
display: flex;
margin-top:10px;
}
.GenerateQuote_next {
font-size:18px;
border-radius: 5px;
cursor:pointer;
padding: 10px;
margin-top: 5px;
font-weight: bold;
color: white;
background-color: #2C5E1A
}
.GenerateQuote_next:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="boxSize">
<h1>
<i class="fas fa-quote-left"></i>
<span class="QuoteText" id="QuoteText"></span>
<i class="fas fa-quote-right"></i>
</h1>
<p class="QuoteWR" id="author"></p>
<hr/>
<div class="QuoteBtn">
<button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
</div>
</div>
<script>
const GenerateQuote = async () =>{
var url="https://type.fit/api/quotes";
const response=await fetch(url);
const Quote_list = await response.json();
const randomIdx = Math.floor(Math.random()*Quote_list.length);
const quoteText=Quote_list[randomIdx].text;
const auth=Quote_list[randomIdx].author;
if(!auth) author = "Anonymous";
document.getElementById("QuoteText").innerHTML=quoteText;
document.getElementById("author").innerHTML="~ "+auth;
}
GenerateQuote();
</script>
</body>
</html>
So, we have learned the making of a quote generator application hope it helped.
2K+ Views
