diff --git a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html b/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html deleted file mode 100644 index ec5d1b9..0000000 --- a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - Creazione Utente - - - - ← Dashboard - -
-

Crea un utente

-
- - -
-
- - -
-
- - -
- -
- - - - - - \ No newline at end of file diff --git a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/script.js b/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/script.js deleted file mode 100644 index 8cb1583..0000000 --- a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/script.js +++ /dev/null @@ -1,52 +0,0 @@ -/** - * ESERCIZIO 1: Recupera i valori dagli input - * Selezioniamo i seguenti elementi dal DOM: `nome`, `eta`, `bio`, `cards-container` e `btn-crea-card` - */ -const inputNome = document.querySelector(''); -const inputEta = document.querySelector(''); -const inputBio = document.querySelector(''); -const contenitoreCard = document.querySelector(''); -const btnCreaCard = document.querySelector(''); - - -/** - * FUNZIONE: cancella dati input - * Passi: - * 1. Imposta il valore di ogni input a stringa vuota - */ -function cancellaDatiInput() { -} - - - -/** - * FUNZIONE: crea la card profilo - * Passi: - * 1. Crea un nuovo elemento
  • con document.createElement('li') - * 2. Impostane la classe CSS a 'card' - * 3. Crea un H3 con il valore nome - * 4. Crea un paragrafo con il valore dell'età - * 5. Crea un paragrafo con il valore della biografia - * 6. Aggiungi tutti gli elementi alla card nell'ordine indicato - * 7. Aggiungi la card al cardsContainer - */ -function creaCardProfilo() { -} - - - -/** - * FUNZIONE: Event Listener sul bottone - * Mettiamo tutto quello che abbiamo fatto insieme in un event listener - * Passi: - * 1. Previeni il comportamento di default dell'evento - * 2. Chiama creaCardProfilo() con i dati - * 3. Pulisci gli input con cancellaDatiInput() - */ -btnCreaCard.addEventListener('click', (e) => { - e.preventDefault(); - - creaCardProfilo(); - cancellaDatiInput(); -}); - diff --git a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/style.css b/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/style.css deleted file mode 100644 index e17aecd..0000000 --- a/javascript/JS_Esercizi 08 - DOM+/02_card_profilo/style.css +++ /dev/null @@ -1,94 +0,0 @@ -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; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - color: #2c3e50; -} - -form { - background: #ecf0f1; - padding: 20px; - border-radius: 10px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - width: 400px; -} - -.form-group { - margin-bottom: 15px; - text-align: left; -} - -.form-group label { - display: block; - margin-bottom: 5px; - font-weight: bold; -} - -.form-group input { - width: 90%; - padding: 8px; - border: 1px solid #bdc3c7; - border-radius: 5px; -} - -button { - background: #3498db; - color: white; - border: none; - padding: 10px 20px; - border-radius: 8px; - cursor: pointer; - font-weight: bold; - transition: background 0.2s ease; -} -button:hover { - background: #2980b9; -} - - -ul { - list-style-type: none; - padding: 0; - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 10px; - width: 400px; -} - -.card { - background: white; - border-radius: 10px; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - width: 190px; - text-align: center; - transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; -} - -.card:hover { - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); - transform: scale(1.05); -} - -.card > * { - margin: 10px; - padding: 10px; -} - -.card h3 { - background: linear-gradient(to right, #667eea, #764ba2); - color: white; - padding: 30px 5px; - border-radius: 5px; -} - -.card p { - font-size: 0.9rem; - color: #34495e; -} \ No newline at end of file diff --git a/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/index.html b/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/index.html new file mode 100644 index 0000000..bba5643 --- /dev/null +++ b/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/index.html @@ -0,0 +1,50 @@ + + + + + + Gestione Utenti + + + + ← Dashboard + +
    +
    +

    Aggiungi un Utente

    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + +
    +

    Utenti Registrati

    + + + + + + + + + + + + +
    NomeEtàProfessioneAzioni
    +
    +
    + + + + \ No newline at end of file diff --git a/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/script.js b/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/script.js new file mode 100644 index 0000000..171274f --- /dev/null +++ b/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/script.js @@ -0,0 +1,58 @@ +/** + * ESERCIZIO 2: Tabella Utenti Interattiva + * Selezionare gli elementi principali dal DOM + */ +const inputNome = document.querySelector(''); +const inputEta = document.querySelector(''); +const inputProfessione = document.querySelector(''); +const btnCreaUtente = document.querySelector(''); +const tbodyUtenti = document.querySelector(''); + +/** + * EVENTO: Clic sul pulsante "Aggiungi Utente" + * + * Completa la funzione: Manca qualcosa? + * + * Passi: + * 1. Prevenire il comportamento di default del form + * 2. Leggere i valori dagli input + * 3. Se i dati non sono vuoti: + * - Chiamare creaRigaUtente(nome, eta, professione), passando i dati letti dagli input + * - Chiamare cancellaDatiInput() per pulire i campi + */ + +btnCreaUtente.addEventListener('click', (e) => { + e.preventDefault(); + + const nome = inputNome.value; + const eta = inputEta.value; + const professione = inputProfessione.value; + + creaRigaUtente(nome, eta, professione); + cancellaDatiInput(); +}); + +/** + * FUNZIONE: Crea una riga della tabella con i dati dell'utente + * + * Passi: + * 1. Creare un elemento (classe "user-row") + * 2. Creare tre elementi per nome, età e professione + * 3. Popolare i con i dati passati dai parametri + * 4. Aggiungere tutti i al + * 5. Aggiungere il nel della tabella + */ +function creaRigaUtente(nome, eta, professione) { +} + + +/** + * FUNZIONE: Cancella i dati dagli input e rimette il focus sul primo campo + * + * Passi: + * 1. Impostare il valore di inputNome a stringa vuota + * 2. Impostare il valore di inputEta a stringa vuota + * 3. Impostare il valore di inputProfessione a stringa vuota + */ +function cancellaDatiInput() { +} diff --git a/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/style.css b/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/style.css new file mode 100644 index 0000000..6d56702 --- /dev/null +++ b/javascript/JS_Esercizi 08 - DOM+/02_tabella_utenti/style.css @@ -0,0 +1,223 @@ +* { + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + min-height: 100vh; + margin: 0; + padding: 20px; + color: #2c3e50; +} + +.container { + max-width: 700px; + margin: 0 auto; + background: white; + border-radius: 12px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); + padding: 30px; +} + +/* ═══════════════════════════════════════════════════════════════ */ +/* FORM STYLES */ +/* ═══════════════════════════════════════════════════════════════ */ + +.profile-form { + margin-bottom: 40px; + padding-bottom: 30px; + border-bottom: 2px solid #ecf0f1; +} + +.profile-form h1 { + color: #2c3e50; + margin-top: 0; + margin-bottom: 25px; + font-size: 1.8rem; +} + +.form-group { + margin-bottom: 18px; + display: flex; + flex-direction: column; +} + +.form-group label { + font-weight: 600; + margin-bottom: 8px; + color: #34495e; + font-size: 0.95rem; +} + +.form-group input, +.form-group textarea { + padding: 12px 15px; + border: 2px solid #ecf0f1; + border-radius: 6px; + font-family: inherit; + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-group input:focus, +.form-group textarea:focus { + outline: none; + border-color: #3498db; + box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1); +} + +.form-group textarea { + resize: vertical; + min-height: 80px; +} + +.btn-primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border: none; + padding: 14px 32px; + border-radius: 8px; + cursor: pointer; + font-weight: 600; + font-size: 1rem; + transition: transform 0.2s ease, box-shadow 0.2s ease; + align-self: flex-start; + margin-top: 10px; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4); +} + +.btn-primary:active { + transform: translateY(0); +} + +/* ═══════════════════════════════════════════════════════════════ */ +/* TABLE STYLES */ +/* ═══════════════════════════════════════════════════════════════ */ + +.table-wrapper h2 { + color: #2c3e50; + margin: 0 0 20px 0; + font-size: 1.4rem; +} + +.empty-message { + text-align: center; + color: #7f8c8d; + font-style: italic; + padding: 30px; + background: #f8f9fa; + border-radius: 8px; + border-left: 4px solid #3498db; +} + +.empty-message.hidden { + display: none; +} + +.users-table { + width: 100%; + border-collapse: collapse; + margin: 0; +} + +.users-table thead { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; +} + +.users-table thead th { + padding: 16px; + text-align: left; + font-weight: 600; + letter-spacing: 0.5px; + font-size: 0.95rem; +} + +.users-table tbody tr { + border-bottom: 1px solid #ecf0f1; + transition: background-color 0.2s ease, transform 0.2s ease; + animation: slideIn 0.3s ease-out; +} + +@keyframes slideIn { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.users-table tbody tr:hover { + background-color: #f8f9fa; +} + +.users-table tbody td { + padding: 16px; + color: #34495e; + word-break: break-word; + max-width: 200px; +} + +.users-table tbody td:first-child { + font-weight: 600; + color: #2c3e50; +} + +.users-table tbody td.azioni { + text-align: center; + width: 120px; +} + +/* ═══════════════════════════════════════════════════════════════ */ +/* BUTTON STYLES */ +/* ═══════════════════════════════════════════════════════════════ */ + +.btn-elimina { + background: #e74c3c; + color: white; + border: none; + padding: 8px 14px; + border-radius: 6px; + cursor: pointer; + font-weight: 600; + font-size: 0.85rem; + transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; +} + +.btn-elimina:hover { + background: #c0392b; + transform: scale(1.1); + box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3); +} + +.btn-elimina:active { + transform: scale(0.95); +} + +/* ═══════════════════════════════════════════════════════════════ */ +/* RESPONSIVE */ +/* ═══════════════════════════════════════════════════════════════ */ + +@media (max-width: 768px) { + .container { + padding: 20px; + } + + .users-table tbody th, + .users-table tbody td { + padding: 12px 8px; + font-size: 0.9rem; + } + + .profile-form { + width: 100%; + } +} \ No newline at end of file diff --git a/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js b/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js index 4d78aee..8be5d86 100644 --- a/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js +++ b/javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js @@ -25,10 +25,15 @@ const divTotale = document.querySelector(''); * Questa funzione è il "motore" grafico. Deve: * 1. Pulire la lista attuale nel DOM (per evitare duplicati) * 2. Ciclare l'array 'lista' - * 3. Per ogni elemento, chiamare la funzione 'creaElementoLista' + * 3. Per ogni elemento, chiamare la funzione 'creaRigaElemento' * 4. Chiamare la funzione 'aggiornaTotale' alla fine per calcolare il conto */ function aggiornaLista() { + ulSpesa.innerHTML = ''; + lista.forEach(elemento => { + creaRigaElemento(elemento); + }); + aggiornaTotale(); } @@ -43,9 +48,9 @@ function aggiornaLista() { * - Invertire la proprietà .sbarrato dell'oggetto (true/false) * - Aggiornare la classe CSS 'preso' sull'li (toggle) * - Aggiornare il totale chiamando aggiornaTotale() - * 5. Appendere l'li alla ulSpesa (ul) + * 5. Aggiungere l'li al