https://github.com/nagcas/fetchyfilter
Fetch y filter
https://github.com/nagcas/fetchyfilter
html5 javascrip telwind-css
Last synced: about 1 year ago
JSON representation
Fetch y filter
- Host: GitHub
- URL: https://github.com/nagcas/fetchyfilter
- Owner: nagcas
- Created: 2025-04-23T23:10:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-23T23:11:39.000Z (about 1 year ago)
- Last Synced: 2025-04-24T00:22:50.778Z (about 1 year ago)
- Topics: html5, javascrip, telwind-css
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧑💻 Fetch & Filter - User Search App
Una semplice applicazione web realizzata in **JavaScript** che consente di **caricare utenti fake** tramite una chiamata `fetch` alla [Faker API](https://fakerapi.it/), e di **filtrarli in tempo reale** tramite un campo di ricerca.
## 🔍 Funzionalità
- Recupero di 100 utenti fake tramite API
- Rendering dinamico della lista utenti
- Funzionalità di ricerca istantanea per nome e cognome
- Stile moderno e responsive con **TailwindCSS**
## 🚀 Demo
Puoi vedere l'app in azione semplicemente aprendo `index.html` in un browser.
## 📁 Struttura del progetto
```
📦 project-folder/
├── index.html # HTML principale
├── script.js # Script JavaScript per fetch, filter e render
├── style.css # (opzionale) file di stile aggiuntivo
```
## 🔧 Come funziona
1. Quando la pagina viene caricata (`DOMContentLoaded`), l'app esegue una `fetch` alla seguente endpoint:
https://fakerapi.it/api/v2/users?_quantity=100
2. I dati ricevuti (lista di utenti) vengono salvati in un array `users`.
3. Ogni utente viene mostrato in un `
```
Nome Cognome
```
4. Quando digiti nel campo di ricerca, la lista viene filtrata in tempo reale in base al nome o cognome.
## 💡 Tecnologie usate
- HTML5
- JavaScript (Vanilla)
- Fetch API
- Tailwind CSS (via CDN)
- Faker API
## 📚 Risorse utili
- [Faker API Docs](https://fakerapi.it/en)
- [TailwindCSS](https://tailwindcss.com/)
## 🧑🎓 Autore
Gianluca Chiaravalloti
Full Stack Web Developer
[LinkedIn](https://www.linkedin.com/in/gianlucachiaravalloti/) | [GitHub](https://github.com/tuo-username)