Enhanced Book List - Copy this Html, Bootstrap Component to your project
Build an interface starting by this code: <! index.html > <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>App Electron</title> </head> <body> <h1>Lista Libri</h1> <button onclick="fetchBooks()">Carica Libri</button> <ul id="books list"></ul> <h2>Aggiungi un Nuovo Libro</h2> <form id="add book form"> <label for="titolo">Titolo:</label> <input type="text" id="titolo" name="titolo" required><br><br> <label for="autore">Autore:</label> <input type="text" id="autore" name="autore" required><br><br> <label for="pubblicazione">Data di pubblicazione:</label> <input type="date" id="pubblicazione" name="pubblicazione" required><br><br> <button type="submit">Aggiungi Libro</button> </form> <script> async function fetchBooks() { const response = await fetch('http://localhost:8000/api/libri/'); const books = await response.json(); const booksList = document.getElementById('books list'); booksList.innerHTML = ''; // Svuota la lista books.forEach(book => { const li = document.createElement('li'); li.textContent = `${book.titolo} di ${book.autore}, pubblicato il ${book.pubblicazione}`; booksList.appendChild(li); }); } // Funzione per gestire l'invio del form e inviare una richiesta POST document.getElementById('add book form').addEventListener('submit', async function(event) { event.preventDefault(); // Evita il comportamento predefinito del form // Ottieni i valori dal form const titolo = document.getElementById('titolo').value; const autore = document.getElementById('autore').value; const pubblicazione = document.getElementById('pubblicazione').value; // Crea l'oggetto del libro da inviare const newBook = { titolo: titolo, autore: autore, pubblicazione: pubblicazione }; // Invia una richiesta POST al server Django per aggiungere il libro const response = await fetch('http://localhost:8000/api/libri/', { method: 'POST', headers: { 'Content Type': 'application/json' }, body: JSON.stringify(newBook) }); if (response.ok) { alert('Libro aggiunto con successo!'); fetchBooks(); // Aggiorna la lista dei libri } else { alert('Errore durante l\'aggiunta del libro.'); } }); </script> </body> </html> and add a navbar on top and more aestetich with blue color
