JS Friday

Greem
5 min readNov 20, 2023

--

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()

--

--