720 lectures

Ce code Javascript génère des citations aléatoires

par Emmanuel Okolie 6m2024/04/25

Trop long; Pour lire

Comment créer un projet de cotations aléatoires à l'aide de JavaScript Vanilla.

featured image - Ce code Javascript génère des citations aléatoires

Qu'est-ce qui vous vient à l'esprit lorsque vous entendez le mot citation aléatoire à l'aide de JavaScript Vanilla ? En ce qui me concerne, tout peut être le cas.

Et il existe peut-être un autre langage de script capable de créer des citations aléatoires, mais l'un des plus remarquables consiste à utiliser JavaScript pour créer une citation aléatoire.

Vous avez peut-être vu des applications de médias sociaux qui affichent les publications des personnes, mais vous devez continuer à faire défiler pour voir plus de publications. Mais selon ce que nous allons construire, vous devrez cliquer sur un bouton pour visualiser un nouveau devis.

Remarque : dans ce didacticiel, nous utiliserons une API. L'API est utilisée pour récupérer les devis de manière aléatoire sur le Web. En cliquant simplement sur le bouton, l'API récupère de nouvelles citations. Alors sans perdre beaucoup de temps, plongeons-nous dans ce guide.

Prérequis

Vous devez avoir des connaissances de base en HTML
Vous devez avoir des connaissances de base en CSS
Vous devez avoir des connaissances de base en JavaScript
Disposez également d'un éditeur de code (Sublime ou VS code), etc.

Générateur de devis aléatoires JavaScript étape par étape

Une citation aléatoire extrait les citations de manière aléatoire d'une API ou d'un tableau. Dans cet article, nous utiliserons JavaScript pour produire des citations à partir d'un tableau tandis que nous concevrons un générateur de citations aléatoires à partir de zéro en utilisant uniquement HTML, CSS et JavaScript. Vous trouverez ci-dessous un guide étape par étape pour accomplir la tâche de devis aléatoire.

Étape 1 : Créer un nouveau projet Le projet que vous êtes sur le point de créer contient trois pages : HTML, CSS et JavaScript. vous nommerez donc les différentes pages qui seront nommées ainsi. index.html, style.css, script.js. Après cela, vous êtes prêt à passer à l'étape suivante.

Étape 2 : Construire le framework Cette étape vous permettra d'ajouter quelques codes HTML qui donneront de la structure à votre projet.
Remarque : Cette section est probablement la première chose à faire après avoir créé le dossier et les fichiers comme indiqué ci-dessus.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--META information--> <meta name="description" content="Random Quote Generator"> <meta name="keywords" content="HTML,CSS,JavaScript, Quotes, API"> <meta name="author" content="EmmyKolic"> <!--End of META information--> <title>Random Quotes</title> <!--LINK CUSTOM CSS FILE--> <link rel="stylesheet" href="style.css"> <!--FONTAWESOME CDN--> <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"> </head> <body> <!-- Quote Container --> <div class="container"> <!-- Quote to be Displayed Here --> <h1> <i class="fas fa-quote-left"></i> <span class="quote" id="quote"></span> <i class="fas fa-quote-right"></i> </h1> <!-- Author to be Displayed Here --> <p class="author" id="author"></p> <hr /> <div class="button"> <!--Button to tweet the quote --> <a class="twitter" id="tweet" href="https://twitter.com/intent/tweet?text=Greetings" data-size="large" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a> <!--Add an onclick event on 'next quote' button. Upon the click of a button, a new random quote is generated--> <button class="next" onclick="getNewQuote()">Next quote</button> </div> </div> <!--LINK CUSTOM JS FILE--> <script src="script.js"></script> </body> </html>

Étape 3 : Ajout de styles pour les classes Dans cette section, nous ajouterons des styles au code à l'aide de CSS, pour créer le générateur de devis. Remarque : Cette section est la prochaine chose à faire après la création du fichier index.html, vous créerez un autre fichier nommé style.css, le fichier style.css sera lié au fichier HTML.

Ensuite, vous devez styliser la mise en page du HTML. Voici le code CSS ci-dessous.

 * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; transition: 0.5s; transition-timing-function: ease-in; background-image: linear-gradient( to right bottom, rgb( 51, 255, 141 ), #acc9ffa8 ); display: flex; align-items: center; justify-content: center; } .container { display: flex; flex-direction: column; align-items: center; padding: 30px; box-shadow: 0 4px 10px rgba(27, 245, 235 , 0.5); border-radius: 15px; width: 600px; background-color: rgba(255, 255, 255, 0.3); margin: 10px; } .fa-quote-left, .fa-quote-right { font-size: 35px; color: rgb(170, 0, 0); } .quote { text-align: center; font-size: 40px; font-weight: bold; } .author { margin: 10px; text-align: right; font-size: 25px; font-style: italic; font-family: cursive; } hr { margin: 10px 0; width: 100%; border: 1px solid black; background-color: black; } .button { width: 100%; display: flex; padding: 10px; justify-content: space-between; align-items: center; margin: 9px; } .twitter { border: 1px solid rgb(102, 179, 255); border-radius: 4px; background-color: rgb(102, 179, 255); color: white; padding-bottom: 15px; text-align: center; font-size: 1.8em; width: 60px; height: 35px; line-height: 40px; } .next { font-size: 18px; border-radius: 5px; cursor: pointer; padding: 10px; margin-top: 5px; font-weight: bold; color: white; background-image: linear-gradient( to right bottom, rgb(22, 210, 248), #bcd7ffa8 ); } .container:hover { box-shadow: 0 10px 10px rgb(0, 180, 230); }

Étape 4 : Incorporez quelques lignes de code JavaScript. Dans cette étape, nous incorporerons du code JavaScript pour créer le générateur de devis. Remarque : Cette section est une partie essentielle de ce didacticiel. Vous allez maintenant créer un autre fichier appelé script.js.

Parcourez le code ci-dessous, vous verrez clairement ce qui a été fait. Nous avons interagi avec une API en utilisant un lien et en enregistrant dans une variable nommée url. Pour rendre ce guide bref, parcourez le script.js, vous remarquerez un commentaire avant chaque section. Voici le code JavaScript ci-dessous.

 const text = document.getElementById("quote"); const author = document.getElementById("author"); const tweetButton = document.getElementById("tweet"); const getNewQuote = async () => { //api for quotes var url = "https://type.fit/api/quotes"; // fetch the data from api const response = await fetch(url); console.log(typeof response); //convert response to json and store it in quotes array const allQuotes = await response.json(); // Generates a random number between 0 and the length of the quotes array const indx = Math.floor(Math.random() * allQuotes.length); //Store the quote present at the randomly generated index const quote = allQuotes[indx].text; //Store the author of the respective quote const auth = allQuotes[indx].author; if (auth == null) { author = "Anonymous"; } //function to dynamically display the quote and the author text.innerHTML = quote; author.innerHTML = "~ " + auth; //tweet the quote tweetButton.href = "https://twitter.com/intent/tweet?text=" + quote + " ~ " + auth; }; getNewQuote();

Conclusion

Nous sommes arrivés à la fin de ce didacticiel et j'espère que vous avez gagné beaucoup de valeur. Sur la façon de créer un projet de cotations aléatoires à l'aide de JavaScript Vanilla.

Nous avons vu comment interagir avec une API, même si ce n'est pas la seule façon, ou devrais-je dire la meilleure, d'interagir avec une API. et comment tweeter une citation de notre code JS sur votre compte Twitter.

Le simple fait de discuter de ce tutoriel nous a beaucoup appris. Alors n'hésitez pas à laisser un commentaire ! Et si vous voulez plus de tutoriels , suivez-moi.

À la prochaine fois, profitez de votre journée !

A propos de l'auteur

Emmanuel Okolie est un développeur Laravel full-stack avec 2+ ans d'expérience dans l'industrie du développement de logiciels. Il a acquis des compétences à part entière en fusionnant le développement de logiciels, l'écriture et l'enseignement aux autres de ce qu'il fait. Ses piles sont ReactJs, Laravel, PHP, JavaScript, etc.

Il travaille en tant qu'indépendant, créant des sites Web pour ses clients et rédigeant des manuels techniques pour expliquer aux autres comment effectuer son travail.

Emmanuel Okolie serait heureux d'avoir l'occasion de s'entretenir avec vous. Veuillez lui rendre visite et le suivre sur Linked-In , Facebook , Github , Twitter ou son site Web .