codemediaweb.com

Code Media

hire me

Random Quote Generator using JavaScript and API

by
Random Quote Generator JavaScript

In this article, you will learn how to create Random Quote Generator using JavaScript and API. I have shown you many types of JavaScript projects and applications before. JavaScript Quote Generator is a popular project for beginners.

Using this type of system you can randomly generate a Quote. I took the help of HTML, CSS, and JavaScript to create this project. I have taken the help of all Quote APIs from other websites. With the help of API, I can show the information on any website elsewhere.

This design has 1 display and one button. When you click on the button, the display will be randomly seen as a separate Quote Generator.

Random Quote Generator JavaScript

Below I have shared step-by-step tutorials on how I created this project. First I designed the webpage and then made a box. I used a herring or title on top of that box. 

Then I created a display that will help you see the quota and the author’s name. In the end, I made a button which if clicked on will generate a quote.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

Hopefully, the demo above has helped you to know how it works. The author’s name can also be seen here along with the quota.

 You need to have a basic idea of ​​HTML, CSS, and JavaScript to build it. First you create an HTML and CSS file then follow the steps below.

Step 1: Basic structure of Quote Generator

Using these codes below I have created a box at the top of the webpage. Here we have used blue as the background color of the web page and white as the background of the box. Box width 400px and min-height 100px used.

<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;
  min-height: 100px;
  padding: 10px 40px;
  box-shadow: 0 20px 65px rgba(87, 11, 16, 0.5);
  position: relative;
  border-radius: 8px;
  text-align: center;
}
Basic structure of Quote Generator

Step 2: Add headings using HTML

Now in this, I have added a heading which is basically at the top of this box. I have used font-size: 25px to increase the size of the heading. I have used blue as the background color because the text color is completely white.

<h1>Quote Generator</h1>
.container h1{
  font-size: 25px;
  margin-top: -10px;
  margin:  -40px;
  color: white;
  margin-bottom: 30px;
  background: #1073be
}
Add headings using HTML

Step 3: Display for random quote viewing

Now there is a display for viewing random quotes. The quota and author’s name can be found here. No specific width and height of the display are given. Then I designed the text and the author’s name using CSS. Here I have used ‘: Before’ to add a symbol (-) before the author’s name.

<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 {
  color: #0e045a;
  margin: 20px 0 60px 0;
  font-weight: 600;
  text-transform: capitalize;
}
Display for random quote viewing

Step 4: Create a button to generate a quote

Now it’s time to create a button that will help you to see the new Random Quote Generator in this box. That’s why I took the help of API. But now I have designed the button using CSS. The background color of the button is blue and I have used font-size: 18px to increase the text size.

<button id=”btn”>Get Quote</button>
.container button {
  background-color: #023b80;
  border: none;
  padding: 15px 45px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
  color: #ffffff;
  cursor: pointer;
}
Create a button to generate a quote

Step 5: Activate the random quote generator API

Now is the time to implement the project using JavaScript. First I set the quota, author, and button ID functions to a constant.

let quote = document.getElementById(“quote”);
let author = document.getElementById(“author”);
let btn = document.getElementById(“btn”);

Now I have added the API link in the constant called ‘url’. As I said earlier, various quote generator websites provide such API links. I have used the API link of a website here. You can change this link if you wish.

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

Now I have fetched the data in that URL using the fetch method. I have stored two types of data here. The first is a quote and the second is the author’s name. I have already made separate places for these two. Now using innerText, each information is arranged in its own place.

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

 Above we have created the complete system. Now I have executed the generator button using some code below. The quota generator system will be updated when you click on this Generation button. This results in a random quote display.

window.addEventListener(“load”, getQuote);
btn.addEventListener(“click”, getQuote);
random quote generator API

 I hope you know how I created the project (How to make a random quote generator in HTML). API links play an important role here. You can use the API of the website of your choice. Below is the code needed to create this JavaScript Random Quote Generator.

Leave a comment