Maison > interface Web > js tutoriel > le corps du texte

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
1187 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!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal