Introducción

¡Hola, compañeros desarrolladores! Hoy, estoy emocionado de compartir un proyecto simple y divertido en el que trabajé recientemente: un sitio web de Advice Generator. Este proyecto obtiene consejos aleatorios de una API externa y los muestra en una página web. Es una excelente manera de practicar el trabajo con API y la creación de aplicaciones web interactivas.

Descripción general del proyecto

El sitio web Advice Generator es una aplicación sencilla que permite a los usuarios obtener consejos aleatorios con solo hacer clic en un botón. Utiliza la API Advice Slip para buscar consejos y mostrarlos en la página web.

Características

• Obtiene consejos: recupera consejos aleatorios de la API Advice Slip.
• Muestra aviso: muestra el aviso junto con un número de aviso.
• Botón interactivo: los usuarios pueden obtener nuevos consejos haciendo clic en un botón.

Tecnologías utilizadas

• HTML: Para la estructura de la página web.
• CSS: Para diseñar la página web.
• JavaScript: para obtener datos de la API y actualizar el DOM.

Estructura del proyecto

Aquí hay un vistazo rápido a la estructura del proyecto:

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

Instalación

Para comenzar con el proyecto, sigue estos pasos:

1. Clonar el repositorio:
   

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

2. Abrir el directorio del proyecto:
   

   cd Advice-Generator
   

3. Ejecutar el proyecto:

   • Puedes ejecutarlo en un servidor local o simplemente abrir el archivo index.html en un navegador web.

Uso

1. Abra el sitio web en un navegador web.
2. Haz clic en el botón "Obtener consejos" para obtener un nuevo consejo.
3. ¡Disfruta de la sabiduría!

Explicación del código

HTML

El archivo HTML contiene la estructura básica de la página web, incluido un botón para buscar consejos y una sección para mostrarlos.

    

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

CSS

El archivo CSS le da estilo a la página web para que sea visualmente atractiva.

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

El archivo JavaScript obtiene consejos de la API y actualiza el 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);
        });
}

Demostración en vivo

Puedes ver la demostración en vivo del sitio web Advice Generator aquí.

Conclusión

Crear el sitio web Advice Generator fue una experiencia divertida y educativa. Me ayudó a practicar el trabajo con API y la creación de aplicaciones web interactivas. Espero que encuentres este proyecto tan divertido e informativo como yo. Siéntete libre de clonar el repositorio y jugar con el código. ¡Feliz codificación!

Créditos

• Este proyecto utiliza la API Advice Slip.

Autor

• Abhishek Gurjar
  • Perfil de GitHub