I’ve been expanding on the Film finder project, namely by adding the liked and disliked movies in a side bar and in the local storage.
Now I’m facing an issue to delete the movies individually, both from the page and from the local storage.
(I’m trying to make this work for the liked movies only right now to avoid too much code)
This is the flow of the program once the liked button is clicked:
-
likeMovie(movieInfo)→addToLikedMovies(movieInfo) -
addToLikedMovies(movieInfo)→storeLikedMovie(movieInfo) -
addToLikedMovies(movieInfo)→displayLikedMovies() -
displayLikedMovies()→createLikedMovie(movie)—> argument is each movie from the stored array of liked movies -
createLikedMovie(movie)→- creates the delete button for the movie
- On clicking the delete button:
deleteMovieFromPage() - On clicking the delete button:
deleteFromLocalStorage(movie)
Initially, I was looping over the delete buttons outside of the createLikedMovie() function and I had attached an event listener to remove each movie from the page when targeted. But with that method, I was only able to pass the node to the function, while I also want to remove it also from the local storage, and for this I would need to pass the movie object/data. So I thought best to attach the handlers inside the createLikedMovie() within which the delete button is created for each movie, because that function takes the movie object as an argument which I can then use to remove the movie from the LS. However, that’s where I’m getting problems.
With the code below, I get zero error in the console, but only the first movie of the list can be removed from the page, and secondly the movie isn’t found in the stored array of liked movies, so cannot be removed from the local storage.
In my helpers.js:
// After liking a movie, clears the current movie from the screen, gets another random movie and adds to list of liked movies
const likeMovie = (movieInfo) => {
clearCurrentMovie();
showRandomMovie();
addToLikedMovies(movieInfo);
};
// Add movie to list of liked movies
const addToLikedMovies = (movieInfo) => {
storeLikedMovie(movieInfo);
displayLikedMovies();
};
// Add liked movies to local storage
const storeLikedMovie = (movieInfo) => {
let myLikedMovies = localStorage.getItem('likedMovies')
? JSON.parse(localStorage.getItem('likedMovies'))
: [];
myLikedMovies.push(movieInfo);
localStorage.setItem('likedMovies', JSON.stringify(myLikedMovies));
};
// Show liked movies in sideBar
const displayLikedMovies = () => {
const movieList = document.getElementById('likedMoviesList');
if (movieList.hasChildNodes()) {
while (movieList.firstChild) {
movieList.removeChild(movieList.firstChild);
}
}
let likedMovies = JSON.parse(localStorage.getItem('likedMovies'));
likedMovies.forEach((movie) => createLikedMovie(movie));
};
// Create HTML for liked movies
const createLikedMovie = (movie) => {
const movieList = document.getElementById('likedMoviesList');
const title = document.createElement('li');
title.classList.add('likedMovie');
title.setAttribute('id', 'likedMovie');
title.innerHTML = `${movie.title} <i class="fa-solid fa-circle-minus delete-btn"></i>`;
movieList.appendChild(title);
const deleteBtn = movieList.querySelector('.delete-btn');
deleteBtn.addEventListener('click', deleteMovieFromPage); // only works for the first movie of the list
deleteBtn.addEventListener('click', (movie) => deleteFromLocalStorage(movie)); // see comments below
};
const deleteMovieFromPage = (e) => {
const movieEl = e.currentTarget.parentNode;
movieEl.remove();
};
const deleteFromLocalStorage = (movie) => {
const myLikedMovies = JSON.parse(localStorage.getItem('likedMovies'));
const movieIndex = myLikedMovies.indexOf(movie);
console.log(myLikedMovies);
console.log(movie); // The movie does show up in the liked movies array logged above
console.log(movieIndex); // yet this returns -1, so not found in myLikedMovies
myLikedMovies.splice(movieIndex, 1); // so this results in incorrect movie being deleted
localStorage.setItem('likedMovies', JSON.stringify(myLikedMovies));
};
In script.js, I load the movies previously saved to the local storage and create the movies anew from there:
const myLikedMovies = JSON.parse(localStorage.getItem('likedMovies'));
const myDislikedMovies = JSON.parse(localStorage.getItem('dislikedMovies'));
if (myLikedMovies) {
myLikedMovies.forEach((movie) => createLikedMovie(movie));
}
if (myDislikedMovies) {
myDislikedMovies.forEach((movie) => createDislikedMovie(movie));
}
I’ve tried different ways (also modifying deleteMovieFromPage() just a little):
This:
const deleteMovieFromPage = (movieEl) => {
movieEl.remove();
};
// Inside createLikedMovie()
deleteBtn.onclick = (e) => {
deleteMovieFromPage(e.currentTarget.parentNode);
deleteFromLocalStorage(movie);
};
Also this:
const deleteMovieFromPage = (movieEl) => {
movieEl.remove();
};
// Inside createLikedMovie()
deleteBtn.onclick = (e) => deleteMovieFromPage(e.currentTarget.parentNode);
deleteBtn.onclick = (movie) => deleteFromLocalStorage(movie);
And this:
const deleteMovieFromPage = (movieEl) => {
movieEl.remove();
};
// Inside createLikedMovie()
deleteBtn.addEventListener('click', (e) => {
deleteMovieFromPage(e.currentTarget.parentNode);
deleteFromLocalStorage(movie);
});
In the end it seems that it would be preferable to use addEventListener instead of onclick, but I’m getting the same behaviour with both.
The full code can be found here: https://www.codecademy.com/workspaces/626e4eceac46cff76f1a1658
After much console.logging, reading about event handlers and StackOverflow, if someone has time to point me to the right direction, it would be much appreciated 
Really appreciate it. Will reply in more detail as soon as I have some coding time in front of me!
thanks for pointing that one out!
