JavaScript

Random Quote Generator Using HTML, CSS and JavaScript

In modern website development, quotations are observed on any side of the web page. These random quotations are generated with the help of a random quote generator. The random quote generator is created with the help of HTML, CSS, and JavaScript. The quotations are used to get the users more focused and with a stick-to-content mind.

Keeping in view the importance of quotations on web pages, today’s guide will help you to create a random quotation generator using HTML, CSS, and JavaScript.

How to Create a Random Quote Generator?

It is best practice to use the random quote generator on your web page. The workings of a random quote generator are simple to understand. It extracts a quote randomly every time by pressing a click and presenting it in the browser window. Moreover, users can retrieve/extract quotes from different sources, such as arrays, databases, or APIs.

Example

An example is adapted to generate a random quote generator by utilizing the HTML, CSS, and JavaScript.

For better understanding, we have explicitly explained the HTML, CSS, and JavaScript codes.

HTML

The following example code refers to the HTML part of the random quote generator.

<html lang="en">

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Random Quote Generator</title>

<link

href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];600&display=swap"

rel="stylesheet"/>

<link rel="stylesheet" href="style.css" /></head>

<body> <div class="wrapper">

<div class="container">

<p id="quote"> </p>

<h3 id="author"></h3>

<button id="btn"> Press Button</button>

</div></div>

<script src="script.js"></script>

</body></html>

In this code, the description is listed here:

  • First of all, Google fonts are imported and a link to an external style sheet (whose code is explained below) is also placed.
  • An area/container is specified to display the random quote by <div> tags.
  • After that, the paragraph <p> tag is used to pass the quote as a value to id.
  • The <h3> and <p> tags are associated id’s “author” and “quote”.
  • A button named “Press Button” is created.
  • Lastly, the “.js” (whose code is explained below) is linked with this HTML file.

Using CSS

The purpose of adding a CSS file is to give an attractive and appealing look to the interface.

* {

padding: 2;

margin: 3;

box-sizing: border-box;

font-family: "Poppins", sans-serif;}

.container button {

background-color: #ffffff;

border: none;

padding: 15px 45px;

border-radius: 5px;

font-size: 18px;

font-weight: 600;

color: green;

cursor: pointer;

}

body {

background-color: white;}

The description of the code is as follows:

  • The padding, margin, box-sizing, and font family are utilized for all the HTML elements.
  • After that, some properties are assigned to the button such as font size, color, background color, etc.
  • Finally, the background color of the body is selected to be white for visibility to the users.

JavaScript

The JavaScript code associated with the HTML file is provided below:

let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");
const url = "https://api.quotable.io/random";
let getQ = () => {
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
      quote.innerText = item.content;
      author.innerText = item.author;
    });
};
window.addEventListener("load", getQ);
btn.addEventListener("click", getQ);

The description of the code is mentioned below:

  • Firstly, three variables (quote, author and btn) are utilized to link with HTML elements.
  • After that, an API is imported for representing random quotes.
  • Furthermore, the getW() method is used to fetch the content of a quote with an author’s name.
  • Finally, the addEventListener property is employed by passing a click value as an argument.

Output

The output shows the random quotes in the browser by employing HTML, CSS, and JavaScript. By pressing each time, a new random quote is generated in the browser.

Conclusion

A random quote generator is developed by utilizing HTML, CSS, and JavaScript. The HTML file provides the specific area/container to display a quote. The role of a CSS file is to give styling properties such as font color, background color, text size, etc. to make the generator attractive/appealing to the users. Furthermore, JavaScript provides the logic operations to extract the random quote. Here, you have learned that all these steps are given in a sorted order.

About the author

Syed Minhal Abbas

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.