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.

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
93f0f5c25f18dab9d176bd4f6de5d30e
    1fc2df4564f5324148703df3b6ed50c1
    4f2fb0231f24e8aef524fc9bf9b9874f
    b2386ffb911b14667cb8f0f91ea547a7Advice Generator6e916e0f7d1e588d4f442bf645aedb2f
    468dcf7b0ee61aef03af1a1fbe6725fc
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
        4a249f0d628e2318394fd9b75b4636b1Advice Generator473f0a7621bec819994bb5020d29372a
        763cfba416dfc5411b624194ed788e86Click the button to get a piece of advice!94b3e26ee717c64999d7867364b1b4a3
        59863cd1e20719ad0426694918b5bfefGet Advice65281c5ac262bf6d81768915a4a77ac0
    16b28748ea4df4d9c2150843fecfba68
    84cf5d7ad8199c88ca1d921cae010baf2cacc6d41bbb37262a98f745aa00fbf0
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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!