rinomina esercizi js
This commit is contained in:
48
javascript/11_API/05_todo_app_crud/index.html
Normal file
48
javascript/11_API/05_todo_app_crud/index.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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 nascosto">
|
||||
<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 nascosto">
|
||||
⏳ Caricamento...
|
||||
</div>
|
||||
|
||||
<!-- COUNTER -->
|
||||
<div id="counter" class="counter nascosto"></div>
|
||||
|
||||
<!-- LISTA TODO -->
|
||||
<div id="todosContainer" class="todos-container"></div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
176
javascript/11_API/05_todo_app_crud/script.js
Normal file
176
javascript/11_API/05_todo_app_crud/script.js
Normal file
@@ -0,0 +1,176 @@
|
||||
// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
|
||||
const BASE_URL = 'http://localhost:5000/api';
|
||||
|
||||
const userId = document.querySelector('#userId');
|
||||
const todoInput = document.querySelector('#todoInput');
|
||||
const btnAddTodo = document.querySelector('#btnAddTodo');
|
||||
|
||||
const addTodoSection = document.querySelector('#addTodoSection');
|
||||
const btnLoadTodos = document.querySelector('#btnLoadTodos');
|
||||
const todosContainer = document.querySelector('#todosContainer');
|
||||
|
||||
const loading = document.querySelector('#loading');
|
||||
const counter = document.querySelector('#counter');
|
||||
|
||||
|
||||
// ===== VARIABILE DI STATO =====
|
||||
// Tiene traccia dell'ID utente attualmente caricato
|
||||
// Viene usata per sapere a quale utente associare i nuovi TODO
|
||||
// DA COMPLETARE: Carica questa variabile dal localStorage (se presente)
|
||||
let currentUserId = null;
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: Crea la card HTML per tutti i TODO passati come parametro
|
||||
*/
|
||||
function creaCardTodos(todoList) {
|
||||
allTodos = todoList.map((todo) => `
|
||||
<div class="todo-item ${todo.completato ? 'completed' : ''}">
|
||||
<div class="todo-checkbox">
|
||||
<input type="checkbox"
|
||||
${todo.completato ? 'checked' : ''}
|
||||
onchange="toggleTodo(${todo.id}, ${todo.completato})">
|
||||
</div>
|
||||
<div class="todo-content">
|
||||
<div class="todo-title">${todo.titolo}</div>
|
||||
<div class="todo-id">ID: ${todo.id}</div>
|
||||
</div>
|
||||
<button class="btn-delete" onclick="deleteTodo(${todo.id})">🗑️ Elimina</button>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
todosContainer.innerHTML = allTodos;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: Gestione errori
|
||||
*
|
||||
* Mostra un messaggio di errore e logga in console
|
||||
*/
|
||||
function handleError(message) {
|
||||
todosContainer.innerHTML = `
|
||||
<div class="error">
|
||||
<strong>❌ ${message}</strong>
|
||||
</div>
|
||||
`;
|
||||
console.error('Errore:', message);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ESERCIZIO 4: Todo App CRUD Completa
|
||||
*
|
||||
* Devi implementare 4 funzioni:
|
||||
* 1. fetchTodosUtente() - GET /todos?userId={id} (READ)
|
||||
* 2. addTodo() - POST /todos (CREATE)
|
||||
* 3. toggleTodo() - PUT /todos/{id} (UPDATE)
|
||||
* 4. deleteTodo() - DELETE /todos/{id} (DELETE)
|
||||
*/
|
||||
|
||||
/**
|
||||
* FUNZIONE 1️⃣: Carica TODO (GET)
|
||||
*
|
||||
* Passi:
|
||||
* 1. Leggi l'ID utente dall'input
|
||||
* 2. Valida che sia un numero tra 1 e 40
|
||||
* 3. Mostra lo spinner di caricamento
|
||||
* 4. Apri un blocco try/catch
|
||||
* 5. Fai una GET a /todos?userId={id}
|
||||
* 6. Se non OK, mostra errore e return
|
||||
* 7. Converti la risposta in JSON
|
||||
* 8. Chiama displayTodos() per visualizzare
|
||||
* 9. Nascondi lo spinner e mostra addTodoSection
|
||||
* 10. Salva l'ID utente in currentUserId (e localStorage)
|
||||
*/
|
||||
async function fetchTodosUtente() {
|
||||
// TODO Rimuovi questa riga e completa la funzione
|
||||
handleError('Codice non implementato - Completa la funzione fetchTodosUtente()');
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE 2️⃣: Aggiungi TODO (POST)
|
||||
*
|
||||
* Passi:
|
||||
* 1. Verifica che un utente sia stato caricato (currentUserId)
|
||||
* 2. Leggi il testo dal campo di input del nuovo TODO
|
||||
* 3. Valida con trim che non sia vuoto
|
||||
* 4. Mostra lo spinner di caricamento
|
||||
* 5. Apri un blocco try/catch
|
||||
* 6. Fai una POST a /todos con body: {userId, titolo, completato: false}
|
||||
* 7. Se non OK, mostra errore
|
||||
* 8. Se OK, svuota l'input
|
||||
* 9. Ricarica la lista chiamando fetchTodosUtente()
|
||||
*/
|
||||
async function addTodo() {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE 3️⃣: Modifica TODO (PUT)
|
||||
*
|
||||
* Passi:
|
||||
* 1. Ricevi id e currentCompleted come parametri
|
||||
* 2. Fai una PUT a /todos/{id} con body: {completato: !currentCompleted}
|
||||
* 3. Se non OK, mostra errore
|
||||
* 4. Se OK, ricarica la lista chiamando fetchTodosUtente()
|
||||
*/
|
||||
async function toggleTodo(id, currentCompleted) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE 4️⃣: Elimina TODO (DELETE)
|
||||
*
|
||||
* Passi:
|
||||
* 1. Chiedi conferma con confirm("Sicuro?")
|
||||
* 2. Se l'utente cancella, return
|
||||
* 3. Fai una DELETE a /todos/{id}
|
||||
* 4. Se non OK, mostra errore
|
||||
* 5. Se OK, ricarica la lista chiamando fetchTodosUtente()
|
||||
*/
|
||||
async function deleteTodo(id) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FUNZIONE: Visualizza i TODO
|
||||
* Funzione già fatta - non modificare
|
||||
*/
|
||||
function displayTodos(todos) {
|
||||
|
||||
if (!Array.isArray(todos) || todos.length === 0) {
|
||||
todosContainer.innerHTML = '<div class="empty">Nessun TODO. Creane uno!</div>';
|
||||
counter.classList.add('nascosto');
|
||||
return;
|
||||
}
|
||||
|
||||
// CONTA COMPLETATI E NON
|
||||
const completed = todos.filter(t => t.completato).length;
|
||||
const pending = todos.length - completed;
|
||||
|
||||
// MOSTRA COUNTER
|
||||
counter.innerHTML = `
|
||||
📊 Totale: <strong>${todos.length}</strong> |
|
||||
✅ Completati: <strong>${completed}</strong> |
|
||||
⏳ In Sospeso: <strong>${pending}</strong>
|
||||
`;
|
||||
counter.classList.remove('nascosto');
|
||||
|
||||
// CREA CARD TODO
|
||||
const todosHTML = todos.map(todo => creaCardTodos(todo)).join('');
|
||||
todosContainer.innerHTML = todosHTML;
|
||||
}
|
||||
|
||||
// ===== COLLEGA GLI EVENTI =====
|
||||
btnLoadTodos.addEventListener('click', fetchTodosUtente);
|
||||
btnAddTodo.addEventListener('click', addTodo);
|
||||
|
||||
// PERMETTI ENTER per aggiungere TODO
|
||||
todoInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
addTodo();
|
||||
}
|
||||
});
|
||||
264
javascript/11_API/05_todo_app_crud/style.css
Normal file
264
javascript/11_API/05_todo_app_crud/style.css
Normal file
@@ -0,0 +1,264 @@
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
background: white;
|
||||
width: 100%;
|
||||
max-width: 550px;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
text-align: center;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
text-align: center;
|
||||
margin: 0 0 30px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.config-box,
|
||||
.add-todo-box {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.config-box h2,
|
||||
.add-todo-box h2 {
|
||||
color: #333;
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.config-box label,
|
||||
.add-todo-box label {
|
||||
display: block;
|
||||
color: #555;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
|
||||
}
|
||||
|
||||
.input-group button {
|
||||
padding: 10px 20px;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.input-group button:hover {
|
||||
background: #0056b3;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: #666;
|
||||
font-size: 1rem;
|
||||
padding: 30px;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.counter {
|
||||
background: #f0f8ff;
|
||||
color: #333;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
border-left: 4px solid #007bff;
|
||||
}
|
||||
|
||||
.todos-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.todo-item {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
border-left: 4px solid #007bff;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.todo-item.completed {
|
||||
background: #f5f5f5;
|
||||
border-left-color: #28a745;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.todo-item.completed .todo-title {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.todo-checkbox {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.todo-checkbox input {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.todo-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.todo-title {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.todo-id {
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
padding: 6px 12px;
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
border: 1px solid #fcc;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background: #fcc;
|
||||
color: #800;
|
||||
}
|
||||
|
||||
.empty {
|
||||
background: white;
|
||||
color: #999;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
color: #c00;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #c00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid #007bff;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.instructions h2 {
|
||||
color: #333;
|
||||
margin: 0 0 15px 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.instructions h3 {
|
||||
color: #555;
|
||||
margin: 15px 0 10px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.instructions ol,
|
||||
.instructions ul {
|
||||
margin-left: 20px;
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.instructions li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.instructions code {
|
||||
background: white;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', monospace;
|
||||
color: #d63384;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.nascosto {
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user