Hello Coders! Welcome to another JavaScript Blog. In this, we're going to see how you can generate random quote through an API using JavaScript. This can be considered as a mini-project if you're learning JavaScript. It teaches you DOM concepts and how to change styling of CSS through JavaScript and also how to extract data from an API in JavaScript. Here's a preview -
That being said, let us get started.
Step - 1: Like always, create 3 files - index.html, style.css and script.js.
Step - 2: Copy the below HTML code and paste it into your code editor.
##HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<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" />
<title>Random Quote Generator</title>
</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">
<button class="next" onclick="getNewQuote()">Next quote</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step - 3: Below is the CSS code for styling.
##CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
min-height:100vh;
transition: 0.5s;
transition-timing-function: ease-in;
background: linear-gradient(-45deg, #b74096, #da4772);
display: flex;
align-items: center;
justify-content: center;
}
.container
{
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-shadow: 0 14px 10px rgba(0, 0, 0, 0.3);
border-radius: 25px;
width: 600px;
background: #fff;
margin: 10px;
text-align: center;
}
.fa-quote-left, .fa-quote-right {
font-size: 25px;
color: #b74096
}
.quote
{
font-size: 30px;
font-weight: 700;
font-family: 'Poppins', sans-serif;
}
.author
{
margin: 25px 0 10px 0;
font-size: 20px;
font-weight: 700;
font-family: 'Raleway', sans-serif;
color: #b74096;
}
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;
}
.next
{
font-size:18px;
border-radius: 25px;
color: #b74096;
cursor:pointer;
padding: 10px 20px;
margin-top: 5px;
background: none;
border: 2px solid #b74096;
transition: all .5s ease-in-out;
}
.next:hover{
color: azure;
background: #b74096;
}
Step - 4: Below is the JavaScript code which is the most important part in this Quote generator. In this, we stored the API URL in a 'url' constant, and then using async-await we are extracting the data and storing it inside the variable AllQuotes. Later we're just assigning each value to out HTML tags.
##JS
const text=document.getElementById("quote");
const author=document.getElementById("author");
const getNewQuote = async () =>
{
var url="https://type.fit/api/quotes";
const response=await fetch(url);
console.log(typeof response);
const allQuotes = await response.json();
const indx = Math.floor(Math.random()*allQuotes.length);
const quote=allQuotes[indx].text;
const auth=allQuotes[indx].author;
if(auth==null)
{
author = "Anonymous";
}
text.innerHTML=quote;
author.innerHTML="- "+auth;
}
getNewQuote();
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love.