🐱 Random Cat Generator

Este generador de gatitos aleatorios ha sido creado por Cristina Correa

👀 Vista Previa

➡️ Demo desplegada en GitHub Pages: Haz click aquí

Vista del generador de gatitos aleatorios

• Modo Claro

• Modo Oscuro

Funcionalidades:

1️⃣ Creación de imágenes de gatitos aleatorios:

• Crea imágenes de gatitos en tiempo real.
• Contabiliza en tiempo real el número de imágenes de gatitos que se han visto

2️⃣ Interfaz con modo claro y oscuro:

• La página tiene una versión clara y una versión oscura, las cuales se pueden cambiar desde el botón superior derecho.

🌱 Características

• Generación de Fotos de Gatitos Random: Utiliza una API para obtener fotos de gatitos aleatorias y las muestra en la página web.
• Contador de Gatitos Vistos: Lleva un registro del número de gatitos que el usuario ha visto en la sesión actual o en general.
• Botón de Actualización: Permite al usuario actualizar la foto actual de manera manual haciendo clic en un botón de actualización o de "refresh".
• Modo Claro/Oscuro: Ofrece la opción de cambiar entre un tema de diseño claro y uno oscuro para adaptarse a las preferencias de los usuarios.
• Interfaz de Usuario Intuitiva: Diseña una interfaz de usuario fácil de usar y navegar para que los usuarios puedan interactuar sin problemas con la aplicación.
• Conexión a una API: Conexión con ajax y jQuery a The Cat API que devuelve datos en formato json.

🛠️ Tecnologías Utilizadas

• HTML
• CSS
• JavaScript
• The Cat API

🤖 API

• Al acceder a la API de The Cat API, obtenemos fotos de varios gatitos. La API tiene una versión gratuíta y una de pago, por lo que en mi caso, únicamente utilizo las funciones gratuitas. Un ejemplo de la llamada a la API sería haciendo "https://api.thecatapi.com/v1/images/search" lo cual nos devuelve:

[{"id":"10j","url":"https://cdn2.thecatapi.com/images/10j.jpg","width":500,"height":335}]

🔎💡 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 y las bases de jQuery.
• Está desarrollado utilizando JavaScript con jQuery. 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 Obtención de Gatitos
• CSS
  • Manz.Dev Lenguaje CSS
  • aspect-ratio - MDN
  • Open-Source UI elements - universe.io
• JavaScript:
  • Manz.Dev Lenguaje Javascript
  • JavaScript MDN Documentation
  • How to Make Dark Mode for Websites using HTML CSS & JavaScript - GeeksforGeeks
  • toggle() method - MDN
• jQuery:
  • Documentación Oficial de jQuery
  • Curso de jQuery - Didacticode
• Font Awesome
  • Font Awesome Get Started
  • Font Awesome Documentation

📓 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 gatitos aleatorios desde un dispositivo.

✨ Contribuciones

¡Las contribuciones son bienvenidas! Si deseas mejorar el generador de gatitos aleatorios 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.