features 1

OlenaIa · Jun 18, 2023 · 6f02f76 · 6f02f76
1 parent 5e234af
commit 6f02f76
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
   "dependencies": {
     "axios": "^1.4.0",
     "modern-normalize": "^1.1.0",
-    "notiflix": "^3.2.6"
+    "notiflix": "^3.2.6",
+    "simplelightbox": "^2.14.1"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.6.0",

diff --git a/src/index.js b/src/index.js
@@ -1,5 +1,7 @@
 import { Notify } from 'notiflix/build/notiflix-notify-aio';
 import axios from 'axios';
+import SimpleLightbox from "simplelightbox";
+import "simplelightbox/dist/simple-lightbox.min.css";
 
 const ref = {
     searchForm: document.querySelector('.search-form'),
@@ -8,6 +10,13 @@ const ref = {
 };
 const { searchForm, gallery, btnLoadMore } = ref;
 
+const paramsForNotify = {
+    position: 'center-center',
+    timeout: 4000,
+    width: '400px',
+    fontSize: '24px'
+};
+
 const URL = "https://pixabay.com/api/";
 const KEY = "37440122-e5d5a2493910548fa520b3add";
 const perPage = 40;
@@ -32,17 +41,13 @@ function onSubmitForm(event) {
 
     fetchPhoto(keyOfSearchPhoto, page)
         .then(data => {
+            Notify.info(`Hooray! We found ${data.totalHits} images.`, paramsForNotify);
             const searchResults = data.hits;
             if (searchResults.length === 0) {
-                Notify.failure('Sorry, there are no images matching your search query. Please try again.', {
-                position: 'center-center',
-                timeout: 4000,
-                width: '400px',
-                fontSize: '24px'
-                });
+                Notify.failure('Sorry, there are no images matching your search query. Please try again.', paramsForNotify);
             };
             console.log(searchResults);
-            createMarkup(searchResults);
+            createMarkup(searchResults);    
         })
         .catch(onFetchError);
 
@@ -62,53 +67,54 @@ function onClickLoadMore() {
             createMarkup(searchResults);
             if (page === numberOfPage) {
                 btnLoadMore.classList.add('is-hidden');
-                Notify.failure("We're sorry, but you've reached the end of search results.", {
-                    position: 'center-center',
-                    timeout: 4000,
-                    width: '400px',
-                    fontSize: '24px'
-                });
+                Notify.info("We're sorry, but you've reached the end of search results.", paramsForNotify);
             };
         })
         .catch(onFetchError);
 }
 
 function createMarkup(searchResults) {
-    const arrPhotos = searchResults.map(({ webformatURL, tags, likes, views, comments, downloads }) => {
+    const arrPhotos = searchResults.map(({ webformatURL, largeImageURL, tags, likes, views, comments, downloads }) => {
         return `<div class="photo-card">
-        <img src="${webformatURL}" alt="${tags}" loading="lazy" />
+        <div class="img_wrap">
+            <a class="gallery_link" href="${largeImageURL}">
+                <img src="${webformatURL}" alt="${tags}" width="300" loading="lazy" />
+            </a>
+        </div>
         <div class="info">
             <p class="info-item">
-            <b>Likes ${likes}</b>
+            <b>Likes: ${likes}</b>
             </p>
             <p class="info-item">
-            <b>Views ${views}</b>
+            <b>Views: ${views}</b>
             </p>
             <p class="info-item">
-            <b>Comments ${comments}</b>
+            <b>Comments: ${comments}</b>
             </p>
             <p class="info-item">
-            <b>Downloads ${downloads}</b>
+            <b>Downloads: ${downloads}</b>
             </p>
         </div>
         </div>`
     });
     gallery.insertAdjacentHTML("beforeend", arrPhotos.join(''));
+    new SimpleLightbox('.gallery a', { 
+                captionsData: 'alt',
+                captionDelay: 250,
+    });
 };
 
 async function fetchPhoto(q, page) {
-    const response = await fetch(`${URL}?key=${KEY}&q=${q}&page=${page}&per_page=${perPage}&image_type=photo&orientation=horizontal&safesearch=true`);
-    if (!response.ok) {
-        throw new Error(response.status);
-    }
-    return response.json();             
+    const url = `${URL}?key=${KEY}&q=${q}&page=${page}&per_page=${perPage}&image_type=photo&orientation=horizontal&safesearch=true`;
+    const response = await axios.get(url);
+    return response.data;
+    // const response = await fetch(`${URL}?key=${KEY}&q=${q}&page=${page}&per_page=${perPage}&image_type=photo&orientation=horizontal&safesearch=true`);
+    // if (!response.ok) {
+    //     throw new Error(response.status);
+    // }
+    // return response.json();             
 };
 
 function onFetchError() {
-    Notify.failure('Oops! Something went wrong! Try reloading the page or make another choice!', {
-        position: 'center-center',
-        timeout: 4000,
-        width: '400px',
-        fontSize: '24px'
-    });
+    Notify.failure('Oops! Something went wrong! Try reloading the page or make another choice!', paramsForNotify);
 };
diff --git a/src/styles.css b/src/styles.css
@@ -16,6 +16,7 @@ img {
     display: block;
     max-width: 100%;
     border: 1px solid #0d161b;
+    border-radius: 5px;
 }
 
 .is-hidden {
@@ -29,4 +30,81 @@ img {
     clip-path: inset(100%);
     clip: rect(0 0 0 0);
     overflow: hidden;
+}
+
+.search-form {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    gap: 30px;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 0 20px 0;
+    background: rgba(185, 242, 250, 0.959);
+    box-shadow: 2px 10px 8px 0px rgba(99, 214, 207, 0.68);
+        -webkit-box-shadow: 2px 10px 8px 0px rgba(99, 214, 207, 0.68);
+        -moz-box-shadow: 2px 10px 8px 0px rgba(99, 214, 207, 0.68);
+}
+
+input {
+    width: 300px;
+    height: 40px;
+    padding: 5px 5px 5px 15px;
+    font-size: 16px;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+}
+
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 140px;
+    height: 40px;
+    font-size: 16px;
+    font-weight: 600;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #eff160;
+}
+
+button:hover,
+button:focus {
+    background-color: #7b60f1;
+}
+
+.gallery {
+    margin-top: 90px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 40px
+}
+
+.photo-card {
+    background-color: rgba(185, 242, 250, 0.959);
+    border: 1px solid #0d161b;
+    border-radius: 5px;    
+    padding: 20px;
+}
+
+.img_wrap {
+    height: 280px;
+    display: flex;
+    align-items: center;
+}
+
+.gallery_link {
+    display: block;
+    text-decoration: none;
+}
+
+.load-more {
+    margin: 40px auto;
+    width: 200px;
+    background-color: #eff160;
 }