66 lines
2.3 KiB
HTML
66 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Todo App - CRUD Operations</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>✓ Todo App</h1>
|
|
<p class="subtitle">Operazioni CRUD (Create, Read, Update, Delete)</p>
|
|
|
|
<div class="instructions">
|
|
<h3>📝 Obiettivo dell'Esercizio</h3>
|
|
<p>Dovrai implementare un'app TODO con tutte le operazioni CRUD:</p>
|
|
<ol>
|
|
<li><strong>Ricerca:</strong> Seleziona un utente dalla barra di ricerca</li>
|
|
<li><strong>CREATE:</strong> Aggiungi nuovi todo per l'utente selezionato</li>
|
|
<li><strong>READ:</strong> Visualizza i todo dell'utente</li>
|
|
<li><strong>UPDATE:</strong> Segna come completato</li>
|
|
<li><strong>DELETE:</strong> Elimina todo</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<!-- Barra di ricerca utenti -->
|
|
<div class="search-section">
|
|
<h3>👤 Seleziona Utente</h3>
|
|
<div class="search-container">
|
|
<input
|
|
type="text"
|
|
id="userSearch"
|
|
placeholder="Cerca un utente per nome..."
|
|
autocomplete="off"
|
|
>
|
|
</div>
|
|
<div class="suggestions" id="suggestions"></div>
|
|
<div id="selectedUser" class="selected-user">Nessun utente selezionato</div>
|
|
</div>
|
|
|
|
<!-- Input per aggiungere todo -->
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
id="todoInput"
|
|
placeholder="Aggiungi un nuovo todo..."
|
|
onkeypress="if(event.key === 'Enter') addTodo()"
|
|
>
|
|
<button class="btn" onclick="addTodo()">Aggiungi</button>
|
|
</div>
|
|
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>Caricamento...</p>
|
|
</div>
|
|
|
|
<div class="todos-container" id="todosContainer">
|
|
<!-- I todo verranno inseriti qui -->
|
|
</div>
|
|
|
|
<a href="../index.html" class="back-button">← Torna al Hub</a>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |