Comment créer un générateur de devis aléatoires en utilisant HTML, CSS et JavaScript ?-js tutoriel-php.cn

Comment créer un générateur de devis aléatoires en utilisant HTML, CSS et JavaScript ?

PHPz

Libérer： 2023-08-24 20:41:04

avant

1168 Les gens l'ont consulté

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

Dans ce tutoriel, nous allons construire un projet en utilisant HTML, CSS et JavaScript qui générera des références aléatoires à partir d'une API (type.fit).

Étapes

Nous suivrons quelques étapes de base -

Créer des éléments et des modèles HTML
Ajouter des styles à l'aide de CSS
Logique JavaScript

Créer des éléments et des modèles HTML

La première étape est Créez des éléments et des modèles HTML. Nous ajoutons d'abord une boîte qui affichera l'élément, puis ajoutons un bouton qui, lorsque vous cliquez dessus, affichera une nouvelle citation aléatoire dans la boîte, puis utilisons la balise span pour afficher l'icône géniale de la police de type symbole de citation.

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>

Copier après la connexion

Ajout de styles à l'aide de CSS

Nous allons maintenant ajouter des styles au projet HTML que nous avons écrit. Nous ajouterons des propriétés telles que l'ombre de la boîte, le remplissage et la marge à la boîte. Pour l'auteur, nous utiliserons la famille de polices cursives et nous ajouterons également une couleur d'arrière-plan à la boîte ainsi qu'au corps pour lui donner une belle apparence.

Nous travaillerons sur le CSS interne afin d'éviter de créer des fichiers supplémentaires, mais créer des fichiers externes pour CSS et JavaScript est considéré comme une bonne pratique.

Nous ajouterons le lien CDN Font Awesome dans notre esprit afin d'utiliser les icônes Font Awesome dans notre application.

<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" />

Copier après la connexion

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;
}

Copier après la connexion

JavaScript Logic

Maintenant, la partie logique entre en scène, cette partie sera le JavaScript, nous définirons quels éléments feront quoi fonctionner et utiliserons l'API pour obtenir et afficher les données, alors faisons une analyse approfondie plongez dans notre fonction JavaScript.

Étapes

Nous devons suivre les étapes suivantes pour terminer notre travail -

Obtenir les données de devis de l'API type.fit.
Les données reçues seront stockées dans le tableau.
Obtenez une variable d'index aléatoire nommée "randomIdx".
Ensuite, définissez la taille maximale "randomIdx" sur la longueur de la liste de devis.
Obtenez la citation et l'auteur en utilisant l'index aléatoire généré
Maintenant, nous attribuons la valeur obtenue à l'élément item.

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);

Copier après la connexion

Intégrons le code de fonction JavaScript pour le faire fonctionner.

Exemple - Programme complet

Vous trouverez ci-dessous le programme complet pour créer un générateur de devis aléatoires.




   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>

Copier après la connexion

Nous avons donc appris à créer une application génératrice de devis, j'espère que cela vous aidera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!