Merge branch 'main' into main

lcrojano · Oct 31, 2023 · b318018 · b318018
2 parents bd72bcb + 1e80303
commit b318018
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -17,6 +17,7 @@
         <a href="https://github.com/lcrojano/Giphy_Explorer" target="_blank">
             <img src="assets/images/github-mark-white.png" alt="GitHub">
             <h1>Fork Me</h1>
+
         </a>
     </div>
     <section class="modal" id="modal-overlay">
@@ -26,10 +27,11 @@ <h2>Share GIF</h2>
                 <i class="fa-solid fa-x" id="close"></i>
             </div>
             <ul class="social-links">
-                <li><i class="fa-brands fa-square-facebook"></i></li>
-                <li><i class="fa-brands fa-square-twitter"></i></li>
-                <li><i class="fa-brands fa-square-instagram"></i></li>
-                <li><i class="fa-brands fa-square-pinterest"></i></li>
+                <li><i id="share-fb" class="fa-brands fa-square-facebook"></i></li>
+                <li><i id="share-twitter" class="fa-brands fa-square-twitter"></i></li>
+                <!-- <li><i id="share-insta" class="fa-brands fa-square-instagram"></i></li> -->
+                <!-- not possible due to instagram api restrictions -->
+                <li><i id="share-pinterest" class="fa-brands fa-square-pinterest"></i></li>
             </ul>
             <button id="copy" class="secondary-btn copy-btn">Copy Link</button>
         </div>

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -101,6 +101,22 @@ const setHistory = (q) => {
   menu.prepend(li);
 };
 
+function shareOnFacebook(url) {
+  const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
+  window.open(shareUrl, '_blank');
+}
+
+function shareOnTwitter(url, text) {
+  const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
+  window.open(shareUrl, '_blank');
+}
+
+function shareOnPinterest(url, imageUrl, description) {
+  const shareUrl = `https://www.pinterest.com/pin/create/button/?url=${encodeURIComponent(url)}&media=${encodeURIComponent(imageUrl)}&description=${encodeURIComponent(description)}`;
+  window.open(shareUrl, '_blank');
+}
+
+
 //View updaters
 const updateMainView = (gifs) => {
   gifs.forEach((gif) => {
@@ -109,9 +125,39 @@ const updateMainView = (gifs) => {
     let figure = document.createElement('figure', { class: 'figure' }); //Este no esta en el dom todavia
     let modal = document.querySelector('.modal');
     let url;
-    figure.addEventListener('click', (e) => {
+
+    let text, description;
+    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!";
+
+      modal.addEventListener('click', (e) =>{
+
+        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);
+        }
+        if(e.target.id === 'share-fb'){
+          shareOnFacebook(url);
+        }
+        if(e.target.id === 'share-twitter'){
+          shareOnTwitter(url,text);
+        }
+        if(e.target.id === 'share-pinterest'){
+          shareOnPinterest(url,url,description);
+        }
+        // if(e.target.id === 'share-insta'){
+        //   shareOnInstagram(url,description);
+        // }
+      })
     });
     modal.addEventListener('click', (e) => {
       if (e.target.id === 'close' || e.target.id === 'modal-overlay') {