Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consolidate Button Styles in index.html and favs.html #87

Merged
merged 2 commits into from
Oct 25, 2024
Merged

Consolidate Button Styles in index.html and favs.html #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
91c2922
Fixed the remove from favourites issue
AdityaGahukar Oct 24, 2024
3ac6c34
Updated CSS for login and upload buttons
AdityaGahukar Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion favs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ <h1 class="grow-2" id="logo">Giphy Search</h1>
<!-- Add this button to trigger the modal for uploading GIFs -->
<button
id="upload-button"
class="secondary-btn"
class="secondary-btn upload-btn"
style="margin-left: 15px"
>
Upload GIF
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,12 @@ <h1 class="grow-2" id="logo">Giphy Search</h1>
</div>
<div style="display: flex">
<button class="secondary-btn">
<a href="login.html" style="text-decoration: none; color: inherit; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;">Log In</a>
<a href="login.html" style="text-decoration: none; color: inherit;">Log In</a>
</button>
<!-- Add this button to trigger the modal for uploading GIFs -->
<button
id="upload-button"
class="secondary-btn"
class="secondary-btn upload-btn"
style="margin-left: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; font-weight: bolder;"
>
Upload GIF
Expand Down
91 changes: 41 additions & 50 deletions scripts/favs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,49 +52,52 @@ const setFavs = function () {
let url;

gifs.forEach((gif) => {
let figure = document.createElement('figure', { class: 'figure' }); //Este no esta en el dom todavia
let figure = document.createElement('figure', { class: 'figure' });
figure.innerHTML = `
<picture class="picture ">
<source srcset="${gif.imageUrl}" type="image/png" media="(min-width:1920px)">
<source srcset="${gif.imageUrl}" type="image/png" media="(min-width:1200px)">
<source srcset="${gif.imageUrl}" type="image/png" media="(min-width:700px)">
<image src="${gif.imageUrl}" alt="test" class="abc">
</picture>
<figcaption>
<div class="autor flex-row aling-items-center">
<img src="${gif.authorImage} "
</div>
<div class="info flex-col " >
<p><strong>${gif.authorName || 'autor'}</strong></p>
</div>
<button class="remove-fav-btn">Remove from Favorites</button>
</figcaption>
`;
let text, description;
<picture class="picture ">
<source srcset="${gif.imageUrl}" type="image/png" media="(min-width:1920px)">
<source srcset="${gif.imageUrl}" type="image/png" media="(min-width:1200px)">
<source srcset="${gif.imageUrl}" type="image/png" media="(min-width:700px)">
<image src="${gif.imageUrl}" alt="test" class="abc">
</picture>
<figcaption>
<div class="autor flex-row aling-items-center">
<img src="${gif.authorImage}" />
</div>
<div class="info flex-col">
<p><strong>${gif.authorName || 'autor'}</strong></p>
</div>
<button class="remove-fav-btn">Remove from Favorites</button>
</figcaption>
`;

// 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);
Expand All @@ -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();

6 changes: 6 additions & 0 deletions styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}


Expand All @@ -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);
Expand Down
Loading