DEV Community 👩‍💻👨‍💻

Cover image for Random Quote Generator using JavaScript and API
Code Media
Code Media

Posted on

Random Quote Generator using JavaScript and API

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>
Enter fullscreen mode Exit fullscreen mode
* {
  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);
}
Enter fullscreen mode Exit fullscreen mode

Basic structure of Quote Generator

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>
Enter fullscreen mode Exit fullscreen mode
.container h1{
  color: white;
  margin-bottom: 30px;
  background: #1073be
  font-size: 25px;
  margin-top: -10px;
  margin:  -40px;
}
Enter fullscreen mode Exit fullscreen mode

Add titles using html

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Create a display to view random quotes

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>
Enter fullscreen mode Exit fullscreen mode
.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;
}
Enter fullscreen mode Exit fullscreen mode

Create the Generat button

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");
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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;
    });
};
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

Random Quote Generator using JavaScript
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.

You can find the source code and live demo needed to create this project with the help of this link.

Top comments (3)

Collapse
 
obaino82 profile image
Obaino82

Nice work

Collapse
 
codemediaweb profile image
Code Media

Thank you

Collapse
 
mdkawsarislam2002 profile image
Md Kawsar Islam Yeasin

Thanks, I just need the API link
I got it. Thank you so much

Classic DEV Post:

Understanding git through images