Random Quote Generator using JavaScript and API

#javascript #webdev #beginners #html

In this article, you will learn how to create Random Quote Generator using JavaScript and API. I have taken the help of API to make this Quote Generator. There are many websites that provide API links I have used one of those links.

This design includes a display and a button. When you click on that button, you can see that every time a quote is generated randomly, it can be seen in the display. Here we have saved the information using fetch method then we have arranged to display it with the help of innerText.

To build this project you need to have a basic idea about HTML CSS and JavaScript. First I created a small box using HTML and CSS with a display and a generate button.

You want a preview? Watch the live demo

In Random Quote Generator I have used a heading above all then there is a display. Quote and author's name can be seen in this display. Then there is a button which I have implemented with the help of JavaScript.

Step 1: Basic structure of Quote Generator

I have created its basic structure using the following HTML and CSS. It is basically a kind of box to which I have added all the information. Here I have given the background-color of the webpage in blue and the width of the box is 400px.

No specific height of the box is given here it will determine its own height based on the amount of content. However here the minimum height is given 100px.

<div class="wrapper">
  <div class="container">

  </div>
</div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #058ddc;
}

.wrapper {
  width: 400px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.container {
  width: 100%;
  background-color: #ffffff;
  position: relative;
  border-radius: 8px;
  text-align: center;
  min-height: 100px;
  padding: 10px 40px;
  box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5);
}

Step 2: Add titles using html

Now I have added a heading that will help to enhance the beauty. I added this title using the h 1 tag of html then designed it as required with the help of CSS.

<h1>Quote Generator</h1>

.container h1{
  color: white;
  margin-bottom: 30px;
  background: #1073be
  font-size: 25px;
  margin-top: -10px;
  margin:  -40px;
}

Step 3: Create a display to view random quotes

Now I have made a small display which will help to see these quotes. Here you can see both the quote and the author's name. Now I have just added the information of this display and done the basic design.

The height of this display has not been determined but the minimum height has been given.

<div class="display">
  <p id="quote">
     Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,
  </p>

<h3 id="author">Lorem, ipsum.</h3>
</div>

.display{
  background: #ffffff;
  min-height:20px;
  box-shadow: 0 0 20px rgba(0,139,253,0.25);
}

.container p {
  color: #066dd4;
  line-height: 2;
  font-size: 19px;
}

.container h3::before{
  content: "- ";
}

.container h3 {
  font-weight: 600;
  text-transform: capitalize;
  color: #0e045a;
  margin: 20px 0 60px 0;
}

Step 4: Create the Generate button

Now is the time to create a button that will help generate separate quotes. Later I will execute the button using JavaScript. But now I have created it with the help of HTML and CSS. I used padding to determine the size of the button.

<button id="btn">Get Quote</button>

.container button {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #ffffff;
  cursor: pointer;
  background-color: #023b80;
  border: none;
  padding: 15px 45px;
  border-radius: 5px;
}

Step 5: Activate the Random Quote Generator using JavaScript

Above we have designed this Random Quote Generator using html css. Now is the time to implement it using JavaScript. I have used very simple and simple JavaScript for this.

First I set a constant for the Quote, Author and Generate buttons.

let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");

Now I have added the API link in the 'url'. As I said earlier, I got all this information with the help of this link. I have used the API link of a website here. You can use the link of any website of your choice if you want.

const url = "https://api.quotable.io/random";

Now is the time to implement it using little JavaScript. First I collected all the information of this API using fetch method.

Then with the help of innerText I have shown the content and author's name in the right place in the web page separately. Above we have stored all the terms in 'getQuote'.

let getQuote = () => {
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
      quote.innerText = item.content;
      author.innerText = item.author;
    });
};

Now I have activated the button. The system will be updated every time you click on that button. As a result, new information can be seen in the display.

window.addEventListener("load", getQuote);
btn.addEventListener("click", getQuote);

Hopefully you have learned from this tutorial how I created this JavaScript Random Quote Generator with the help of API. If there is any difficulty then of course you can let us know by commenting.