Wie erstellt man einen Zufallsgenerator für Zitate mit HTML, CSS und JavaScript?-js-Tutorial-php.cn

Wie erstellt man einen Zufallsgenerator für Zitate mit HTML, CSS und JavaScript?

PHPz

Freigeben： 2023-08-24 20:41:04

nach vorne

1231 Leute haben es durchsucht

如何使用 HTML、CSS 和 JavaScript 构建随机报价生成器？

In diesem Tutorial erstellen wir ein Projekt mit HTML, CSS und JavaScript, das zufällige Referenzen von einer API (type.fit) generiert.

Schritte

Wir werden einige grundlegende Schritte befolgen:

HTML-Elemente und -Vorlagen erstellen
Stile mit CSS hinzufügen
JavaScript-Logik

HTML-Elemente und -Vorlagen erstellen

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.

HTML

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

Nach dem Login kopieren

Hinzufügen von Stilen mit CSS

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" />

Nach dem Login kopieren

CSS

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;
}

Nach dem Login kopieren

JavaScript-Logik

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.

Schritte

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.

JavaScript

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

Nach dem Login kopieren

Lassen Sie uns JavaScript-Funktionscode einbetten, damit es funktioniert.

Beispiel – Vollständiges Programm

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>

Nach dem Login kopieren

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!