Erstellen einer Ratgeber-Generator-Website

Einführung

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.

Projektübersicht

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.

Merkmale

• Ruft Ratschläge ab: Ruft zufällige Ratschläge von der Advice Slip API ab.
• Zeigt Ratschläge an: Zeigt den Rat zusammen mit einer Ratschlagsnummer an.
• Interaktive Schaltfläche: Benutzer können neue Ratschläge abrufen, indem sie auf eine Schaltfläche klicken.

Verwendete Technologien

• HTML: Für die Struktur der Webseite.
• CSS: Zum Gestalten der Webseite.
• JavaScript: Zum Abrufen von Daten von der API und zum Aktualisieren des DOM.

Projektstruktur

Hier ein kurzer Blick auf die Projektstruktur:

Advice-Generator/
├── index.html
├── style.css
└── script.js

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

1. Klonen Sie das Repository:
   

   git clone https://github.com/abhishekgurjar-in/Advice-Generator.git
   

2. Öffnen Sie das Projektverzeichnis:
   

   cd Advice-Generator
   

3. Führen Sie das Projekt aus:

   • Sie können es entweder auf einem lokalen Server ausführen oder einfach die Datei index.html in einem Webbrowser öffnen.

Verwendung

1. Öffnen Sie die Websitein einem Webbrowser.
2. Klicken Sie auf die Schaltfläche „Ratschlag anfordern“, um einen neuen Ratschlag abzurufen.
3. Genieße die Weisheit!

Code-Erklärung

HTML

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.

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


    <div class="container">
        <h1 id="Advice-Generator">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>

CSS

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

JavaScript

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

Live-Demo

Sie können sich hier die Live-Demo der Advice Generator-Website ansehen.

Abschluss

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!

Credits

• Dieses Projekt verwendet die Advice Slip API.

Autor

• Abhishek Gurjar
  • GitHub-Profil

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!