recherche

Maison >interface Web >js tutoriel >Comment créer un générateur de devis aléatoires en utilisant HTML, CSS et JavaScript ?

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

PHPz
PHPzavant
2023-08-24 20:41:041237parcourir

如何使用 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>

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

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

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

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>

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：JavaScript vs Core Java : quel est le meilleur ?Article suivant：JavaScript vs Core Java : quel est le meilleur ?

Articles Liés

Voir plus