🤖 Robot Joke Generator

¡Bienvenido al Robot Joke Generator! Esta es una aplicación web sencilla y divertida que simula una conversación de chat con un robot que cuenta chistes. Utiliza una API externa para obtener bromas aleatorias y las presenta de manera interactiva, creando una experiencia amigable y entretenida.

📋 Descripción

La aplicación permite a los usuarios interactuar con un robot virtual presionando un botón para solicitar una broma. El robot responde con chistes divertidos obtenidos de la API de icanhazdadjoke, simulando un chat en tiempo real. Es perfecta para momentos de ocio o para demostrar conceptos básicos de desarrollo web.

✨ Características

• Interfaz de Chat Simulada: Muestra mensajes del usuario y respuestas del robot en un formato de chat.
• Bromas Aleatorias: Cada clic genera una nueva broma de la API.
• Animaciones Suaves: Incluye transiciones y animaciones para una experiencia visual atractiva.
• Diseño Responsivo: Adaptable a diferentes tamaños de pantalla.
• Tema Oscuro: Estilo moderno con gradientes y colores atractivos.

🔧 Tecnologías Utilizadas

• HTML5: Estructura básica de la página.
• CSS3: Estilos, animaciones y diseño responsivo.
• JavaScript (ES6+): Lógica de la aplicación, manipulación del DOM y llamadas a la API.
• API Externa: icanhazdadjoke para obtener bromas.

🚀 Funcionamiento

1. Carga Inicial: Al abrir la aplicación, se genera automáticamente una broma para iniciar la conversación.
2. Interacción del Usuario: El usuario hace clic en el botón "Can you tell me a joke?".
3. Simulación de Chat:
   • Se añade un mensaje del usuario: "Hey Robot, tell me a joke!".
   • Se muestra un indicador de carga (puntos suspensivos).
   • Se realiza una petición a la API para obtener una broma.
   • Se reemplaza el indicador con la broma obtenida.
4. Repetición: El proceso se puede repetir indefinidamente.

📖 Uso de la Aplicación

Para utilizar la aplicación:

1. Abre el archivo index.html en tu navegador web.
2. Haz clic en el botón "Can you tell me a joke?" para generar una nueva broma.
3. Disfruta de la conversación simulada con el robot.

💻 Fragmentos de Código Destacados

JavaScript: Generación de Bromas

El corazón de la aplicación está en el archivo script.js. Aquí se destaca la función generateJoke, que maneja la lógica principal:

async function generateJoke() {
    jokeBtn.disabled = true;  // Deshabilita el botón para evitar clics múltiples

    const message = createMessageElement("Hey Robot, tell me a joke!");  // Crea el mensaje del usuario
    appendMessage(message);  // Añade el mensaje al chat

    const joke = createMessageElement();  // Crea el elemento para la broma
    setElementContent(joke, '<i class="fa-solid fa-ellipsis"></i>');  // Muestra indicador de carga
    appendMessage(joke);  // Añade al chat

    const res = await fetch("https://icanhazdadjoke.com/", {  // Petición asíncrona a la API
        headers: {
            Accept: "application/json",  // Especifica formato JSON
        },
    });

    if (res.ok) {  // Si la respuesta es exitosa
        const data = await res.json();  // Parsea la respuesta JSON
        setElementContent(joke, data.joke);  // Establece el contenido de la broma
        jokeBtn.disabled = false;  // Rehabilita el botón
    }
}

Conceptos Aplicados:

• Funciones Asíncronas: async/await para manejar peticiones HTTP sin bloquear la interfaz.
• Manipulación del DOM: Creación y modificación de elementos HTML dinámicamente.
• Event Listeners: Escucha de eventos de clic en el botón.
• Fetch API: Realización de peticiones HTTP para obtener datos externos.

Funciones Auxiliares

function createMessageElement(content) {
    const element = document.createElement("div");  // Crea un nuevo elemento div
    element.classList.add("message");  // Añade clase base
    if (content) {
        element.classList.add("response");  // Si hay contenido, es mensaje del usuario
        setElementContent(element, content);
    } else {
        element.classList.add("joke");  // Si no, es broma del robot
    }
    return element;
}

function setElementContent(element, content) {
    element.innerHTML = content;  // Establece el contenido HTML del elemento
}

function appendMessage(element) {
    chat.appendChild(element);  // Añade el elemento al contenedor del chat
}

Estas funciones demuestran el manejo eficiente del DOM, creando elementos dinámicos y actualizando el contenido de la página en tiempo real.

📥 Descarga e Instalación

1. Clona el Repositorio:

   git clone https://github.com/Seb-RM/Javascript_Html_CSS-Robot-Joke-Generator.git
   

2. Navega al Directorio:

   cd robot-joke-generator
   

3. Abre en el Navegador:

   • Abre el archivo index.html directamente en tu navegador web.
   • No se requieren dependencias adicionales ni instalación de paquetes.

🙏 Agradecimientos

• icanhazdadjoke por proporcionar la API de bromas.
• Pixabay por la imagen del robot utilizada en el avatar.

¡Diviértete generando bromas con el Robot Joke Generator! 😄