rinomina esercizi js
This commit is contained in:
43
javascript/08_DOM+/05_gestionale/index.html
Normal file
43
javascript/08_DOM+/05_gestionale/index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Gestionale Dipendenti</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="../index.html" style="position: absolute; top: 20px; left: 20px; text-decoration: none; color: #555; font-weight: bold; font-size: 14px;">← Dashboard</a>
|
||||
<h1>Gestione Dipendenti</h1>
|
||||
|
||||
<div class="controls">
|
||||
<div>
|
||||
<h3>Aggiungi Nuovo</h3>
|
||||
<input type="text" id="input-nome" placeholder="Nome">
|
||||
<input type="text" id="input-ruolo" placeholder="Ruolo">
|
||||
<button id="btn-aggiungi">Aggiungi</button>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Cerca</h3>
|
||||
<input type="text" id="input-ricerca" placeholder="Cerca per nome...">
|
||||
</div>
|
||||
<div>
|
||||
<!-- <h3>Azioni</h3> -->
|
||||
<!-- Zona per extra bottoni futuri -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Ruolo</th>
|
||||
<th>Azioni</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tabella-corpo">
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
137
javascript/08_DOM+/05_gestionale/script.js
Normal file
137
javascript/08_DOM+/05_gestionale/script.js
Normal file
@@ -0,0 +1,137 @@
|
||||
// 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)
|
||||
*/
|
||||
114
javascript/08_DOM+/05_gestionale/style.css
Normal file
114
javascript/08_DOM+/05_gestionale/style.css
Normal file
@@ -0,0 +1,114 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Stesso font dashboard */
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Stesso sfondo dashboard */
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #2c3e50;
|
||||
display: block;
|
||||
padding: 40px;
|
||||
}
|
||||
.controls {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 15px;
|
||||
border: none;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
/* Esempio di combinatore figlio diretto (>) */
|
||||
.controls > div {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.controls > div:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
background-color: #007bff; /* Blu base */
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: separate; /* Necessario per border-radius sulla tabella */
|
||||
border-spacing: 0;
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
overflow: hidden; /* Taglia gli angoli */
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
th {
|
||||
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
|
||||
color: white;
|
||||
padding: 15px;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 1px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
td {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 15px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/************************************************************/
|
||||
/* ESERCIZI CSS: "RECUPERA GLI STILI PERSI" */
|
||||
/* Usa solo selettori di TAG, ID (#), CLASSI (.) */
|
||||
/* e combinatori di SPAZIO (discendente) */
|
||||
/************************************************************/
|
||||
|
||||
/* LIVELLO 1: Il bottone Elimina (Discendenza)
|
||||
Il bottone "Elimina" non ha classi, ma sappiamo che sta DENTRO il tbody.
|
||||
Seleziona tutti i button che sono dentro il #tabella-corpo.
|
||||
|
||||
Obiettivo: Sfondo rosso (#ff4444), testo bianco, nessun bordo.
|
||||
*/
|
||||
|
||||
|
||||
/* LIVELLO 2: Interattività (Hover su discendente)
|
||||
Vogliamo che il bottone elimina diventi più scuro quando ci passi sopra.
|
||||
|
||||
Obiettivo: Cambia il background-color in #cc0000 al passaggio del mouse.
|
||||
Suggerimento: usa lo stesso selettore di prima + :hover
|
||||
*/
|
||||
|
||||
|
||||
/* LIVELLO 3: Leggibilità Riga (Hover su riga)
|
||||
Vogliamo evidenziare tutta la riga (tr) della tabella quando il mouse ci passa sopra.
|
||||
ATTENZIONE: Deve succedere solo nel corpo della tabella, non nell'intestazione!
|
||||
|
||||
Obiettivo: Background-color grigio chiaro (#f1f1f1) al passaggio del mouse sulla riga.
|
||||
*/
|
||||
|
||||
|
||||
/* LIVELLO 4 (Extra): Focus sugli Input
|
||||
Vogliamo evidenziare gli input di testo quando l'utente ci clicca dentro (:focus).
|
||||
Ma solo quelli dentro la zona .controls!
|
||||
|
||||
Obiettivo: Bordo blu (2px solid blue) e sfondo giallo chiaro (#ffffe0).
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user