720 Lesungen

Dieser Javascript-Code generiert zufällige Zitate

von Emmanuel Okolie 6m2024/04/25

Zu lang; Lesen

So erstellen Sie ein Projekt mit zufälligen Zitaten mit Vanilla JavaScript.

featured image - Dieser Javascript-Code generiert zufällige Zitate

Was fällt Ihnen ein, wenn Sie die Worte „Zufälliges Zitat mit Vanilla JavaScript“ hören? Meiner Ansicht nach ist alles möglich.

Und es gibt möglicherweise noch eine andere Skriptsprache, die zufällige Anführungszeichen erstellen kann, aber eine der bekanntesten davon ist die Verwendung von JavaScript zum Erstellen zufälliger Anführungszeichen.

Sie haben vielleicht schon einige Social-Media-Apps gesehen, die Beiträge von Personen anzeigen, aber Sie müssen weiter scrollen, um weitere Beiträge zu sehen. Aber je nachdem, was wir erstellen werden, müssen Sie auf eine Schaltfläche klicken, um ein neues Zitat anzuzeigen.

Hinweis: In diesem Tutorial verwenden wir eine API. Die API dient dazu, die Kurse nach dem Zufallsprinzip aus dem Internet abzurufen. Durch einfaches Klicken auf die Schaltfläche ruft die API neue Kurse ab. Lassen Sie uns also ohne viel Zeit zu verschwenden in diesen Leitfaden eintauchen.

Voraussetzung

Sie müssen über Grundkenntnisse in HTML verfügen
Sie müssen über Grundkenntnisse in CSS verfügen
Sie benötigen Grundkenntnisse in JavaScript
Haben Sie auch einen Code-Editor (Sublime oder VS-Code) usw.

Schritt-für-Schritt-Zufallsgenerator für JavaScript-Zitate

Ein zufälliges Zitat zieht Zitate nach dem Zufallsprinzip aus einer API oder einem Array. In diesem Artikel verwenden wir JavaScript, um Zitate aus einem Array zu erzeugen, während wir einen Zufallszitatgenerator von Grund auf nur mit HTML, CSS und JavaScript entwickeln. Nachfolgend finden Sie eine Schritt-für-Schritt-Anleitung zum Ausführen der Aufgabe „Zufälliges Zitat“.

Schritt 1: Ein neues Projekt erstellen Das Projekt, das Sie erstellen möchten, enthält drei Seiten: HTML, CSS und JavaScript. Sie benennen die verschiedenen Seiten also folgendermaßen: index.html, style.css, script.js. Nachdem Sie dies getan haben, können Sie mit dem nächsten Schritt fortfahren.

Schritt 2: Erstellen des Rahmens In diesem Schritt können Sie einige HTML-Codes hinzufügen, die Ihrem Projekt Struktur verleihen.
Hinweis: Dieser Abschnitt ist wahrscheinlich das Erste, was Sie tun müssen, nachdem Sie den Ordner und die Dateien wie oben beschrieben erstellt haben.

 <!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>

Schritt 3: Stile für die Klassen hinzufügen In diesem Abschnitt werden wir dem Code mit CSS Stile hinzufügen, um den Zitatgenerator zu erstellen. Hinweis: Dieser Abschnitt ist der nächste Schritt nach dem Erstellen der Datei index.html. Sie werden eine weitere Datei mit dem Namen style.css erstellen. Die Datei style.css wird mit der HTML-Datei verknüpft.

Anschließend können Sie das Layout des HTML gestalten. Hier ist der CSS-Code unten.

 * { 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); }

Schritt 4: Fügen Sie einige Zeilen JavaScript-Code ein. In diesem Schritt werden wir etwas JavaScript-Code einbauen, um den Angebotsgenerator zu erstellen. Hinweis: Dieser Abschnitt ist ein wesentlicher Teil dieses Tutorials. Jetzt erstellen Sie eine weitere Datei, nennen sie script.js.

Sehen Sie sich den Code unten an. Sie werden deutlich sehen, was getan wurde. Wir haben mit einer API interagiert, indem wir einen Link verwendet und in einer Variable namens URL gespeichert haben. Um diese Anleitung kurz zu halten, gehen Sie script.js durch. Sie werden vor jedem Abschnitt einen Kommentar bemerken. Hier ist der JavaScript-Code unten.

 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();

Abschluss

Wir sind am Ende dieses Tutorials angelangt. Hoffentlich konnten Sie viel aus diesem Tutorial mitnehmen. Informationen zum Erstellen eines Projekts mit zufälligen Zitaten mithilfe von Vanilla JavaScript.

Wir haben gesehen, wie man mit einer API interagiert (obwohl das nicht die einzige oder, sollte ich sagen, beste Möglichkeit ist, mit einer API zu interagieren), und wie man ein Zitat aus unserem JS-Code an Ihren Twitter-Account twittert.

Allein die Diskussion dieses Tutorials hat uns viel gezeigt. Hinterlassen Sie also gerne einen Kommentar! Und wenn Sie weitere Tutorials möchten, folgen Sie mir bitte.

Bis zum nächsten Mal, genieße deinen Tag!

Über den Autor

Emmanuel Okolie ist ein Full-Stack-Laravel-Entwickler mit 2+ Jahren Erfahrung in der Softwareentwicklungsbranche. Er hat umfassende Fähigkeiten aufgebaut, indem er Softwareentwicklung, Schreiben und das Unterrichten anderer in dem, was er tut, kombiniert hat. Seine Stacks sind ReactJs, Laravel, PHP, JavaScript, und mehr.

Er arbeitet als Freiberufler, erstellt Websites für Kunden und schreibt technische Handbücher, um andere in die Ausführung seiner Arbeit einzuweisen.

Emmanuel Okolie würde sich über die Gelegenheit freuen, mit Ihnen zu sprechen. Besuchen und folgen Sie ihm auf LinkedIn , Facebook , Github , Twitter oder seiner Website .