💡 Générateur de citations aléatoires en HTML, CSS et JavaScript
Dans cet article, nous allons voir comment créer un générateur de citations aléatoires simple en utilisant HTML, CSS et JavaScript. ✨ C'est un excellent projet pour les débutants qui souhaitent s'entraîner à utiliser les trois technologies en même temps. À la fin de l'article, vous aurez une application prête à l'emploi qui génère des citations aléatoires, vous permet de les copier, de les exprimer et de les partager sur Twitter. Commençons !
✨ Démo du projet | 📂 Télécharger le code source sur GitHub
🤖 Dans l'application Code vous pouvez apprendre le HTML, le CSS et le JavaScript, ainsi que de nombreux autres cours pour commencer votre parcours dans le développement Web ! 🌱
🛠️ Préparation
Avant de commencer à écrire du code, assurez-vous d'avoir les éléments suivants :
🗒️ Éditeur de code: Vous pouvez utiliser n'importe quel éditeur de texte, mais je recommande Visual Studio Code, car il est pratique et possède de nombreuses extensions utiles.
🛈 Navigateur: Tout navigateur moderne, tel que Chrome ou Firefox, pour tester votre application.
📘 Connaissances de base en HTML, CSS et JavaScript: Il est souhaitable d'avoir des connaissances de base pour faciliter la compréhension du projet, mais vous pouvez également suivre cet article même sans préparation.
Maintenant que vous êtes prêt, commençons à créer notre projet à partir d'un fichier HTML vierge ! 🌱
🗃️ Étape 1 : Création du code HTML
HTML est la base de notre application. Créons un fichier index.html, dans lequel nous décrirons la structure du futur générateur de citations :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Генератор случайных цитат | Coursme</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<header>Цитата дня</header>
<div class="content">
<div class="quote-area">
<i class="fas fa-quote-left"></i>
<p class="quote">Никогда не сдавайтесь, потому что вы никогда не знаете, может быть, следующая попытка окажется успешной.</p>
<i class="fas fa-quote-right"></i>
</div>
<div class="author">
<span>__</span>
<span class="name">Мэри Кэй Эш</span>
</div>
</div>
<div class="buttons">
<div class="features">
<ul>
<li class="speech"><i class="fas fa-volume-up"></i></li>
<li class="copy"><i class="fas fa-copy"></i></li>
<li class="twitter"><i class="fab fa-twitter"></i></li>
</ul>
<button>Новая цитата</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Dans ce fichier, nous avons créé le cadre principal de notre application. Il contient un titre, une zone pour afficher la citation et l'auteur, ainsi que des boutons pour l'interaction.
🖼️ Étape 2 : Style avec CSS
Maintenant, nous allons rendre notre application belle ! Pour cela, nous utilisons CSS. Créons un fichier style.css et ajoutons des styles :
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #5372F0;
}
.wrapper{
width: 605px;
background: #fff;
border-radius: 15px;
padding: 30px 30px 25px;
box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}
header{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.quote{
font-size: 22px;
text-align: center;
}
.author{
font-size: 18px;
font-style: italic;
text-align: right;
}
button{
border: none;
color: #fff;
padding: 13px 22px;
background: #5372F0;
border-radius: 30px;
cursor: pointer;
}Nous avons ajouté des styles pour une interface pratique et agréable : nous avons changé la police, défini l'arrière-plan, ajouté des styles pour les boutons et le texte.
💡 Étape 3 : Ajouter de la logique avec JavaScript
Il est maintenant temps d'ajouter des fonctionnalités à notre application à l'aide de JavaScript. Créons un fichier script.js et ajoutons le code suivant :
// Obtenir tous les éléments DOM nécessaires
const quoteText = document.querySelector(".quote"),
quoteBtn = document.querySelector("button"),
authorName = document.querySelector(".name"),
speechBtn = document.querySelector(".speech"),
copyBtn = document.querySelector(".copy"),
twitterBtn = document.querySelector(".twitter"),
synth = speechSynthesis;
// Fonction pour obtenir une citation aléatoire
function randomQuote() {
quoteBtn.classList.add("loading");
quoteBtn.innerText = "Loading Quote...";
fetch("https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=ru")
.then(response => response.json())
.then(result => {
quoteText.innerText = result.quoteText;
authorName.innerText = result.quoteAuthor || "Unknown author";
quoteBtn.classList.remove("loading");
quoteBtn.innerText = "New quote";
});
}
// Événements pour les boutons
speechBtn.addEventListener("click", () => {
if (!quoteBtn.classList.contains("loading")) {
let utterance = new SpeechSynthesisUtterance(`${quoteText.innerText} from ${authorName.innerText}`);
synth.speak(utterance);
}
});
copyBtn.addEventListener("click", () => {
navigator.clipboard.writeText(quoteText.innerText);
});
twitterBtn.addEventListener("click", () => {
let tweetUrl = `https://twitter.com/intent/tweet?url=${quoteText.innerText}`;
window.open(tweetUrl, "_blank");
});
quoteBtn.addEventListener("click", randomQuote);🧐 Explication des méthodes
Obtenir tous les éléments DOM nécessaires:
quoteText: Lien vers l'élément où le texte de la citation sera affiché.
quoteBtn: Lien vers le bouton pour générer une nouvelle citation.
authorName: Lien vers l'élément qui affiche le nom de l'auteur de la citation.
speechBtn, copyBtn, twitterBtn: Liens vers les boutons pour lire la citation, la copier et la publier sur Twitter, respectivement.
synth: Nous utilisons l'API de synthèse vocale du navigateur pour exprimer les citations.
randomQuote(): Cette fonction effectue une requête à l'API pour obtenir une citation aléatoire et l'afficher dans l'application. Pendant le chargement de la citation, le bouton devient inactif et le texte du bouton devient « Loading Quote... ».
Événements pour les boutons:
Sonorisation de la citation (▶️) : Lorsque vous cliquez sur le bouton de sonorisation de la citation, un objet
SpeechSynthesisUtteranceest créé, qui sonorise la citation actuelle à l'aide de la synthèse vocale.Copie de la citation (📋) : Copie le texte de la citation actuelle dans le presse-papiers de l'utilisateur à l'aide de
navigator.clipboard.writeText().Publication sur Twitter (🔗) : ouvre une fenêtre pour publier la citation actuelle sur Twitter, créant une URL pour un tweet avec le texte de la citation.
Nouvelle citation: Appuyer sur le bouton appelle la fonction
randomQuote()pour charger une nouvelle citation.
💖 Résultats
Nous avons créé un générateur de citations aléatoires simple en utilisant HTML, CSS et JavaScript. ✨ Ce projet nous a aidés à combiner nos connaissances en mise en page et en programmation, ainsi qu'à travailler avec l'API. Vous pouvez maintenant l'étendre en ajoutant plus de fonctionnalités, telles que l'enregistrement de vos citations préférées ou même la création de votre propre liste de citations. Bonne chance et inspiration dans votre étude ultérieure du développement Web ! 🌱
Vous pouvez utiliser ce projet comme base pour créer des jeux plus complexes ou même étendre les fonctionnalités de ce jeu. Par exemple, ajouter un compteur de victoires, améliorer les graphismes ou rendre le jeu multijoueur. Les possibilités sont infinies, et tout dépend de ton imagination et de ta créativité !
Pour le code source complet et éventuellement des améliorations supplémentaires, consultez notre GitHub.
Si vous avez des questions, n'hésitez pas à les poser. Bonne chance dans la programmation, et que vos projets soient toujours aussi intéressants et passionnants ! 👊🌟