https://github.com/jsonfm/fakestore
🚀 A vanilla js products store.
https://github.com/jsonfm/fakestore
js
Last synced: 10 months ago
JSON representation
🚀 A vanilla js products store.
- Host: GitHub
- URL: https://github.com/jsonfm/fakestore
- Owner: jsonfm
- License: mit
- Created: 2022-10-18T14:57:38.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-18T15:29:36.000Z (over 3 years ago)
- Last Synced: 2025-01-30T12:30:45.756Z (over 1 year ago)
- Topics: js
- Language: JavaScript
- Homepage: https://jsonfm.github.io/fakestore/
- Size: 106 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FakeStore.shop
FakeStore somos comercio en línea con una gran cantidad de productos a comercializar.
### Instalación
```
npm install
```
### Desarrollo
```
npm run dev
```
### Deploy
```
npm run deploy
```
### Debug
- http://localhost:5173/fakestore/
### Documentación
- Variable llamada $app donde haremos render de nuestra app.
- Elemento del DOM que será Observado.
- Constante 'API': Utilizamos la FakeAPI de Platzi.
```javascript
const $app = document.getElementById("app");
const $observe = document.getElementById("observe");
const API = "https://api.escuelajs.co/api/v1/products";
```
Función llamada 'getData' que se encarga de hacer Fetch a una API y debe de construir un elemento nuevo en el DOM.
```javascript
const getData = (api) => {
const products = await fetch(api).then(res => res.json());
...
};
```
Función encargada de obtener de los Productos.
```javascript
const loadData = () => {
getData(API);
};
```
Intersection Observer
```javascript
const intersectionObserver = new IntersectionObserver(
(entries) => {
// logic...
},
{
rootMargin: "0px 0px 100% 0px",
}
);
intersectionObserver.observe($observe);
```
## RETO
- [x] API fetch actualizada
- [x] Renderizado de productos
- [] Paginación con LocalStorage
- [x] Configuración IntersectionObserver API
- [x] Empaquetador Vite.js Añadido
- [x] Depliegue en GitHub Pages
### Licencia
js-challenge se lanza bajo la licencia [MIT](https://opensource.org/licenses/MIT).