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 des conseils aléatoires à partir 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 référentiel :
   

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

2. Ouvrir le répertoire du projet :
   

   cd Advice-Generator
   

3. Exécuter le projet :

   • Vous pouvez soit l'exécuter sur un serveur local, soit 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.

    

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

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

La création du 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