Add meme templates

georapbox · Nov 30, 2023 · 03d492a · 03d492a
1 parent 4ae1c66
commit 03d492a
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 8 deletions.
diff --git a/src/assets/meme-templates/group-therapy.jpg b/src/assets/meme-templates/group-therapy.jpg
diff --git a/src/assets/meme-templates/jurassic-park-no-one-cares.jpg b/src/assets/meme-templates/jurassic-park-no-one-cares.jpg
diff --git a/src/assets/meme-templates/obama-medal.jpg b/src/assets/meme-templates/obama-medal.jpg
diff --git a/src/assets/meme-templates/tell-me-the-truth-I-am-ready-to-hear-it.png b/src/assets/meme-templates/tell-me-the-truth-I-am-ready-to-hear-it.png
diff --git a/src/css/main.css b/src/css/main.css
@@ -158,25 +158,25 @@ button[data-button="delete-text-box"] {
 /* Gallery */
 .gallery {
   display: flex;
-  gap: 0.25rem;
+  gap: 0.5rem;
   margin: 0;
   padding: 0.25rem 0;
   overflow-x: auto;
   min-height: 112px;
+  scroll-behavior: smooth;
 }
 
-.gallery button {
-  height: 90px;
+.gallery > button {
   padding: 0;
+  cursor: pointer;
 }
 
-.gallery img {
+.gallery > button > img {
   display: block;
   min-width: 88px;
   height: 88px;
   border-radius: 0.2rem;
-  cursor: pointer;
-  color: var(--light);
+  object-fit: cover;
 }
 
 .gallery__no-results {

diff --git a/src/index.html b/src/index.html
@@ -129,6 +129,10 @@ <h1 class="page-title">Meme Generator</h1>
                 <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/girls-gossiping.jpg" alt="Girls gossiping - I heard he"></button>
                 <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/plague-hackers.jpg" alt="Plague - Hackers"></button>
                 <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/hack-the-planet.jpg" alt="Hack the planet"></button>
+                <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/obama-medal.jpg" alt="Obama medal"></button>
+                <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/jurassic-park-no-one-cares.jpg" alt="Jurassic Park - See? No one cares"></button>
+                <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/tell-me-the-truth-I-am-ready-to-hear-it.png" alt="Tell me the truth. I am ready to hear it"></button>
+                <button type="button" class="btn"><img loading="lazy" src="assets/meme-templates/group-therapy.jpg" alt="Group therapy"></button>
               </div>
             </div>
 

diff --git a/src/js/index.js b/src/js/index.js
@@ -488,11 +488,11 @@ const handleGalleryClick = async evt => {
 };
 
 const handleGallerySearchInput = evt => {
-  const query = evt.target.value.toLowerCase();
+  const query = evt.target.value.toLowerCase().trim();
   const galleryItems = galleryEl.querySelectorAll('button');
 
   galleryItems.forEach(item => {
-    const alt = item.querySelector('img').alt.toLowerCase();
+    const alt = (item.querySelector('img').getAttribute('alt') || '').toLowerCase();
     item.hidden = !alt.includes(query);
   });