Hallo, liebe Entwickler! Heute freue ich mich, Ihnen ein unterhaltsames und einfaches Projekt vorzustellen, an dem ich kürzlich gearbeitet habe: eine Advice Generator-Website. Dieses Projekt ruft zufällige Ratschläge von einer externen API ab und zeigt sie auf einer Webseite an. Es ist eine großartige Möglichkeit, die Arbeit mit APIs und die Erstellung interaktiver Webanwendungen zu üben.
Die Advice Generator-Website ist eine unkomplizierte Anwendung, mit der Benutzer auf Knopfdruck zufällige Ratschläge erhalten können. Es nutzt die Advice Slip API, um Ratschläge abzurufen und auf der Webseite anzuzeigen.
Hier ein kurzer Blick auf die Projektstruktur:
Advice-Generator/ ├── index.html ├── style.css └── script.js
Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:
Klonen Sie das Repository:
git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
Öffnen Sie das Projektverzeichnis:
cd Advice-Generator
Führen Sie das Projekt aus:
Die HTML-Datei enthält die Grundstruktur der Webseite, einschließlich einer Schaltfläche zum Abrufen von Ratschlägen und eines Abschnitts zum Anzeigen der Ratschläge.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advice Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Advice Generator</h1>
<p id="advice">Click the button to get a piece of advice!</p>
<button id="adviceBtn">Get Advice</button>
</div>
<script src="script.js"></script>
</body>
</html>
Die CSS-Datei formatiert die Webseite, um sie optisch ansprechend zu gestalten.
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.container {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
margin-top: 20px;
}
button:hover {
background-color: #0056b3;
}
Die JavaScript-Datei ruft Ratschläge von der API ab und aktualisiert das DOM.
document.getElementById('adviceBtn').addEventListener('click', fetchAdvice);
function fetchAdvice() {
fetch('https://api.adviceslip.com/advice')
.then(response => response.json())
.then(data => {
document.getElementById('advice').innerText = `Advice #${data.slip.id}: ${data.slip.advice}`;
})
.catch(error => {
console.error('Error fetching advice:', error);
});
}
Sie können sich hier die Live-Demo der Advice Generator-Website ansehen.
Der Aufbau der Advice Generator-Website war eine unterhaltsame und lehrreiche Erfahrung. Es hat mir geholfen, die Arbeit mit APIs und die Erstellung interaktiver Webanwendungen zu üben. Ich hoffe, dass Sie dieses Projekt genauso unterhaltsam und informativ finden wie ich. Klonen Sie gerne das Repository und experimentieren Sie mit dem Code. Viel Spaß beim Codieren!
Das obige ist der detaillierte Inhalt vonErstellen einer Ratgeber-Generator-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Befehle zur Datenträgerbereinigung?
vbnet-Tutorial
Was bedeutet Java-Routing?
So legen Sie die URL des tplink-Routers fest
So aktivieren Sie das Win7 Professional-Versionssystem
Merkmale von Managementinformationssystemen
Wie man negative Zahlen binär darstellt
Das Computersystem besteht aus
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
