Créer un site Web générateur de conseils-js tutoriel-php.cn

Créer un site Web générateur de conseils

PHPz

Libérer： 2024-08-08 06:50:52

original

635 Les gens l'ont consulté

Building an Advice Generator Website

Introduction

Bonjour, amis développeurs ! Aujourd'hui, je suis ravi de partager un projet simple et amusant sur lequel j'ai récemment travaillé : un site Web générateur de conseils. Ce projet récupère des conseils aléatoires à partir d'une API externe et les affiche sur une page Web. C'est un excellent moyen de s'entraîner à travailler avec des API et à créer des applications Web interactives.

Aperçu du projet

Le site Web Advice Generator est une application simple qui permet aux utilisateurs d'obtenir des conseils aléatoires en un seul clic. Il utilise l'API Advice Slip pour récupérer des conseils et les afficher sur la page Web.

Caractéristiques

Récupère les conseils : récupère les conseils aléatoires de l'API Advice Slip.
Affiche les conseils : affiche les conseils ainsi qu'un numéro de conseil.
Bouton interactif : les utilisateurs peuvent obtenir de nouveaux conseils en cliquant sur un bouton.

Technologies utilisées

HTML : Pour la structure de la page Web.
CSS : Pour styliser la page Web.
JavaScript : Pour récupérer les données de l'API et mettre à jour le DOM.

Structure du projet

Voici un aperçu rapide de la structure du projet :

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

Copier après la connexion

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

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

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Advice-Generator
```
Copier après la connexion
Exécuter le projet :
- Vous pouvez l'exécuter sur un serveur local ou simplement ouvrir le fichier index.html dans un navigateur Web.

Usage

Ouvrez le site Web dans un navigateur Web.
Cliquez sur le bouton "Obtenir des conseils" pour récupérer un nouveau conseil.
Profitez de la sagesse!

Explication du code

HTML

Le fichier HTML contient la structure de base de la page Web, y compris un bouton pour récupérer des conseils et une section pour afficher les conseils.

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

Copier après la connexion

CSS

Le fichier CSS stylise la page Web pour la rendre visuellement attrayante.

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

Copier après la connexion

Javascript

Le fichier JavaScript récupère les conseils de l'API et met à jour le 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);
        });
}

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du site Web Advice Generator ici.

Conclusion

Construire le site Web Advice Generator a été une expérience amusante et éducative. Cela m'a aidé à m'entraîner à travailler avec des API et à créer des applications Web interactives. J'espère que vous trouverez ce projet aussi agréable et instructif que moi. N'hésitez pas à cloner le référentiel et à jouer avec le code. Bon codage !