- 
-
-
${author.nome} ${author.cognome}
-📧 ${author.email}
+function creaElementoPost(post, autore) { + results.innerHTML += ` +
+
+ 
+
-
-
- Post trovati (${posts.length})
+
`;
@@ -50,7 +41,7 @@ function createAuthorCard(author, posts) {
* Funzione già fatta - non modificare
*/
function handleError(message) {
- resultsContainer.innerHTML = `
+ results.innerHTML = `
+
${post.titolo}
+ ${post.contenuto}
+
- ${postsHTML}
❌ ${message}
@@ -59,50 +50,27 @@ function handleError(message) {
}
-/**
- * FUNZIONE: Visualizza i risultati della ricerca
- *
- * Raggruppa i post per autore e mostra le card
- * Funzione già fatta - non modificare
- */
-function displayResults(results) {
- if (results.length === 0) {
- resultsContainer.innerHTML = `
-
- Nessun post trovato con la parola chiave
-
- `;
- return;
- }
-
- const cardsHTML = results.map(item =>
- createAuthorCard(item.author, item.posts)
- ).join('');
-
- resultsContainer.innerHTML = cardsHTML;
-}
-
-
/**
* ESERCIZIO 5: Ricerca Post con Autori
*
* Devi completare questa funzione:
- * 1. Leggi la parola chiave dall'input
- * 2. Valida che non sia vuota (usa trim)
- * 3. Mostra lo spinner di caricamento
- * 4. Apri un blocco try/catch
- * 5. Fai una GET a /posts
- * 6. Filtra i post dove titolo O contenuto contiene la keyword (case-insensitive)
- * 7. Se nessun post trovato, usa handleError() e return
- * 8. Estrai gli ID univoci degli utenti che hanno scritto questi post
- * 9. Fai una GET a /users
- * 10. Crea un array di risultati: [{author: userObj, posts: [...]}, ...]
- * dove posts sono solo quelli trovati per quell'autore
- * 11. Chiama displayResults(results)
- * 12. Gestisci gli errori con handleError()
- * 13. Nascondi lo spinner di caricamento
+ * 1. Leggi la parola chiave dall'input
+ * 2. Svuota il contenuto dei risultati (results.innerHTML = '')
+ * 3. Valida che non sia vuota (usa trim)
+ * 4. Mostra lo spinner di caricamento
+ * 5. Apri un blocco try/catch
+ * 6. Fai una GET a /posts
+ * 7. Filtra i post dove titolo O contenuto contiene la keyword
+ * (ricorda minuscole per la ricerca)
+ * 8. Se nessun post trovato, usa handleError() e return
+ * 9. Per ogni post trovato:
+ * - Prendi l'id autore e fai una GET a /users?id=[id]
+ * - Crea un nuovo elemento della lista dei risultati con creaElementoPost(post, autore)
+ * 10. Gestisci gli errori con handleError()
+ * 11. Nascondi lo spinner di caricamento
*/
async function fetchPostsByKeyword() {
+ //TODO
}
diff --git a/javascript/JS_Esercizi 11 - API/04_ricerca_post/style.css b/javascript/JS_Esercizi 11 - API/04_ricerca_post/style.css
index a531a8a..1f78692 100644
--- a/javascript/JS_Esercizi 11 - API/04_ricerca_post/style.css
+++ b/javascript/JS_Esercizi 11 - API/04_ricerca_post/style.css
@@ -100,7 +100,68 @@ h1 {
.results-container {
display: flex;
flex-direction: column;
- gap: 20px;
+ gap: 15px;
+}
+
+.post-row {
+ background: white;
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ display: flex;
+ animation: slideIn 0.3s ease-out;
+ min-height: 100px;
+ border: 1px solid #f0f0f0;
+}
+
+.row-author {
+ background: #f5f5f5;
+ color: #333;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 130px;
+ flex-shrink: 0;
+ gap: 8px;
+ border-right: 1px solid #e0e0e0;
+}
+
+.row-avatar {
+ width: 48px;
+ height: 48px;
+ border-radius: 50%;
+ object-fit: cover;
+ border: 2px solid #ddd;
+}
+
+.row-author-info {
+ text-align: center;
+ width: 100%;
+}
+
+.row-author-info strong {
+ display: block;
+ font-size: 0.85rem;
+ margin-bottom: 3px;
+ word-break: break-word;
+ color: #333;
+ font-weight: 600;
+}
+
+.row-author-info small {
+ font-size: 0.7rem;
+ color: #999;
+ word-break: break-word;
+}
+
+.row-post {
+ flex: 1;
+ padding: 15px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
}
.author-section {
diff --git a/javascript/JS_Esercizi 11 - API/05_todo_app_crud/script.js b/javascript/JS_Esercizi 11 - API/05_todo_app_crud/script.js
index f6e19e2..7eb8a92 100644
--- a/javascript/JS_Esercizi 11 - API/05_todo_app_crud/script.js
+++ b/javascript/JS_Esercizi 11 - API/05_todo_app_crud/script.js
@@ -63,10 +63,10 @@ function handleError(message) {
* ESERCIZIO 4: Todo App CRUD Completa
*
* Devi implementare 4 funzioni:
- * 1. fetchTodosUtente() - GET /todos?userId={id}
- * 2. addTodo() - POST /todos
- * 3. toggleTodo() - PUT /todos/{id}
- * 4. deleteTodo() - DELETE /todos/{id}
+ * 1. fetchTodosUtente() - GET /todos?userId={id} (READ)
+ * 2. addTodo() - POST /todos (CREATE)
+ * 3. toggleTodo() - PUT /todos/{id} (UPDATE)
+ * 4. deleteTodo() - DELETE /todos/{id} (DELETE)
*/
/**
@@ -85,6 +85,8 @@ function handleError(message) {
* 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()');
}