end project and fix bugs

parsfront · Feb 4, 2022 · 5d6e968 · 5d6e968
1 parent c367796
commit 5d6e968
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 3 deletions.
diff --git a/app.js b/app.js
@@ -3,15 +3,22 @@ const gallery = document.querySelector(".gallery");
 const searchInput = document.querySelector(".search-input");
 const form = document.querySelector(".search-form");
 let searchValue;
+const more = document.querySelector(".more");
+let page = 1;
+let fetchLink;
+let currentSearch;
 
 //Event Listeners
 searchInput.addEventListener("input", updateInput);
 
 form.addEventListener("submit", (e) => {
-    e.defaultPrevented();
+    e.preventDefault();
+    currentSearch = searchValue;
     searchPhotos(searchValue);
 });
 
+more.addEventListener("click", loadMore);
+
 function updateInput(e) {
     searchValue = e.target.value;
 }
@@ -44,17 +51,31 @@ function generatePictures(data) {
 }
 
 async function curatedPhotos() {
-    const data = await fetchApi(`https://api.pexels.com/v1/curated?per_page=15&page=1`);
+    fetchLink = `https://api.pexels.com/v1/curated?per_page=15&page=1`;
+    const data = await fetchApi(fetchLink);
     generatePictures(data);
 }
 
 async function searchPhotos(query) {
     clear();
-    const data = await fetchApi(`https://api.pexels.com/v1/search?query=${query}&per_page=15&page=1`);
+    fetchLink = `https://api.pexels.com/v1/search?query=${query}+query&per_page=15&page=1`;
+    const data = await fetchApi(fetchLink);
     generatePictures(data);
 }
+
 function clear() {
     gallery.innerHTML = "";
     searchInput.value = "";
 }
+
+async function loadMore() {
+    page++;
+    if (currentSearch) {
+        fetchLink = `https://api.pexels.com/v1/search?query=${currentSearch}+query&per_page=15&page=${page}`;
+    } else {
+        fetchLink = `https://api.pexels.com/v1/curated?per_page=15&page=${page}`;
+    }
+    const data = await fetchApi(fetchLink);
+    generatePictures(data);
+}
 curatedPhotos();
diff --git a/style.css b/style.css
@@ -24,36 +24,100 @@ header h2 {
     text-decoration: none;
     color: black;
 }
+
 .search-form {
     padding: 2rem;
     display: flex;
 }
+
 .search-form input {
+    border-radius: 3px 0px 0px 3px;
     font-size: 2rem;
     padding: 0.5rem;
     width: 100%;
     border: none;
     border: 2px solid rgb(74, 68, 131);
 }
+
 .search-form button {
+    border-radius: 0px 3px 3px 0px;
     border: none;
     padding: 0.5rem;
     font-size: 1rem;
     background: rgb(74, 68, 131);
     color: white;
     cursor: pointer;
 }
+
+.search-form button:hover {
+    color: black;
+    background: none;
+    border: 2px solid rgb(74, 68, 131);
+    transition: all 0.5s ease;
+}
+
 .gallery-info {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: gray;
+    padding: 0.5rem 0rem;
 }
+
 .gallery-info a {
     text-decoration: none;
     color: gray;
 }
+
 .gallery-info a:hover {
     color: rgb(74, 68, 131);
     transition: all 0.5s ease;
 }
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    padding: 2rem 0rem;
+    width: 80%;
+    margin: auto;
+    row-gap: 5rem;
+    column-gap: 3rem;
+}
+
+.gallery-img img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    pointer-events: none;
+    border-radius: 3px;
+}
+
+.gallery-img:hover img {
+    transform: scale(1.03);
+    opacity: 0.8;
+    transition: all 0.4s ease;
+}
+
+.nav-button {
+    min-height: 30vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.more {
+    padding: 1rem 3rem;
+    background: rgb(74, 68, 131);
+    color: white;
+    border: none;
+    font-size: 1.2rem;
+    cursor: pointer;
+    border-radius: 3px;
+}
+
+.more:hover {
+    color: black;
+    background: none;
+    border: 2px solid rgb(74, 68, 131);
+    transition: all 0.5s ease;
+}