ahemedbullo / site-unit2-project1-music-playlist-explorer-starter

Starter code for the Music Playlist Explorer project
0 stars 0 forks source link

Project Feedback! #1

Open codepathreview opened 1 week ago

codepathreview commented 1 week ago

For Like/Unlike feature: For each playlist, when the 'like' icon of a liked playlist is clicked, it does not indicate that it has been unliked (i.e., the color does not change and the count does not decrease).

hl219 commented 4 days ago

The issue might be related to the fact that you are not removing the 'liked' class when the unlike button is clicked. You may want to decrease the like count when it get unliked:

likeButton.addEventListener('click', (event) => {
    // Prevent the event from propagating to the parent element
    event.stopPropagation();
    // Toggle like class
    likeButton.classList.toggle('liked');
    // Decrement the like count if unliking
    if (!likeButton.classList.contains('liked')) {
        item.likeCount -= 1;
    }
    // Update the like count display
    const likeCountElement = newPlaylistCard.querySelector('.like-count');
    likeCountElement.textContent = item.likeCount;
});

When the user clicks the like button again (i.e., unliking the playlist), the liked class is already present in the likeButton element's class list. After toggling it, the condition likeButton.classList.contains('liked') becomes false. The code executes the block that decrements the likeCount, as it is now an unlike event.