Hello and welcome to today’s tutorial. In today’s tutorial, we will learn how to create a random quote generator app. To create this project we need HTML, CSS, Javascript and a quotes API. For the purpose of this project, I will be using the quotable.io API.
This is a great project if you are learning how to create javascript projects using API. I have other Javascript API tutorials on my youtube channel. If you are interested, you can check it out here.
Video Tutorial:
If you would prefer to learn this through a video tutorial, you can check out the video version of this tutorial here down below.
Project Folder Structure:
Let us create the project folder structure before we start the coding. The project folder is named Random Quote Generator. Inside this folder, we have an HTML document – index.html. A Stylesheet – style.css and lastly a script file – script.js.
HTML:
The HTML code consists of a div with a class wrapper. Within the wrapper, we have a div with a class name container. The container consists of a p element with an id quote. It also consists of an h3 element with id author.
Lastly, we add a button to this container with id btn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random Quote Generator</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
<div class="container">
<p id="quote">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,
magni.
</p>
<h3 id="author">Lorem, ipsum.</h3>
<button id="btn">Get Quote</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now let us add some styles to this generator to make it look more fun. For this we use CSS. Firstly copy the code provided below and paste it into your stylesheet.
We begin by removing unwanted paddings and margins from all the elements. We then set a bright red colour as the background colour of the document body.
In the next step, we add dimensions to the wrapper and centre it using CSS transforms. We also add dimensions to the container and set its background colour to #f43543. And to add more style to it, we add style box-shadow and border-radius.
We create a white coloured box behind the container to make it look even sleeker. To create this box we use the after pseudo-element.
We now style p and h3 tags as per our choice. I am using shades of white as text colour for the quote along with some other font properties.
In the final step, we style the button. We set the background colour to #ffffff and remove the unwanted order. We also set the border-radius to 5px. Lastly, we customize the font.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #f43543;
}
.wrapper {
width: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
width: 100%;
background-color: #f43543;
padding: 50px 40px;
box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5);
position: relative;
border-radius: 8px;
text-align: center;
}
.container:after {
content: "";
position: absolute;
width: 80%;
height: 120%;
background-color: #ffffff;
z-index: -1;
top: -10%;
left: 10%;
}
.container p {
color: #fdd8d8;
line-height: 2;
font-size: 18px;
}
.container h3 {
color: #ffffff;
margin: 20px 0 60px 0;
font-weight: 600;
text-transform: capitalize;
}
.container button {
background-color: #ffffff;
border: none;
padding: 15px 45px;
border-radius: 5px;
font-size: 18px;
font-weight: 600;
color: #f43543;
cursor: pointer;
}
Javascript:
We add functionality to this quote generator using javascript. We select the quote, author and btn element and assign them to different variables.
Similarly, we then create a variable called url that stores the URL to our API as a string.
Firstly, we create a function called getQuote(). Inside this function, we fetch the URL and get a JSON response. This response is basically a JSON object. Now we have to go through this data and select the content of our choice.
Here item.content gives us the quote while item.author gives us the author name. We then change the text content of quote and author to item.content and item.author respectively.
We call the getQuote() when the load event is triggered on the window element or the click event is triggered on btn element.
Build a Simple Carousel Slider With JavaScript
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");
const url = "https://api.quotable.io/random";
let getQuote = () => {
fetch(url)
.then((data) => data.json())
.then((item) => {
quote.innerText = item.content;
author.innerText = item.author;
});
};
window.addEventListener("load", getQuote);
btn.addEventListener("click", getQuote);
The random quote generator is now ready. If you face any issues while creating this project, you can download the source code by clicking the download button below. Also, font forgets to leave your suggestions and feedback in the comments below.
Awesome Tutorial! Really Helped…