Générateur de devis aléatoire utilisant HTML, CSS et JavaScript
Dans le développement de sites Web modernes, des citations sont observées de n'importe quel côté de la page Web. Ces citations aléatoires sont générées à l'aide d'un générateur de devis aléatoire. Le générateur de devis aléatoire est créé à l'aide de HTML, CSS et JavaScript. Les citations sont utilisées pour faire concentrer les utilisateurs et avec un esprit de bâton-contenu.
En gardant à la vue l'importance des citations sur les pages Web, le guide d'aujourd'hui vous aidera à créer un générateur de devis aléatoire à l'aide de HTML, CSS et JavaScript.
Comment créer un générateur de devis aléatoire?
Il est de la meilleure pratique d'utiliser le générateur de devis aléatoire sur votre page Web. Le fonctionnement d'un générateur de devis aléatoire est simple à comprendre. Il extrait un devis au hasard à chaque fois en appuyant sur un clic et en le présentant dans la fenêtre du navigateur. De plus, les utilisateurs peuvent récupérer / extraire des devis de différentes sources, telles que des tableaux, des bases de données ou des API.
Exemple
Un exemple est adapté pour générer un générateur de devis aléatoire en utilisant le HTML, le CSS et le JavaScript.
Pour une meilleure compréhension, nous avons explicitement expliqué les codes HTML, CSS et JavaScript.
Html
L'exemple de code suivant fait référence à la partie HTML du générateur de devis aléatoire.
rel = "Stylesheet" />
Dans ce code, la description est répertoriée ici:
- Tout d'abord, les polices Google sont importées et un lien vers une feuille de style externe (dont le code est expliqué ci-dessous) est également placé.
- Une zone / conteneur est spécifié pour afficher la citation aléatoire par Mots clés.
- Après cela, le paragraphe La balise est utilisée pour passer le devis comme une valeur à identifiant.
- Le et Les balises sont «auteur» et «citation» d'ID associées.
- Un bouton nommé "Appuie sur le bouton" est créé.
- Enfin, le «.js»(Dont le code est expliqué ci-dessous) est lié à ce fichier html.
Utilisation de CSS
Le but d'ajouter un fichier CSS est de donner un look attrayant et attrayant à l'interface.
*rembourrage: 2;
marge: 3;
Dimensionnement en boîte: Border-Box;
Font-Family: "Poppins", Sans-Serif;
.Bouton de conteneur
Color d'arrière-plan: #FFFFFF;
Border: aucun;
rembourrage: 15px 45px;
Border-Radius: 5px;
taille de police: 18px;
Police-poids: 600;
la couleur verte;
curseur: pointeur;
corps
Color en arrière-plan: blanc;
La description du code est la suivante:
- Le rembourrage, marge, taille de boîte, et famille de polices sont utilisés pour tous les éléments HTML.
- Après cela, certaines propriétés sont affectées au bouton telles que taille de police, couleur, couleur d'arrière-plan, etc.
- Finalement, le arrière-plan La couleur du corps est sélectionnée pour être blanche pour visiter les utilisateurs.
Javascrip
Le code JavaScript associé au fichier HTML est fourni ci-dessous:
Soit Quote = document.getElementById ("citation");Soit l'auteur = documenter.GetElementById ("auteur");
Laissez btn = document.getElementById ("btn");
const url = "https: // api.citant.io / aléatoire ";
Soit getq = () =>
Fetch (URL)
.alors ((data) => data.JSON ())
.alors ((item) =>
citation.InnerText = élément.contenu;
auteur.InnerText = élément.auteur;
);
;
fenêtre.addEventListener ("Load", GetQ);
btn.addEventListener ("cliquez", getQ);
La description du code est mentionnée ci-dessous:
- Premièrement, trois variables (citation, auteur et btn) sont utilisés pour lier avec Html éléments.
- Après cela, une API est importée pour représenter des devis aléatoires.
- De plus, le getw () la méthode est utilisée pour récupérer le contenu d'un citation avec un auteurs nom.
- Finalement, le addEventListener la propriété est employée en passant un Cliquez sur valeur comme argument.
Sortir
La sortie montre les devis aléatoires dans le navigateur en utilisant HTML, CSS et JavaScript. En appuyant à chaque fois, un nouveau devis aléatoire est généré dans le navigateur.
Conclusion
UN générateur de devis aléatoire est développé en utilisant HTML, CSS, et Javascrip. Le Html Le fichier fournit la zone / conteneur spécifique pour afficher un devis. Le rôle d'un CSS Le fichier doit donner des propriétés de style telles que la couleur de la police, la couleur d'arrière-plan, la taille du texte, etc. Pour rendre le générateur attrayant / attrayant pour les utilisateurs. En outre, Javascrip Fournit les opérations logiques pour extraire la citation aléatoire. Ici, vous avez appris que toutes ces étapes sont données dans un ordre trié.