-
-
-
${gif.authorName || 'autor'}
-
-
-
- `;
- let text, description;
+
+
+
+
+
+
+
+
+
+
+
${gif.authorName || 'autor'}
+
+ `;
+
+ // Event listener for removing the favorite (outside modal logic)
+ figure.querySelector('.remove-fav-btn').addEventListener('click', (e) => {
+ e.stopPropagation(); // Prevents the modal from being triggered on remove
+ removeFav(gif.imageUrl); // Remove GIF from localStorage using its imageUrl
+ figure.remove(); // Remove the GIF from the DOM
+ });
+
+ fragment.appendChild(figure);
+
+ // Modal logic
figure.addEventListener('click', (e) => {
modal.classList.add('display-modal');
url = e.target.src;
- text = 'Check out this amazing Gif!';
- description = 'Check out this amazing Gif!';
- figure.querySelector('.remove-fav-btn').addEventListener('click', (e) => {
- removeFav(gif.imageUrl);
- figure.remove(); // Remove the GIF from the DOM
- });
+ // Close button listener
+ modal.querySelector('#close').addEventListener('click', () => {
+ modal.classList.remove('display-modal');
+ });
- fragment.appendChild(figure);
modal.addEventListener('click', (e) => {
if (e.target.id === 'fav') {
removeFav(url);
e.target.textContent = 'Removed';
}
-
if (e.target.id === 'copy') {
navigator.clipboard.writeText(url);
- // Show "Copied" message
e.target.textContent = 'Copied';
-
- // Reset the button text to "Copy" after 2 seconds (2000 milliseconds)
setTimeout(() => {
e.target.textContent = 'Copy';
}, 2000);
@@ -103,37 +106,25 @@ const setFavs = function () {
shareOnFacebook(url);
}
if (e.target.id === 'share-twitter') {
- shareOnTwitter(url, text);
+ shareOnTwitter(url, 'Check out this amazing Gif!');
}
if (e.target.id === 'share-pinterest') {
- shareOnPinterest(url, url, description);
+ shareOnPinterest(url, url, 'Check out this amazing Gif!');
}
- // if(e.target.id === 'share-insta'){
- // shareOnInstagram(url,description);
- // }
});
});
- modal.addEventListener('click', (e) => {
- if (e.target.id === 'close' || e.target.id === 'modal-overlay') {
- modal.classList.remove('display-modal');
- }
- if (e.target.id === 'copy') {
- console.log(url);
- }
- });
-
- fragment.appendChild(figure);
});
+
main.appendChild(fragment);
};
+// Updated removeFav function
const removeFav = function (url) {
- const localStorage = window.localStorage;
- const favsString = localStorage.getItem('gifs');
- const favs = favsString ? JSON.parse(favsString) : {};
- delete favs[url];
- const newFavs = JSON.stringify(favs);
- localStorage.setItem('gifs', newFavs);
+ let favs = getFavs(); // Get current favorites
+ favs.delete(url); // Remove the GIF from the Map using the imageUrl as the key
+ const newFavs = JSON.stringify(Object.fromEntries(favs)); // Convert Map back to an object
+ localStorage.setItem('gifs', newFavs); // Update localStorage with the new state
};
setFavs();
+
diff --git a/styles/styles.css b/styles/styles.css
index 98eda4c..c5e6315 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -295,6 +295,8 @@ figure img {
border-radius: 4px;
height: 50px;
cursor: pointer;
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+ font-weight: bolder;
}
@@ -304,6 +306,10 @@ figure img {
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
+.upload-btn {
+ margin-left: 15px;
+}
+
.tag-btn {
background-color: var(--principal-color-v2);
color: var(--principal-text-color);