94 lines
3.5 KiB
HTML
94 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Esercizio 4 - Todo App CRUD</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;">← Dashboard</a>
|
||
|
||
<div class="app-container">
|
||
<h1>✅ Todo App CRUD</h1>
|
||
<p class="subtitle">GET, POST, PUT, DELETE - App completa</p>
|
||
|
||
<!-- SEZIONE SELEZIONE UTENTE -->
|
||
<div class="config-box">
|
||
<h2>👤 Seleziona Utente</h2>
|
||
<div class="input-group">
|
||
<input type="number" id="userId" min="1" max="40" value="1" placeholder="ID Utente (1-40)">
|
||
<button id="btnLoadTodos">Carica TODO</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SEZIONE AGGIUNTA TODO -->
|
||
<div id="addTodoSection" class="add-todo-box" style="display: none;">
|
||
<h2>➕ Aggiungi Nuovo TODO</h2>
|
||
<div class="input-group">
|
||
<input type="text" id="todoInput" placeholder="Scrivi un nuovo TODO...">
|
||
<button id="btnAddTodo">Aggiungi</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LOADING -->
|
||
<div id="loading" class="loading" style="display: none;">
|
||
⏳ Caricamento...
|
||
</div>
|
||
|
||
<!-- COUNTER -->
|
||
<div id="counter" class="counter" style="display: none;"></div>
|
||
|
||
<!-- LISTA TODO -->
|
||
<div id="todosContainer" class="todos-container"></div>
|
||
|
||
<!-- ISTRUZIONI -->
|
||
<div class="instructions">
|
||
<h2>📝 Cosa Devi Fare</h2>
|
||
<p style="margin-bottom: 15px;"><strong>Questa è l'esercitazione finale!</strong> Devi implementare TUTTE le operazioni CRUD:</p>
|
||
|
||
<h3>1️⃣ Carica TODO (GET)</h3>
|
||
<ul style="margin-left: 20px; margin-bottom: 15px;">
|
||
<li>Fai una GET a <code>/todos?userId={id}</code> per ottenere i TODO dell'utente</li>
|
||
<li>Visualizza la lista</li>
|
||
</ul>
|
||
|
||
<h3>2️⃣ Aggiungi TODO (POST)</h3>
|
||
<ul style="margin-left: 20px; margin-bottom: 15px;">
|
||
<li>Fai una POST a <code>/todos</code> con: <code>{userId, titolo, completato: false}</code></li>
|
||
<li>Ricarica la lista</li>
|
||
</ul>
|
||
|
||
<h3>3️⃣ Modifica TODO (PUT)</h3>
|
||
<ul style="margin-left: 20px; margin-bottom: 15px;">
|
||
<li>Fai una PUT a <code>/todos/{id}</code> con: <code>{completato: !currentValue}</code></li>
|
||
<li>Aggiorna la lista</li>
|
||
</ul>
|
||
|
||
<h3>4️⃣ Elimina TODO (DELETE)</h3>
|
||
<ul style="margin-left: 20px; margin-bottom: 15px;">
|
||
<li>Fai una DELETE a <code>/todos/{id}</code></li>
|
||
<li>Rimuovi dalla lista</li>
|
||
</ul>
|
||
|
||
<div class="hint">
|
||
<strong>💡 Struttura del codice:</strong>
|
||
<pre>// Funzioni che devi implementare:
|
||
loadUserTodos(userId) // GET
|
||
addTodo() // POST
|
||
toggleTodo(id, current) // PUT
|
||
deleteTodo(id) // DELETE
|
||
displayTodos(todos) // Visualizza (già fatto)</pre>
|
||
</div>
|
||
|
||
<div class="challenge">
|
||
<strong>🎯 Bonus Challenge:</strong>
|
||
<p>Aggiungi un riepilogo: quanti TODO sono completati vs quanti rimangono?</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|