138 lines
4.7 KiB
JavaScript
138 lines
4.7 KiB
JavaScript
// DATI INIZIALI
|
|
const dipendenti = [
|
|
{ nome: "Mario Rossi", ruolo: "Sviluppatore" },
|
|
{ nome: "Luigi Bianchi", ruolo: "Sviluppatore" },
|
|
{ nome: "Paolo Gialli", ruolo: "Sviluppatore" },
|
|
{ nome: "Anna Neri", ruolo: "Sviluppatore" },
|
|
{ nome: "Carlo Verdi", ruolo: "Project Manager" },
|
|
{ nome: "Luca Bianchi", ruolo: "Designer" },
|
|
];
|
|
|
|
// RIFERIMENTI DOM
|
|
const tbody = document.querySelector('#tabella-corpo');
|
|
const btnAggiungi = document.querySelector('#btn-aggiungi');
|
|
const inputNome = document.querySelector('#input-nome');
|
|
const inputRuolo = document.querySelector('#input-ruolo');
|
|
const inputRicerca = document.querySelector('#input-ricerca');
|
|
|
|
|
|
/**
|
|
* FUNZIONE PRINCIPALE: Visualizza Tabella
|
|
* Questa funzione deve:
|
|
* - Pulire il contenuto del tbody
|
|
* - Per ogni dipendente nell'array passato come argomento:
|
|
* - Creare una riga (usando la funzione creaRiga)
|
|
* - Aggiungere la riga al tbody
|
|
*/
|
|
function visualizzaTabella(lista) {
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* FUNZIONE 1: Crea Riga
|
|
* Questa funzione deve:
|
|
* - Creare una riga (tr)
|
|
* - Creare 3 celle (td): Nome, Ruolo, Azioni
|
|
* - Popolare le celle Nome e Ruolo con i dati corretti
|
|
* - Nella cella Azioni, aggiungere un bottone "Elimina"
|
|
* - Aggiungere un event listener al bottone "Elimina" per rimuovere il dipendente dall'array e visualizzare la tabella
|
|
* - Aggiungere le tre celle alla riga
|
|
* - Aggiungere la riga al tbody
|
|
*
|
|
* Nota: Usare il metodo dipendenti.splice(i, 1) per rimuovere l'elemento dall'array
|
|
* e poi richiamare visualizzaTabella(dipendenti) per mostrare la tabella aggiornata.
|
|
*/
|
|
function creaRiga(dipendente, indice) {
|
|
|
|
}
|
|
|
|
|
|
/**
|
|
* FUNZIONE 2: Aggiungi Dipendente
|
|
* 1. Leggere i valori degli input
|
|
* 2. SE non sono vuoti:
|
|
* - Creare un oggetto { nome: ..., ruolo: ... }
|
|
* - Aggiungerlo all'array 'dipendenti'
|
|
* - Richiamare visualizzaTabella() per aggiornare la vista
|
|
* - Pulire gli input (settarli a stringa vuota)
|
|
*/
|
|
btnAggiungi.addEventListener('click', () => {
|
|
|
|
});
|
|
|
|
|
|
/**
|
|
* FUNZIONE 3: Ricerca
|
|
* 1. Leggere il testo nel campo ricerca
|
|
* 2. Filtrare l'array 'dipendenti' usando:
|
|
* - array.filter()
|
|
* - dipendente.nome.includes(testoRicerca)
|
|
* 3. Passare l'array filtrato a visualizzaTabella()
|
|
*/
|
|
inputRicerca.addEventListener('input', () => {
|
|
|
|
});
|
|
|
|
|
|
/**
|
|
* FUNZIONE 4: Emoji per Ruolo
|
|
* Aggiungere automaticamente un'emoji accanto al nome in base al ruolo.
|
|
*
|
|
* Passi:
|
|
* 1. Sviluppa la funzione getEmojiPerRuolo(ruolo) che ritorna:
|
|
* - "💻" per "Sviluppatore"
|
|
* - "🎨" per "Designer"
|
|
* - "👤" per altri ruoli
|
|
* 2. Modifica la funzione creaRiga per usare getEmojiPerRuolo
|
|
* 3. Usare la concatenazione stringhe per la cellaNome.textContent = emoji + " " + dipendente.nome;
|
|
*/
|
|
function getEmojiPerRuolo(ruolo) {
|
|
// Implementa la logica qui
|
|
}
|
|
|
|
|
|
// AVVIO
|
|
// Chiamare visualizzaTabella(dipendenti) all'inizio per mostrare i dati iniziali
|
|
visualizzaTabella(dipendenti);
|
|
|
|
|
|
|
|
/************************************************************************/
|
|
/************************* ESERCIZI EXTRA *******************************/
|
|
/************************************************************************/
|
|
|
|
/** ESERCIZIO EXTRA:
|
|
* Migliorare la funzione creaRiga per aggiungere una classe CSS speciale
|
|
* alle righe dei dipendenti che sono "Project Manager".
|
|
*
|
|
* Passi:
|
|
* 1. Aggiungi una classe .manager (o .evidenziato) che evidenzi la riga (es. background-color: #feffae;)
|
|
* 2. Modificare la funzione creaRiga:
|
|
* - Controllare se dipendente.ruolo === "Project Manager"
|
|
* - Se vero, aggiungere una classe CSS speciale alla riga (es. riga.classList.add('manager'))
|
|
*/
|
|
|
|
/** ESERCIZIO EXTRA 2:
|
|
* Aggiungere nel file index.html un bottone "Elimina Tutti" sopra la tabella.
|
|
*
|
|
* Passi:
|
|
* 1. Aggiungere il bottone con un id specifico (es. id="btn-elimina-tutti")
|
|
* 2. Stilizzare il bottone con CSS se necessario (colore rosso per esempio)
|
|
* 3. Aggiungere un event listener al bottone nel file script.js
|
|
* 4. Nell'event listener, svuotare l'array dipendenti (es. dipendenti.length = 0)
|
|
* 5. Richiamare visualizzaTabella(dipendenti) per aggiornare la vista
|
|
*/
|
|
|
|
/**
|
|
* ESERCIZIO EXTRA 3:
|
|
* Aggiungere un contatore sopra la tabella che mostra il numero totale di dipendenti.
|
|
*
|
|
* Passi:
|
|
* 1. Aggiungere un elemento HTML (es. un div o span) con un id specifico (es. id="contatore-dipendenti")
|
|
* 2. Mettere questo elemento sopra la tabella e stilizzarlo con CSS (metterlo almeno a destra)
|
|
* 3. Creare una funzione aggiornaContatore()
|
|
* - Questa funzione deve aggiornare il contenuto dell'elemento contatore con il numero di dipendenti (es. dipendenti.length)
|
|
* 4. Chiamare aggiornaContatore() ogni volta che la tabella viene aggiornata (dopo aggiungere, eliminare, o filtrare dipendenti)
|
|
*/
|