💡 Generator für zufällige Zitate in HTML, CSS und JavaScript
In diesem Artikel werden wir uns ansehen, wie man mit HTML, CSS und JavaScript einen einfachen Zufallszitatgenerator erstellt. ✨ Dies ist ein großartiges Projekt für Anfänger, um die Verwendung aller drei Technologien gleichzeitig zu üben. Am Ende des Artikels haben Sie eine fertige Anwendung, die zufällige Zitate generiert, es Ihnen ermöglicht, sie zu kopieren, zu synchronisieren und auf Twitter zu teilen. Fangen wir an!
✨ Demo-Projekt | 📂 Quellcode auf GitHub herunterladen
🤖 In der App Kodik Sie können HTML, CSS und JavaScript sowie viele andere Kurse lernen, um Ihre Reise in die Webentwicklung zu beginnen! 🌱
🛠️ Vorbereitung
Bevor Sie mit dem Schreiben von Code beginnen, stellen Sie sicher, dass Sie Folgendes haben:
🗒️ Code-Editor: Sie können einen beliebigen Texteditor verwenden, aber ich empfehle Visual Studio Code, da er benutzerfreundlich ist und viele nützliche Erweiterungen bietet.
🛈 Browser: Jeder moderne Browser, z. B. Chrome oder Firefox, um Ihre Anwendung zu testen.
📘 Grundkenntnisse in HTML, CSS und JavaScript: Es ist wünschenswert, Grundkenntnisse zu haben, um das Projekt leichter zu verstehen, aber Sie können diesem Artikel auch ohne Vorbereitung folgen.
Wenn Sie bereit sind, beginnen wir mit der Erstellung unseres Projekts aus einer leeren HTML-Datei! 🌱
🗃️ Schritt 1: HTML erstellen
HTML ist die Grundlage unserer Anwendung. Erstellen Sie eine Datei index.html, in der Sie die Struktur des zukünftigen Zitatgenerators beschreiben:
<!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>In dieser Datei haben wir den Hauptrahmen unserer Anwendung erstellt. Sie enthält eine Überschrift, einen Bereich zum Anzeigen des Zitats und des Autors sowie Schaltflächen für die Interaktion.
🖼️ Schritt 2: Styling mit CSS
Jetzt machen wir unsere App schön! Dazu verwenden wir CSS. Erstellen Sie eine Datei style.css und fügen Sie Stile hinzu:
@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;
}Wir haben Stile für eine komfortable und angenehme Benutzeroberfläche hinzugefügt: Wir haben die Schriftart geändert, den Hintergrund festgelegt, Stile für Schaltflächen und Text hinzugefügt.
💡 Schritt 3: Logik mit JavaScript hinzufügen
Jetzt ist es an der Zeit, unserer Anwendung mit JavaScript Funktionen hinzuzufügen. Erstellen Sie eine Datei script.js und fügen Sie den folgenden Code hinzu:
// Abrufen aller erforderlichen DOM-Elemente
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;
// Funktion zum Abrufen eines zufälligen Zitats
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";
});
}
// Ereignisse für Schaltflächen
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);🧐 Erläuterung der Methoden
Abrufen aller erforderlichen DOM-Elemente:
quoteText: Link zu dem Element, in dem der Zitattext angezeigt wird.
quoteBtn: Link zur Schaltfläche zum Generieren eines neuen Angebots.
authorName: Link zum Element, in dem der Name des Autors des Zitats angezeigt wird.
speechBtn, copyBtn, twitterBtn: Links zu Schaltflächen zum Anhören von Zitaten, Kopieren und Veröffentlichen auf Twitter.
synth: Wir verwenden die Sprachsynthese-API des Browsers, um Zitate zu sprechen.
randomQuote(): Diese Funktion sendet eine Anfrage an die API, um ein zufälliges Zitat zu erhalten, und zeigt es in der Anwendung an. Während das Zitat geladen wird, wird die Schaltfläche inaktiv und der Text der Schaltfläche ändert sich in "Loading Quote...".
Ereignisse für Schaltflächen:
Zitate vertonen (▶️): Wenn Sie auf die Schaltfläche Zitat aussprechen klicken, wird ein
SpeechSynthesisUtterance-Objekt erstellt, das das aktuelle Zitat mithilfe der Sprachsynthese ausgibt.Zitat kopieren (📋): Kopiert den Text des aktuellen Zitats in die Zwischenablage des Benutzers mit
navigator.clipboard.writeText().Veröffentlichung auf Twitter (🔗): Öffnet ein Fenster zum Veröffentlichen des aktuellen Zitats auf Twitter und erstellt eine URL für den Tweet mit dem Text des Zitats.
Neues Zitat: Durch Klicken auf die Schaltfläche wird die Funktion
randomQuote()zum Laden eines neuen Zitats aufgerufen.
💖 Ergebnisse
Wir haben einen einfachen Zufallszitatgenerator mit HTML, CSS und JavaScript erstellt. ✨ Dieses Projekt hat uns geholfen, Kenntnisse in Layout und Programmierung zu kombinieren und mit der API zu arbeiten. Jetzt können Sie es erweitern, indem Sie weitere Funktionen hinzufügen, z. B. das Speichern Ihrer Lieblingszitate oder sogar das Erstellen Ihrer eigenen Zitatliste. Viel Glück und Inspiration für Ihr weiteres Studium der Webentwicklung! 🌱
Du kannst dieses Projekt als Grundlage für die Erstellung komplexerer Spiele verwenden oder sogar die Funktionalität dieses Spiels erweitern. Zum Beispiel einen Siegzähler hinzufügen, die Grafik verbessern oder das Spiel für mehrere Benutzer freigeben. Die Möglichkeiten sind endlos, und alles hängt nur von deiner Vorstellungskraft und Kreativität ab!
Den vollständigen Quellcode und möglicherweise weitere Verbesserungen finden Sie auf unserer GitHub.
Wenn Sie Fragen haben, zögern Sie nicht, diese zu stellen. Viel Glück beim Programmieren und mögen deine Projekte immer so interessant und aufregend sein! 👊🌟