Render added books

fullstack-javascript/library/index.html

@@ -12,6 +12,12 @@ <h1>Library</h1>
     <form>
         <input id="title" type="text">
         <input id="author" type="text">
+        <select id="status">
+            <option value="none" selected disabled hidden>Status</option>
+            <option value="read">Read</option>
+            <option value="reading">Reading</option>
+            <option value="not-read">Not Read</option>
+        </select>
         <input id="submit" type="button" value="Submit">
     </form>
 </body>

fullstack-javascript/library/library.js

@@ -1,15 +1,32 @@
+const books = document.getElementById('books');
 const title = document.getElementById('title');
 const author = document.getElementById('author');
 const submit = document.getElementById('submit');
+const status = document.getElementById('status');
 
 const bookList = [];
 
-function Book(title, author) {
+function renderBooks() {
+    books.innerHTML = '';
+    bookList.forEach(book => {
+        const newBook = document.createElement('div');
+        const newTitle = document.createTextNode(book.title);
+        const newAuthor = document.createTextNode(book.author);
+        const newStatus = document.createTextNode(book.status);
+        newBook.appendChild(newTitle);
+        newBook.appendChild(newAuthor);
+        newBook.appendChild(newStatus);
+        books.appendChild(newBook);
+    });
+}
+
+function Book(title, author, status) {
         this.title = title;
         this.author = author;
+        this.status = status;
 }
 
 submit.addEventListener('click', () => {
-    bookList.push(new Book(title.value, author.value));
-    console.log(bookList);
+    bookList.push(new Book(title.value, author.value, status.value));
+    renderBooks();
 });