code: https://github.com/labradorescence/phase-1-practice-friday-the-13th/tree/april18
vid: https://youtu.be/WsicDWRA8kY
## Challenge 1
For each movie returned from http://localhost:3000/movies create an image and add it to the movie-list nav element.
$json-server --watch db.json
-
$open index.html-
//index.js
fetch("http://localhost:3000/movies")
.then(response => response.json()) //1st .then return a promise,
//then with the JSON obj response, we turn it into JS ob.
.then(data => console.log(data)) //2nd .then gets json obj 
//index.js
fetch("http://localhost:3000/movies")
.then(response => response.json()) //1st .then return a promise,
//then with the JSON obj response, we turn it into JS ob.
.then(movieData => { //2nd .then receive js obj
movieData.map(eachMovie => {
createMovieImageInBar(eachMovie)
})
})
function createMovieImageInBar(movie){
const movieList = document.querySelector("#movie-list")
//getElementById(id)
const image = document.createElement("img")
image.src = movie.image
movieList.appendChild(image)
}
## Challenge 2
As soon as the page loads, we should see the details of the **first** movie in the dataset.
//index.js
fetch("http://localhost:3000/movies")
.then(response => response.json())
.then(movieData => {
....
renderMovieDetail(movieData[0])
})
function createMovieImageInBar(movie){
....
}
function renderMovieDetail(movie){
const movieDetailImage = document.querySelector("div#movie-info img#detail-image")
const movieDetailTitle = document.querySelector("div#movie-info h1#title")
const movieDetailYear = document.querySelector("div#movie-info h3#year-released")
const movieDetailDescription = document.querySelector("div#movie-info p#description")
const movieDetailWatched = document.querySelector("div#movie-info button#watched")
const movieDetailBlood = document.querySelector("div#movie-info #amount")
console.log(movie)
movieDetailImage.src = movie.image
movieDetailTitle.innerText = movie.title
movieDetailYear.innerText = movie.release_year
movieDetailDescription.innerText = movie.description
movieDetailWatched.innerText = movie.watched
movieDetailBlood.innerText = movie.blood_amount
}
-
## Challenge 3
When you click on each movie image in the top nav, you should populate the detail area with the `image`, `title`, `release_year`, `description`, `watched`, and `blood_amount` for the movie that was clicked.
If the value of ‘watched’ is false, the button should say ‘Unwatched’. If the value is true, then the button should say ‘Watched’.
//index.js
.
.
function createMovieImageInBar(movie){
.....
image.addEventListener("click", ()=> {
renderMovieDetail(movie)
})
}
function renderMovieDetail(movie){
...
movieDetailWatched.innerText = movie.watched? "Watched":"Unwatched"
}
-
## Challenge 4
When you click on the button in the details it should toggle between `Watched` or `Unwatched` depending on the value of `watched` for the movie currently being displayed.
_The watched value should stay the same when you click between the different movies._
NO NEED PATCH request for this
//index.js
let currentMovie
fetch("http://localhost:3000/movies")
.then(response => response.json()) //1st .then return a promise,
//then with the JSON obj response, we turn it into JS ob.
.then(movieData => { //2nd .then receive js obj
...
toggleWatchedButton()
})
function createMovieImageInBar(movie){
...
}
function renderMovieDetail(movie){
currentMovie = movie //here----
...
}
function toggleWatchedButton(){
const movieDetailWatched = document.querySelector("div#movie-info button#watched")
movieDetailWatched.addEventListener("click", () => {
currentMovie.watched = !currentMovie.watched
movieDetailWatched.textContent = currentMovie.watched? "Watched":"Unwatched"
})
}
## Challenge 5
On the right side there’s a form that allows the user to enter a number of blood drops to add to each movie (don’t ask why). For each movie, I should be able to add more drops.
Example:
- If the value is 0 and I enter 10, then number of drops for the movie should be 10.
- If the value is 20 and I enter 5, then the number of drops for the movie should be 25.
_The blood amount value should stay the same when you click between the different movies._
//index.js
//optimistic rendering
fetch("http://localhost:3000/movies")
.then(response => response.json()) //1st .then return a promise,
//then with the JSON obj response, we turn it into JS ob.
.then(movieData => { //2nd .then receive js obj
....
retrieveBloodAmount()
})
.......
.......
function retrieveBloodAmount(){
const bloodForm = document.querySelector("form#blood-form")
const movieDetailBlood = document.querySelector("div#movie-info #amount")
const bloodInput = document.querySelector("input#blood-amount")
bloodForm.addEventListener("submit", (e) => {
e.preventDefault()
currentMovie.blood_amount += parseInt(e.target["blood-amount"].value)
movieDetailBlood.textContent = currentMovie.blood_amount
e.target["blood-amount"].value = ""
})
}pessimistic rendering
//index.js
function patchBlood(urlId, patchData){
return fetch(`http://localhost:3000/movies/${urlId}`, {
method: "PATCH",
headers: {
"content-type": "application/json"
},
body: JSON.stringify(patchData)
})
.then(response => response.json())
}
function retrieveBloodAmount(){
const bloodForm = document.querySelector("form#blood-form")
const movieDetailBlood = document.querySelector("div#movie-info #amount")
const bloodInput = document.querySelector("input#blood-amount")
bloodForm.addEventListener("submit", (e) => {
e.preventDefault()
currentMovie.blood_amount += parseInt(e.target["blood-amount"].value)
let patchData = { blood_amount:currentMovie.blood_amount}
patchBlood(currentMovie.id, patchData)
.then(patchedMovie => {
movieDetailBlood.textContent = patchedMovie.blood_amount
})
e.target["blood-amount"].value = ""
})
}Cleanup / refactor
//global scope
let currentMovie
//HTML DOM Node elements
const movieList = document.querySelector("#movie-list")
const movieDetailImage = document.querySelector("div#movie-info img#detail-image")
const movieDetailTitle = document.querySelector("div#movie-info h1#title")
const movieDetailYear = document.querySelector("div#movie-info h3#year-released")
const movieDetailDescription = document.querySelector("div#movie-info p#description")
const movieDetailWatched = document.querySelector("div#movie-info button#watched")
const movieDetailBlood = document.querySelector("div#movie-info #amount")
const bloodForm = document.querySelector("form#blood-form")
const bloodInput = document.querySelector("input#blood-amount")
//url
const url = "http://localhost:3000/movies"
//FETCH //GET
function getMovies (){
return fetch(url)
.then(response => response.json()) //1st .then return a promise,
//then with the JSON obj response, we turn it into JS ob.
.then(movieData => { //2nd .then receive js obj
movieData.map(eachMovie => {
createMovieImageInBar(eachMovie)
})
renderMovieDetail(movieData[0])
toggleWatchedButton()
retrieveBloodAmount()
})
}
//RENDER FUNCTIONS
function createMovieImageInBar(movie){
const image = document.createElement("img")
image.src = movie.image
movieList.appendChild(image)
image.addEventListener("click", ()=> {
renderMovieDetail(movie)
})
}
function renderMovieDetail(movie){
currentMovie = movie //later deliverable
movieDetailImage.src = movie.image
movieDetailTitle.textContent = movie.title
movieDetailYear.textContent = movie.release_year
movieDetailDescription.textContent = movie.description
movieDetailWatched.textContent = movie.watched? "Watched":"Unwatched"
movieDetailBlood.textContent = movie.blood_amount
}
function toggleWatchedButton(){
movieDetailWatched.addEventListener("click", () => {
currentMovie.watched = !currentMovie.watched
movieDetailWatched.textContent = currentMovie.watched? "Watched":"Unwatched"
})
}
//FETCH PATCH
function patchBlood(urlId, patchData){
return fetch(`http://localhost:3000/movies/${urlId}`, {
method: "PATCH",
headers: {
"content-type": "application/json"
},
body: JSON.stringify(patchData)
})
.then(response => response.json())
}
//SUBMIT FORM
function retrieveBloodAmount(){
bloodForm.addEventListener("submit", (e) => {
e.preventDefault()
currentMovie.blood_amount += parseInt(e.target["blood-amount"].value)
let patchData = { blood_amount:currentMovie.blood_amount}
patchBlood(currentMovie.id, patchData)
.then(patchedMovie => {
movieDetailBlood.textContent = patchedMovie.blood_amount
})
e.target["blood-amount"].value = ""
})
}
//FUNCTION INVOCATION
getMovies()