Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devchris03/foodrecipe
Todas las recetas en un solo lugar
https://github.com/devchris03/foodrecipe
api css html javascript localstorage themealdb-api
Last synced: about 1 month ago
JSON representation
Todas las recetas en un solo lugar
- Host: GitHub
- URL: https://github.com/devchris03/foodrecipe
- Owner: devchris03
- Created: 2024-11-06T21:45:37.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-13T20:23:16.000Z (about 1 month ago)
- Last Synced: 2024-11-13T21:26:30.628Z (about 1 month ago)
- Topics: api, css, html, javascript, localstorage, themealdb-api
- Language: JavaScript
- Homepage: https://devchris03.github.io/FoodRecipe/
- Size: 427 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Proyecto de Recetas con TheMealDB API 🍽️
Este proyecto es una aplicación web desarrollada con HTML, CSS y JavaScript que consume la API [TheMealDB](https://www.themealdb.com/) para mostrar recetas de diversas categorías de alimentos. La aplicación permite a los usuarios explorar recetas, ver detalles de cada plato y guardarlos como favoritos. Está diseñada para adaptarse a dispositivos móviles, incluyendo un menú desplegable para una navegación más intuitiva en pantallas pequeñas.
## Funcionalidades
### Página de Recetas
- **Seleccionar Categoría de Alimentos**: Permite elegir entre diferentes categorías de alimentos.
- **Mostrar Resultados**: Muestra los platos de la categoría seleccionada con su imagen de referencia y nombre.
- **Ver Receta**: Cada plato tiene un botón de "Ver receta" que abre un modal con los detalles de la receta.
### Modal de Detalles de Receta
- **Información del Plato**: Muestra la imagen, el nombre del plato, las instrucciones y la lista de ingredientes.
- **Botones de Acciones**:
- **Cerrar Modal**: Permite cerrar la vista de la receta.
- **Guardar/Eliminar Favorito**: Permite guardar el plato en la lista de favoritos o eliminarlo si ya está guardado.
- **Notificaciones**: Muestra una notificación cada vez que se guarda o elimina un plato de los favoritos.
### Página de Favoritos
- **Mostrar Favoritos**: Almacena los platos favoritos en el `localStorage` y los muestra en la página de Favoritos, donde se pueden ver todos los platos guardados.
## Características Técnicas
- **Adaptación a Pantallas Móviles**: La interfaz está optimizada para dispositivos móviles, con un menú desplegable que facilita la navegación.
- **Almacenamiento Local**: Los platos guardados como favoritos se almacenan en el `localStorage`, permitiendo que los favoritos persistan incluso al recargar la página o cerrar la aplicación.
## Tecnologías Utilizadas
- **HTML**
- **CSS**
- **JavaScript**
- **TheMealDB API**
## Notas Adicionales
- Este proyecto está diseñado como una aplicación web sin backend, por lo que todo el almacenamiento de datos de favoritos se gestiona en el navegador a través de `localStorage`.
- Los datos de recetas provienen de [TheMealDB API](https://www.themealdb.com/), una API abierta para obtener información sobre diferentes recetas y categorías de alimentos.
## Vista Previa
---
## Redes:
:nazar_amulet: Linkedin: [Christina Pascual](https://www.linkedin.com/in/christina-pascual/)
:nazar_amulet: Twitter: [Christina Pascual](https://x.com/devchris03)
:nazar_amulet: Tiktok: [devChris03](https://www.tiktok.com/@devchris03?_t=8p5TriBHr3G&_r=1)
¡Explora y disfruta de tus recetas favoritas con facilidad!