Hey guys I have tried to implement this function where the user clicks the heart icon to add to a list like a favourites but this won’t work I have attached the code if you have any ideas, I basically want the images to be added to a list when the user clicks on the heart icon to save for later, so it basically filters out the images, link this link but with images
https://codepen.io/sizhik/pen/YzJpvZa#
const heartBtn = document.querySelector('.heart-btn');
const tableRows = document.querySelectorAll('tbody tr');
const hearts = document.querySelectorAll('.heart');
const table = document.querySelector('table');
let showOnlyFavorites = false;
const saveToLocalStorage = (key, value) => {
const now = new Date();
const expirationDate = now.setMonth(now.getMonth() + 1);
const data = {
value: value,
expiration: expirationDate
};
localStorage.setItem(key, JSON.stringify(data));
}
const getFromLocalStorage = (key) => {
const data = localStorage.getItem(key);
if (!data) return null;
const { value, expiration } = JSON.parse(data);
const now = new Date();
if (now.getTime() > expiration) {
localStorage.removeItem(key);
return null;
}
return value;
}
table.addEventListener('click', (event) => {
const heart = event.target.closest('.heart');
if (heart) {
heart.classList.toggle('active');
const index = Array.from(hearts).indexOf(heart);
const favorites = Array.from(hearts).map(heart => heart.classList.contains('active'));
saveToLocalStorage('favorites', favorites);
}
});
heartBtn.addEventListener('click', () => {
// Check if at least one heart is active
const atLeastOneActive = Array.from(hearts).some(heart => heart.classList.contains('active'));
// Only proceed if at least one heart is active
if (atLeastOneActive) {
showOnlyFavorites = !showOnlyFavorites;
tableRows.forEach(row => {
const heart = row.querySelector('.heart');
if (showOnlyFavorites && !heart.classList.contains('active')) {
row.classList.add('hidden');
} else {
row.classList.remove('hidden');
}
});
const heartButton = heartBtn.querySelector('.heart');
if (heartButton.classList.contains('active')) {
heartButton.classList.remove('active');
} else {
heartButton.classList.add('active');
}
}
});
// Load the favorites from local storage if available
const favorites = getFromLocalStorage('favorites');
if (favorites) {
favorites.forEach((isFavorite, index) => {
if (isFavorite) {
hearts[index].classList.add('active');
}
});
} <li class="scrollbar-item" id = "product0">
<div class="latest-game-card">
<figure style="--width: 400; --height: 500;">
<img class="img-cover" src="covers/image1.png" value="PLAY" onclick="play('sound100')" alt="chuckydoll">
<button class="heart-btn filter-btn"><span class="heart">♥</span></button>
</p>
</div>
</div>
</li>
<li class="scrollbar-item" id = "product0">
<div class="latest-game-card">
<figure style="--width: 400; --height: 500;">
<img class="img-cover" src="covers/image2.png" value="PLAY" onclick="play('sound100')" alt="chuckydoll">
<button class="heart-btn filter-btn"><span class="heart">♥</span></button>
</p>
</div>
</div>
</li>
<table>
<thead>
<tr>
<th>Column 0</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tr>
<td><span class="heart">♥</span></td>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</tbody>
</table>