Javascript, A Full CRUD

Emmanuel Owusu
Aug 14 · 8 min read
//LOAD ALL BOOKS
document.addEventListener(“DOMContentLoaded”, function() {
fetch(“http://localhost:3000/books")
.then(response => response.json())
.then(books => loadAllBooks(books))
});
.then(response => response.json())
.then(books => loadAllBooks(books))
});
fetch response parsed into JSON
//load/append all booksfunction loadAllBooks(books){
books.forEach(function(book){
addSingleBook(book)
})
}
//Append single bookfunction addSingleBook(book){
const ul = document.getElementById("list");
ul.innerHTML += `<li data-id=${book.id}>${book.title}</li>`
ul.addEventListener("click", getBookDetails);
}
books listed on intial page load
ul.innerHTML += `<li data-id=${book.id}>${book.title}</li>`
ul.addEventListener("click", getBookDetails);
//fetch details about single bookfunction getBookDetails(){
const bookId = event.target.dataset.id;
fetch(`http://localhost:3000/books/${ bookId }`)
.then(response => response.json())
.then(book => bookDetailsToDOM(book))
}
//add book details to DOMfunction bookDetailsToDOM(book){
const div = document.getElementById("show-panel");
div.innerHTML = `
<h3>${book.title}</h3>
<img src="${book.img_url}" />
<p>${book.description}</p>
<p>Likes: <p>
<div id="book-users">${appendUsers(book)}</div>
<button data-id=${book.id} class="like-btn">like book</button>
`
const likeButton = document.getElementById("like-btn");
likeButton.addEventListener("click", likeBook)
}
<form id="new_book">
<label id="book_title">Title</label>
<input id="book_title" type="text" value="" name="title" placeholder="Add Title"/><br />
<label id="book_img">Image</label>
<input id="book_img" type="text" value="" name="img" placeholder="Add Image URL"/><br />
<label id="book_description">Description</label>
<input id="book_description" type="text" value="" name="description" placeholder="Add Description"/><br />
<input type="submit" value="Submit"/>
</form>
const form = document.getElementById("new_book");
form.addEventListener("submit", addBook)
function addBook(event){
event.preventDefault();
bookTitle = event.target.querySelector("#book_title").value;
bookDescription = event.target.querySelector("#book_description").value;
bookImg = event.target.querySelector("#book_img").value;
event.target.reset();fetch("http://localhost:3000/books", {
method: "POST",
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify({
title: bookTitle,
description: bookDescription,
img_url: bookImg,
users: []
})
})
.then(response => response.json())
.then(book => addSingleBook(book))
}
ul.innerHTML += `<li data-id=${book.id}>${book.title}</li>
<button class="danger-btn">X</button>`
function addSingleBook(book){
const ul = document.getElementById("list");
ul.innerHTML += `<li data-id=${book.id}>${book.title}</li>
<button class="danger-btn">X</button>`
ul.addEventListener("click", getBookDetails);
ul.addEventListener("click", likeOrDelete);
}
function likeOrDelete(){
const bookId = event.target.previousElementSibling.dataset.id
if(event.target.classList.contains("danger-btn")){
fetch(`http://localhost:3000/books/${ bookId }`, {
method: "DELETE"
})
}
}

Emmanuel Owusu

Written by

Former Solar Engineer, new-ish Web Developer. I mostly write to myself here.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade