Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/criscorreas/random-jokes-generator
Generador de bromas de programación desarrollado con HTML, CSS y JavaScript
https://github.com/criscorreas/random-jokes-generator
css3 html javascript random-jokes-generator xhr
Last synced: 11 days ago
JSON representation
Generador de bromas de programación desarrollado con HTML, CSS y JavaScript
- Host: GitHub
- URL: https://github.com/criscorreas/random-jokes-generator
- Owner: CrisCorreaS
- License: mit
- Created: 2024-02-22T12:42:35.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-03T02:04:49.000Z (9 months ago)
- Last Synced: 2024-03-03T03:19:43.593Z (9 months ago)
- Topics: css3, html, javascript, random-jokes-generator, xhr
- Language: HTML
- Homepage: https://criscorreas.github.io/random-jokes-generator/
- Size: 8.57 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🥳 Random Jokes Generator
[](https://criscorreas.github.io/random-jokes-generator/)
Este generador de bromas online ha sido creado por **[Cristina Correa](https://www.linkedin.com/in/cristina-correa-segade/)**
## 👀 Vista Previa
### ➡️ **Demo desplegada en GitHub Pages:** **[Haz click aquí](https://criscorreas.github.io/random-jokes-generator/)**
#### Vista del generador de bromas
### Funcionalidades:
1️⃣ **Creación de bromas nuevas dinámicamente**:
- Permite a los usuarios generar bromas dinámicamente con un solo click.
## 🌱 Características
- **Interfaz**: Diseño sencillo y adaptable, con una estética monocromática que garantiza una experiencia visual uniforme en cualquier dispositivo.
- **Funciones básicas**: Realiza peticiones a una API de bromas de programación para luego presentarlas de manera dinámica en HTML, ofreciendo así una experiencia entretenida y ligera para el usuario.
- **Conexión a una API Open Source**: Conexión con el objeto XMLHttpRequest a una [API Open Source](https://official-joke-api.appspot.com/) que devuelve datos en formato json.
- **Contador de bromas**: Cuenta el número de bromas que has visto
## 🛠️ Tecnologías Utilizadas
- HTML
- CSS
- JavaScript
- [API Open Source](https://official-joke-api.appspot.com/jokes/random)
## 🤖 API
- Al acceder a la [URL de la API](https://official-joke-api.appspot.com/jokes/random), se solicita un chiste aleatorio. La respuesta es un objeto JSON que contiene varios campos principales. Un ejemplo de la llamada a la API sería haciendo "https://official-joke-api.appspot.com/jokes/random" lo cual nos devuelve:
```
{
"type":"programming",
"setup":"What's the object-oriented way to become wealthy?",
"punchline":"Inheritance",
"id":16
}
```
- Una posible alternativa para generar bromas aleatorias de programación es la [JokeAPI](https://v2.jokeapi.dev/). Esta devuelve un objeto JSON con varios campos entre los que se encuentra la propia broma. Un ejemplo de la llamada a la API sería haciendo "https://v2.jokeapi.dev/joke/Programming?lang=es" lo cual nos devuelve:
```
{
"error": false,
"category": "Programming",
"type": "single",
"joke": "Sólo hay 10 tipos de personas en este mundo, las que entienden binario y las que no.",
"flags": {
"nsfw": false,
"religious": false,
"political": false,
"racist": false,
"sexist": false,
"explicit": false
},
"safe": true,
"id": 5,
"lang": "es"
}
```
## 🔎💡 Información
> [!IMPORTANT]
> - Este es un proyecto para principiantes. No se requieren conocimientos avanzados de HTML, CSS o JavaScript, pero sí saber cómo hacer conexiones a apis con el objeto XMLHttpRequest.
> - Está desarrollado utilizando JavaScript Vanilla, así que no se utiliza ningún framework. Sin embargo, si estás buscando un poco más de desafío, ¡siéntete libre de explorar la posibilidad de integrar un framework!
> - **Nivel de dificultad del proyecto:** 🔴⭕⭕⭕⭕⭕⭕⭕⭕⭕ (1 sobre 10)
> [!TIP]
> A la hora de desarrollar el proyecto, te pueden venir bien los siguientes recursos:
> - [API de Generación de Bromas de Programadores](https://official-joke-api.appspot.com/jokes/random)
> - CSS
> - [Manz.Dev Lenguaje CSS](https://lenguajecss.com/css/)
> - JavaScript:
> - [Manz.Dev Lenguaje Javascript](https://lenguajejs.com/javascript/)
> - [JavaScript MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
> - [XHR: XMLHttpRequest - Manz](https://lenguajejs.com/javascript/peticiones-http/xhr/)
> - Font Awesome
> - [Font Awesome Get Started](https://fontawesome.com/docs/web/setup/get-started)
> - [Font Awesome Documentation](https://fontawesome.com/v5/docs/web/reference-icons/)
## 📓 Cómo Usar
1. Descarga o clona este repositorio en tu máquina local.
2. Abre el archivo `index.html` en tu navegador web.
¡Y eso es todo! Ahora cualquier persona puede usar un generador de bromas desde un dispositivo.
## ✨ Contribuciones
¡Las contribuciones son bienvenidas! Si deseas mejorar el generador de bromas existente, como agregar más contenido o mejorar el diseño, no dudes en enviar tus pull requests. También puedes sugerir nuevas funcionalidades o brindar retroalimentación para hacer que este proyecto sea aún mejor.
## 🎯 Propósito del Proyecto
Este proyecto forma parte de una tarea de la asignatura de "Desarrollo Web en Entorno Cliente" y tiene como objetivo principal el aprendizaje de tecnologías para mejorar en el plano del desarrollo.