Berack/esercizi-web
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Esercizio 8+ fix

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-06 21:25:37 +01:00
parent b14fc4632a
commit c5feb63be3
6 changed files with 26 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
javascript/JS_Esercizi 08 - DOM+/00_ripasso/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ripasso DOM - Step by Step</title>
<title>Ripasso DOM</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

2
javascript/JS_Esercizi 08 - DOM+/02_card_profilo/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profilo Utente</title>
<title>Creazione Utente</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

2
javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01 - Lista Semplice</title>
<title>Lista Semplice</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

9
javascript/JS_Esercizi 08 - DOM+/03_lista_semplice/script.js
View File

@@ -39,11 +39,14 @@ function popolaLibri() {
* 1. Cicla l'array 'todo'
* 2. Per ogni attività, crea un elemento <li>
* 3. Imposta il textContent dell'li al testo dell'attività
* 4. Aggiungi un evento click che, al click, cambia la classe CSS in 'completato' (toggle)
* 5. Aggiungi l'li alla lista nel DOM
* 4. Se l'attività è completata (completato: true), aggiungi la classe 'completato' all'li
* 5. Aggiungi un evento click che:
* - Modifica la proprietà 'completato' dell'oggetto invertendo il suo valore (true/false)
* - Fai il toggle della classe 'completato' sull'elemento <li> per riflettere lo stato di completamento
* 6. Aggiungi l'li alla lista nel DOM
*/
const todo = [
{ testo: 'Studiare JavaScript', completato: false },
{ testo: 'Studiare JavaScript', completato: true },
{ testo: 'Fare esercizi sul DOM', completato: false },
{ testo: 'Creare un progetto', completato: false },
{ testo: 'Rivedere il codice', completato: false }

44
javascript/JS_Esercizi 08 - DOM+/04_lista_spesa/script.js
View File

@@ -9,25 +9,26 @@ let lista = [
{ prodotto: 'Caffè', prezzo: 3.50, sbarrato: false }
];
// Pre-esercizi: RIFERIMENTI AL DOM
// Seleziona gli elementi necessari che DEVI definire nell'HTML se mancano
// ESERCIZIO: Assicurati di avere questi elementi nel tuo HTML
// poi selezionali qui con querySelector.
// Gli ID potranno essere a tua scelta, ma devono essere univoci e chiari.
// Se l'elemento non esiste nell'HTML, aggiungilo tu. Es. <input id="prodotto" type="text">
const inputProdotto = document.querySelector('');
const inputPrezzo = document.querySelector('');
const btnAggiungi = document.querySelector('');
const listaSpesa = document.querySelector('');
const contenitoreTotale = document.querySelector('');
const ulSpesa = document.querySelector('');
const divTotale = document.querySelector('');
/**
* FUNZIONE 1: Visualizza/Aggiorna Lista
* Questa funzione è il "motore" grafico. Deve:
* 1. Pulire la lista attuale nel DOM
* 1. Pulire la lista attuale nel DOM (per evitare duplicati)
* 2. Ciclare l'array 'lista'
* 3. Per ogni elemento, chiamare la funzione 'creaElementoLista'
* 4. Chiamare la funzione 'aggiornaTotale' alla fine per ricalcolare il conto
* 4. Chiamare la funzione 'aggiornaTotale' alla fine per calcolare il conto
*/
function aggiornaLista() {
}
@@ -38,23 +39,13 @@ function aggiornaLista() {
* 1. Creare un tag <li>
* 2. Impostare il testo (es. "Pane - 1.50 €")
* 3. Se l'elemento ha la proprietà .sbarrato === true, aggiungere la classe CSS 'preso'
* 4. Gestire il click: se clicco sull'li, devo chiamare la funzione toggleSbarrato(elemento)
* 5. Appendere l'li alla listaSpesa (ul)
* 4. Gestire il click se clicco sull'li:
* - 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)
*/
function creaElementoLista(elemento) {
}
/**
* FUNZIONE 3: Gestione Click (Toggle Sbarrato)
* Questa funzione viene chiamata quando clicco su una riga.
* Non modifica il DOM direttamente! Deve:
* 1. Cambiare la proprietà 'sbarrato' dell'oggetto (da true a false o viceversa)
* 2. Richiamare aggiornaLista() per ridisegnare tutto aggiornato
*/
function toggleSbarrato(elemento) {
}
@@ -63,12 +54,10 @@ function toggleSbarrato(elemento) {
* Deve:
* 1. Creare una variabile somma = 0
* 2. Ciclare l'array 'lista'
* 3. Sommare i prezzi
* 4. (Opzionale) Somma solo quelli NON sbarrati
* 5. Scrivere il risultato nel contenitoreTotale
* 3. Sommare i prezzi (Attenzione: farlo solo per quelli che NON sono sbarrati, cioè sbarrato: false)
* 4. Scrivere il risultato nel divTotale
*/
function aggiornaTotale() {
}
@@ -84,10 +73,9 @@ function aggiornaTotale() {
* 6. Svuotare gli input
*/
btnAggiungi.addEventListener('click', function () {
});
// AVVIO
// Chiamata iniziale per mostrare i dati di esempio (Pane e Latte)
aggiornaLista();
aggiornaLista();

2
javascript/JS_Esercizi 08 - DOM+/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hub Esercizi DOM</title>
<title>Esercizi DOM</title>
<style>
/* RESET & BASE */
* {