简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  How to build a random quote generator using HTML, CSS and JavaScript?

How to build a random quote generator using HTML, CSS and JavaScript?

PHPz
PHPzforward
2023-08-24 20:41:041124browse

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

In this tutorial, we will build a project using HTML, CSS, and JavaScript that will generate random references from an API (type.fit).

Steps

We will follow some basic steps -

  • Create HTML elements and templates

  • Use Add style CSS

  • JavaScript logic

Create HTML elements and templates

The first step is to create HTML elements and templates. We first add a box that will display the item and then add a button that when clicked it will display a new random quote in the box and then use the span tag to display the quote symbol type font awesome icon.

HTML

<!DOCTYPE html>
<html>
<head>
   <title>Random quote generator using HTML, CSS and JavaScript</title>
</head>
<body>
   <div class="boxSize">
   <h1>
   <i class="fas fa-quote-left"></i>
   <span class="QuoteText" id="QuoteText"></span>
   <i class="fas fa-quote-right"></i>
   </h1>
   <p class="QuoteWR" id="author"></p>
   <hr/>
   <div class="QuoteBtn">
   <button class="GenerateQuote_next" onclick="GenerateQuote()">Next quote</button>
   </div>
   </div>
</body>
</html>

Adding styles using CSS

Now we will add styles to the HTML project we have written. We will add properties like box shadow, padding and margin to the box, for the author we will use the cursive font family and we will also add a background color to the box as well as the body to make it look great.

We will work on internal CSS so as to avoid making extra files, but making external files for CSS and JavaScript is considered a good practice.

We will be adding CDN Font Awesome links in our heads in order to use the font Awesome icons in our applications. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

CSS

body{
   min-height:100vh;
   transition: 0.5s;
   display: flex;
   background-color: #A4E5E0;
   align-items: center;
   justify-content: center;

}
.boxSize {
   margin: 10px;
   border-radius: 10px;
   width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 30px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
   background-color: rgba(255, 255, 255, 0.3);
}
.fa-quote-left, .fa-quote-right {
   font-size: 35px;
   color: blue;
}
.QuoteText {
   text-align: center;
   font-size: 40px;
   font-weight: bold;
}
.author {
   margin:10px;
   text-align: right;
   font-size: 25px;
   font-style: italic;
   font-family: cursive;
}
.QuoteBtn {
   width: 100%;
   display: flex;
   margin-top:10px;
}
.GenerateQuote_next {
   font-size:18px;
   border-radius: 5px;
   cursor:pointer;
   padding: 10px;
   margin-top: 5px;
   font-weight: bold;
   color: white;
   background-color: #2C5E1A
}
.GenerateQuote_next:hover{
   background-color: black;
}

JavaScript Logic

Now the logic part appears in the scene, this part will be the JavaScript, we will define which elements will do what work and use the API to Getting and Displaying Data So let's take a closer look at our JavaScript functions.

Steps

We have to follow the following steps to complete our work -

  • Get quote data from type.fit API.

  • The received data will be stored in the array.

  • Get a random index variable named "randomIdx".

  • Then set the "randomIdx" maximum size to the quote list length.

  • Get the citation and author using the generated random index

  • Now we assign the obtained value to the project element.

JavaScript

var url="https://type.fit/api/quotes";
const response=await fetch(url);
const Quote_list = await response.json();
const randomIdx = Math.floor(Math.random()*Quote_list.length);
const quoteText=Quote_list[randomIdx].text;
const auth=Quote_list[randomIdx].author;
if(!auth) author = "Anonymous";
console.log (quoteText);
console.log (auth);

Let’s embed the JavaScript function code to make it work.

Example - Complete Program

Below is the complete program to build a random quote generator. 




   Ramdom quote generator using HTML, CSS and JavaScript
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
   


   

   

      
      
      
   

   


   

   

   
   

   

   <script>
      const GenerateQuote = async () =>{
         var url="https://type.fit/api/quotes";

         const response=await fetch(url);
         const Quote_list = await response.json();
         const randomIdx = Math.floor(Math.random()*Quote_list.length);
         const quoteText=Quote_list[randomIdx].text;
         const auth=Quote_list[randomIdx].author;
         
         if(!auth) author = "Anonymous";
         document.getElementById("QuoteText").innerHTML=quoteText;
         document.getElementById("author").innerHTML="~ "+auth;
      }
      GenerateQuote();
   </script>

So we have learned about making a quote generator app, hope it helps.

The above is the detailed content of How to build a random quote generator using HTML, CSS and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：JavaScript vs. Core Java: Which is better?Next article：JavaScript vs. Core Java: Which is better?

Related articles

See more