In diesem Tutorial erstellen wir ein Projekt mit HTML, CSS und JavaScript, das zufällige Referenzen von einer API (type.fit) generiert.
HTML-Elemente und -Vorlagen erstellen
Stile mit CSS hinzufügen
JavaScript-Logik
Der erste Schritt ist Erstellen Sie HTML-Elemente und Vorlagen. Wir fügen zuerst ein Feld hinzu, in dem das Element angezeigt wird, und fügen dann eine Schaltfläche hinzu, die beim Klicken ein neues zufälliges Zitat im Feld anzeigt. Anschließend verwenden wir das Span-Tag, um das fantastische Symbol für die Schriftart „Zitatsymboltyp“ anzuzeigen.
<!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>
Jetzt fügen wir dem HTML-Projekt, das wir geschrieben haben, Stile hinzu. Wir werden der Box Eigenschaften wie Boxschatten, Abstand und Rand hinzufügen, für den Autor werden wir die kursive Schriftfamilie verwenden und wir werden der Box und dem Text auch eine Hintergrundfarbe hinzufügen, damit sie großartig aussieht.
Wir werden an internem CSS arbeiten, um das Erstellen zusätzlicher Dateien zu vermeiden, aber das Erstellen externer Dateien für CSS und JavaScript wird als bewährte Vorgehensweise angesehen.
Wir werden in unserem Kopf einen CDN Font Awesome-Link hinzufügen, um Font Awesome-Symbole in unserer Anwendung zu verwenden.
<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" />
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;
}Jetzt kommt der logische Teil ins Spiel. Dieser Teil wird das JavaScript sein. Wir werden definieren, welche Elemente welche Arbeit leisten und die API verwenden, um die Daten abzurufen und anzuzeigen. Lassen Sie uns also einen tieferen Einblick in das Ganze erhalten Tauchen Sie ein in unsere JavaScript-Funktion.
Wir müssen die folgenden Schritte befolgen, um unsere Arbeit abzuschließen -
Angebotsdaten von der type.fit-API abrufen.
Die empfangenen Daten werden im Array gespeichert.
Holen Sie sich eine zufällige Indexvariable mit dem Namen „randomIdx“.
Dann stellen Sie die maximale Größe von „randomIdx“ auf die Länge der Angebotsliste ein.
Holen Sie sich das Zitat und den Autor mithilfe des generierten Zufallsindex.
Nun weisen wir den erhaltenen Wert dem Element Element zu.
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);
Lassen Sie uns JavaScript-Funktionscode einbetten, damit es funktioniert.
Unten finden Sie das vollständige Programm zum Erstellen eines Zufallsangebotsgenerators.
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>
Wir haben also gelernt, wie man eine Angebotsgenerator-App erstellt und hoffen, dass es hilft.
Das obige ist der detaillierte Inhalt vonWie erstellt man einen Zufallsgenerator für Zitate mit HTML, CSS und JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
