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

fix 11e4

Browse Source
This commit is contained in:
Giacomo Bertolazzi
2026-02-11 23:24:30 +01:00
parent 1e3ff291ce
commit 11e4d607c9
4 changed files with 102 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
javascript/JS_Esercizi 11 - API/04_ricerca_post/index.html
View File

@@ -28,7 +28,7 @@
</div> </div>
<!-- RISULTATI --> <!-- RISULTATI -->
<div id="resultsContainer" class="results-container"></div> <div id="results" class="results-container"></div>
</div> </div>
<script src="script.js"></script> <script src="script.js"></script>

98
javascript/JS_Esercizi 11 - API/04_ricerca_post/script.js
View File

@@ -1,42 +1,33 @@
// ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️ // ⚠️ COMPILARE E CONTROLLARE PRIMA DI INIZIARE ⚠️
const BASE_URL = 'http://localhost:3000/api'; const BASE_URL = 'http://192.168.1.7:3000/api';
const keyword = document.querySelector('#keyword'); const keyword = document.querySelector('#keyword');
const loading = document.querySelector('#loading'); const loading = document.querySelector('#loading');
const resultsContainer = document.querySelector('#resultsContainer'); const results = document.querySelector('#results');
const btnSearch = document.querySelector('#btnSearch'); const btnSearch = document.querySelector('#btnSearch');
/** /**
* FUNZIONE: Crea la card HTML per un autore e i suoi post trovati * FUNZIONE: Crea la card HTML per un singolo post con autore a fianco
* *
* Funzione già fatta - non modificare * Funzione già fatta - non modificare
*/ */
function createAuthorCard(author, posts) { function creaElementoPost(post, autore) {
const postsHTML = posts.map(post => ` results.innerHTML += `
<div class="post-item"> <div class="post-row">
<div class="post-title">${post.titolo}</div> <div class="row-author">
<div class="post-preview">${post.contenuto}</div> <img src="${autore.avatar}" alt="Avatar" class="row-avatar">
<div class="post-meta"> <div class="row-author-info">
<span>📅 ${post.data}</span> <strong>${autore.nome} ${autore.cognome}</strong>
<span>❤️ ${post.likes} likes</span> <small>${autore.email}</small>
</div>
</div>
`).join('');
return `
<div class="author-section">
<div class="author-header">
<img src="${author.avatar}" alt="Avatar" class="author-avatar">
<div class="author-info">
<h3>${author.nome} ${author.cognome}</h3>
<p>📧 ${author.email}</p>
</div> </div>
</div> </div>
<div class="posts-list"> <div class="row-post">
<div style="font-weight: 600; margin-bottom: 10px; color: #333;"> <div class="post-title">${post.titolo}</div>
Post trovati (${posts.length}) <div class="post-preview">${post.contenuto}</div>
<div class="post-meta">
<span>📅 ${post.data}</span>
<span>❤️ ${post.likes} likes</span>
</div> </div>
${postsHTML}
</div> </div>
</div> </div>
`; `;
@@ -50,7 +41,7 @@ function createAuthorCard(author, posts) {
* Funzione già fatta - non modificare * Funzione già fatta - non modificare
*/ */
function handleError(message) { function handleError(message) {
resultsContainer.innerHTML = ` results.innerHTML = `
<div class="error"> <div class="error">
<strong>❌ ${message}</strong> <strong>❌ ${message}</strong>
</div> </div>
@@ -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 = `
<div class="empty">
Nessun post trovato con la parola chiave
</div>
`;
return;
}
const cardsHTML = results.map(item =>
createAuthorCard(item.author, item.posts)
).join('');
resultsContainer.innerHTML = cardsHTML;
}
/** /**
* ESERCIZIO 5: Ricerca Post con Autori * ESERCIZIO 5: Ricerca Post con Autori
* *
* Devi completare questa funzione: * Devi completare questa funzione:
* 1. Leggi la parola chiave dall'input * 1. Leggi la parola chiave dall'input
* 2. Valida che non sia vuota (usa trim) * 2. Svuota il contenuto dei risultati (results.innerHTML = '')
* 3. Mostra lo spinner di caricamento * 3. Valida che non sia vuota (usa trim)
* 4. Apri un blocco try/catch * 4. Mostra lo spinner di caricamento
* 5. Fai una GET a /posts * 5. Apri un blocco try/catch
* 6. Filtra i post dove titolo O contenuto contiene la keyword (case-insensitive) * 6. Fai una GET a /posts
* 7. Se nessun post trovato, usa handleError() e return * 7. Filtra i post dove titolo O contenuto contiene la keyword
* 8. Estrai gli ID univoci degli utenti che hanno scritto questi post * (ricorda minuscole per la ricerca)
* 9. Fai una GET a /users * 8. Se nessun post trovato, usa handleError() e return
* 10. Crea un array di risultati: [{author: userObj, posts: [...]}, ...] * 9. Per ogni post trovato:
* dove posts sono solo quelli trovati per quell'autore * - Prendi l'id autore e fai una GET a /users?id=[id]
* 11. Chiama displayResults(results) * - Crea un nuovo elemento della lista dei risultati con creaElementoPost(post, autore)
* 12. Gestisci gli errori con handleError() * 10. Gestisci gli errori con handleError()
* 13. Nascondi lo spinner di caricamento * 11. Nascondi lo spinner di caricamento
*/ */
async function fetchPostsByKeyword() { async function fetchPostsByKeyword() {
//TODO
} }

63
javascript/JS_Esercizi 11 - API/04_ricerca_post/style.css
View File

@@ -100,7 +100,68 @@ h1 {
.results-container { .results-container {
display: flex; display: flex;
flex-direction: column; 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 { .author-section {

10
javascript/JS_Esercizi 11 - API/05_todo_app_crud/script.js
View File

@@ -63,10 +63,10 @@ function handleError(message) {
* ESERCIZIO 4: Todo App CRUD Completa * ESERCIZIO 4: Todo App CRUD Completa
* *
* Devi implementare 4 funzioni: * Devi implementare 4 funzioni:
* 1. fetchTodosUtente() - GET /todos?userId={id} * 1. fetchTodosUtente() - GET /todos?userId={id} (READ)
* 2. addTodo() - POST /todos * 2. addTodo() - POST /todos (CREATE)
* 3. toggleTodo() - PUT /todos/{id} * 3. toggleTodo() - PUT /todos/{id} (UPDATE)
* 4. deleteTodo() - DELETE /todos/{id} * 4. deleteTodo() - DELETE /todos/{id} (DELETE)
*/ */
/** /**
@@ -85,6 +85,8 @@ function handleError(message) {
* 10. Salva l'ID utente in currentUserId (e localStorage) * 10. Salva l'ID utente in currentUserId (e localStorage)
*/ */
async function fetchTodosUtente() { async function fetchTodosUtente() {
// TODO Rimuovi questa riga e completa la funzione
handleError('Codice non implementato - Completa la funzione fetchTodosUtente()');
} }