Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pedro-donoso/vite-project
Proyecto de VanillaJS creado con Vite, que se conecta a la API https://api.imgflip.com/get_memes y utiliza Bootstrap para mostrar una galería de imágenes
https://github.com/pedro-donoso/vite-project
api api-client bootstrap5 vanilla-javascript vanilla-js vite vitejs
Last synced: 27 days ago
JSON representation
Proyecto de VanillaJS creado con Vite, que se conecta a la API https://api.imgflip.com/get_memes y utiliza Bootstrap para mostrar una galería de imágenes
- Host: GitHub
- URL: https://github.com/pedro-donoso/vite-project
- Owner: pedro-donoso
- Created: 2024-02-12T04:09:04.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-04-03T16:55:27.000Z (9 months ago)
- Last Synced: 2024-04-23T20:50:25.327Z (8 months ago)
- Topics: api, api-client, bootstrap5, vanilla-javascript, vanilla-js, vite, vitejs
- Language: CSS
- Homepage:
- Size: 47.9 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### https://project-vite.netlify.app/
#### 1.Creo proyecto npm con vite:
```
npm create vite
```
1.1. Nombre del proyecto, Opción: vanilla js y entrar a la carpeta del proyecto
#### 2. Instalar npm:
```
npm install
```
#### 3. Agrego script js de tipo MODULO al archivo index.html:
```
```
#### 4. Instalo bootstrap por npm:
```
npm install bootstrap
```
#### 5. En el archivo main.js importo las librerias de bootstrap:
```
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle'
```
#### 6. En el archivo index.html agrego link css:
```
```
#### 7. Ejecuto servidor de vite:
```
npm run dev
```
#### 8. Creo carpeta js y archivo api.js en raíz del proyecto
```
js
api.js
```
8.1. Creo conexión a la API, en el archivo api.js y la exporto:
```
let url = 'https://api.imgflip.com/get_memes'
export const getApi= async()=>{
const resp=await fetch(url)
const {data}=await resp.json()
return data.memes
}
```
8.2. En el archivo main.js importo la respuesta de la API:
```
import { getApi } from './js/api'
const cargarApi=async()=>{
const imagenes = await getApi()
console.log(imagenes);
};
cargarApi();
```
8.3. Reviso por consola los resultados de la API:
#### 9. En index.html creo contenedor que cargará las tarjetas dinámicamente:
```
Galería
```
#### 10. En carpeta js creo archivo modular funciones.js para recorrer arreglo de imágenes:
```
export const crearTarjetas=(imagenes)=>{
imagenes.map((imagen)=>{
const col = document.createElement('div');
col.classList='col mb-3';
col.innerHTML=cardApp(imagen);
document.querySelector('#contenedor').append(col);
});
};
```
#### 11. Creo carpeta components y archivo cardApp.js con card dinámica con datos desde la API:
```
const cardImagen=(imagen)=>{
return `
${imagen.name}
`
}
export default cardImagen;
```
#### 12. En archivo funciones.js importo el componente cardApp:
```
import cardImagen from "../components/cardApp";
```
#### 13. En el archivo main.js importo la funcion crearTarjetas y llamo a las imagenes de la API:
```
const cargarApi=async()=>{
const imagenes = await getApi()
crearTarjetas(imagenes)
};
cargarApi();
```
#### 14. Creo carpeta css y archivo style.css:
```
.card-imagen {
height: 200px;
border: 0;
}
.card-imagen img {
min-height: 300px;
border-radius: 10px;
}
```
#### 15. En main.js importo los estilos creados:
```
import './css/style.css'
```
#### 16. En cardApp.js agrego las clase de estilo "card-imagen":
```
const cardImagen=(imagen)=>{
return `
${imagen.name}
`
}
export default cardImagen;
```