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

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

Installation

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

1. Cloner le dépôt :
   

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

2. Ouvrez le répertoire du projet :
   

   cd Advice-Generator
   

3. 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

1. Ouvrez le site Web dans un navigateur Web.
2. Cliquez sur le bouton "Obtenir des conseils" pour récupérer un nouveau conseil.
3. 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.

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

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

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

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 !

Crédits

• Ce projet utilise l'API Advice Slip.

Auteur

• Abhishek Gurjar
  • Profil GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!