Added btn-github

EuJinnLucaShow · Nov 11, 2023 · 0cb2a57 · 0cb2a57
1 parent cbec811
commit 0cb2a57
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 24 deletions.
diff --git a/src/index.html b/src/index.html
@@ -10,20 +10,33 @@
 </head>
 
 <body class="body__home">
-  <h1 class="title__home">Load More, Infinite Scroll, Pagination</h1>
-  <nav>
-    <ul class="navigate">
-      <li><a href="./loadmore.html" class="navigate__link navigate__btn"><span>Click!</span><span>Load More</span></a>
-      </li>
-      <li><a href="./infinitescroll.html" class="navigate__link navigate__btn"><span>Click!</span><span>Infinite
-            Scroll</span></a></li>
-      <li><a href="./pagination.html"
-          class="navigate__link navigate__btn"><span>Click!</span><span>Pagination</span></a></li>
-    </ul>
-  </nav>
-  <div class="image__wrapper">
-    <img src="./images/Vanilla JavaScript.webp" alt="Vanilla JavaScript">
-  </div>
+  <header>
+    <h1 class="title__home">Load More, Infinite Scroll, Pagination</h1>
+    <a class="btn-github" href="https://github.com/EuJinnLucaShow/loadmore-infinitescroll-pagination">
+      <svg width="40" height="40" fill="#0092E4" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"
+        viewBox="0 0 24 24" id="github">
+        <path
+          d="M12,2.2467A10.00042,10.00042,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z">
+        </path>
+      </svg>
+    </a>
+    <nav>
+      <ul class="navigate">
+        <li><a href="./loadmore.html" class="navigate__link navigate__btn"><span>Click!</span><span>Load More</span></a>
+        </li>
+        <li><a href="./infinitescroll.html" class="navigate__link navigate__btn"><span>Click!</span><span>Infinite
+              Scroll</span></a></li>
+        <li><a href="./pagination.html"
+            class="navigate__link navigate__btn"><span>Click!</span><span>Pagination</span></a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <main>
+    <div class="image__wrapper">
+      <img src="./images/Vanilla JavaScript.webp" alt="Vanilla JavaScript">
+    </div>
+  </main>
 
 </body>
 

diff --git a/src/js/infinitescroll.js b/src/js/infinitescroll.js
@@ -8,8 +8,8 @@ const searchButton = document.getElementById("search-button");
 const galleryContainer = document.querySelector('.gallery');
 const searchQueryInput = document.querySelector('#search-bar');
 
-let isShown = 0;
 const api = new ApiService();
+let isShown = 0;
 let isFirstSearch = true;
 
 searchButton.addEventListener("click", onSearch);
@@ -31,9 +31,9 @@ function onSearch() {
   if (searchQuery === '') {
     showWarningToast('Please, fill the main field');
     return;
-  }
+  } 
 
-  searchQueryInput.value = '';
+  // searchQueryInput.value = '';
 
   isShown = 0; 
   fetchGallery();

diff --git a/src/js/loadmore.js b/src/js/loadmore.js
@@ -34,7 +34,7 @@ function onSearch() {
     return;
   }
 
-  searchQueryInput.value = '';
+  // searchQueryInput.value = '';
 
   isShown = 0; 
   fetchGallery();

diff --git a/src/js/pagination.js b/src/js/pagination.js
@@ -7,10 +7,9 @@ import 'izitoast/dist/css/iziToast.min.css';
 const searchButton = document.getElementById("search-button");
 const galleryContainer = document.querySelector('.gallery');
 const searchQueryInput = document.querySelector('#search-bar');
-const loadMoreButton = document.querySelector('.btn__load-more');
 
-let isShown = 0;
 const api = new ApiService();
+let isShown = 0;
 let isFirstSearch = true;
 
 searchButton.addEventListener("click", onSearch);

diff --git a/src/pagination.html b/src/pagination.html
@@ -22,11 +22,20 @@ <h1>Pagination</h1>
     </header>
 
     <main>
-        <div class="gallery"></div>
+        <div class="gallery" id="paginated-list" aria-live="polite"></div>
 
-        <div class="btn__wrapper">
-            <button type="button" class="btn__load-more is-hidden">Load More</button>
-        </div>
+        <nav class="pagination-container">
+            <button class="pagination-button" id="prev-button" title="Previous page" aria-label="Previous page">
+                &lt;
+            </button>
+
+            <div id="pagination-numbers">
+            </div>
+
+            <button class="pagination-button" id="next-button" title="Next page" aria-label="Next page">
+                &gt;
+            </button>
+        </nav>
     </main>
 
     <script type="module" src="./js/pagination.js"></script>

diff --git a/src/sass/_home-pages.scss b/src/sass/_home-pages.scss
@@ -121,4 +121,39 @@ background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
     font-family: 'Neueyokarto';
     font-size: larger; 
     color: rgb(10, 20, 52);      
+}
+
+.btn-github {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  display: grid;
+  place-items: center;
+  background: #e3edf7;
+  padding: 1.4em;
+  border-radius: 10px;
+  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
+	      -6px -6px 10px -1px rgba(255,255,255,0.7);
+  border: 1px solid rgba(0,0,0,0);
+  cursor: pointer;
+  transition: transform 0.5s;
+}
+
+.btn-github:hover {
+  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
+	      inset -4px -4px 6px -1px rgba(255,255,255,0.7),
+	      -0.5px -0.5px 0px rgba(255,255,255,1),
+	      0.5px 0.5px 0px rgba(0,0,0,0.15),
+	      0px 12px 10px -10px rgba(0,0,0,0.05);
+  border: 1px solid rgba(0,0,0,0.1);
+  transform: translateY(0.5em);
+}
+
+.btn-github svg {
+  transition: transform 0.5s;
+}
+
+.btn-github:hover svg {
+  transform: scale(0.9);
+  fill: #333333;
 }
diff --git a/src/sass/_pagination.scss b/src/sass/_pagination.scss