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 Ratschlag an: Zeigt den Ratschlag 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 Website in 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.

    

        
Advice Generator
        
Click the button to get a piece of advice!
        Get Advice
    
    

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