diff --git a/src/index.js b/src/index.js index 8db63c6..445473e 100755 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,11 @@ -import './css/styles.css'; +import { getImages } from "./js/getImages"; +import { createMarcup } from "./js/createMarcup"; import { Notify } from 'notiflix/build/notiflix-notify-aio'; import SimpleLightbox from "simplelightbox"; import "simplelightbox/dist/simple-lightbox.min.css"; -import { getImages } from "./js/getImages"; -import { createMarcup } from "./js/createMarcup"; +import './css/styles.css'; -const form = document.querySelector('.search-form'); +const form = document.querySelector(`.search-form`); const gallery = document.querySelector(`.gallery`); const guard = document.querySelector(`.js-guard`); @@ -29,36 +29,36 @@ const observer = new IntersectionObserver(onLoadMore, options); form.addEventListener(`submit`, onSearch); async function onSearch(evn) { - evn.preventDefault() + evn.preventDefault(); searchQuery = evn.target.elements.searchQuery.value.trim(); if (!searchQuery) { - clear() - Notify.failure("Please fill in the search field.") - observer.unobserve(guard) - return + clear(); + Notify.failure("Please fill in the search field."); + observer.unobserve(guard); + return; }; try { - resetCurretPage() + resetCurretPage(); const data = await getImages(searchQuery, currentPage); - console.log(data.hits) + // console.log(data.hits) if (!data.hits.length) { - form.reset() - clear() - Notify.failure("Sorry, there are no images matching your search query. Please try again.") + form.reset(); + clear(); + Notify.failure("Sorry, there are no images matching your search query. Please try again."); return; - } - form.reset() - clear() - resetSlider() - gallery.insertAdjacentHTML('beforeend', createMarcup(data.hits)) - observer.observe(guard) - Notify.success(`Hooray! We found ${data.totalHits} images.`) - lightbox.refresh(); + }; + form.reset(); + clear(); + resetSlider(); + gallery.insertAdjacentHTML('beforeend', createMarcup(data.hits)); + observer.observe(guard); + Notify.success(`Hooray! We found ${data.totalHits} images.`); + lightbox.refresh(); } catch (err) { - console.log('ERROR: ' + `error`) - clear() + console.log('ERROR: ' + `error`); + clear(); } }; @@ -79,13 +79,13 @@ async function onSearch(evn) { observer.unobserve(guard); } lightbox.refresh(); - } - }) + }; + }); } catch { - console.log('ERROR: ' + `error`) + console.log('ERROR: ' + `error`); clear(); - } + }; }; function resetCurretPage() { diff --git a/src/js/createMarcup.js b/src/js/createMarcup.js index 9a3d18c..42b1201 100644 --- a/src/js/createMarcup.js +++ b/src/js/createMarcup.js @@ -1,5 +1,5 @@ function createMarcup(arr) { - return arr.map(({ webformatURL, largeImageURL, tags, likes, views, comments, downloads }) => + return arr.map(({ webformatURL, largeImageURL, tags, likes, views, comments, downloads }) => `
${tags} @@ -18,7 +18,7 @@ function createMarcup(arr) {

`) - .join(``) -} + .join(``); +}; -export {createMarcup} \ No newline at end of file +export { createMarcup }; \ No newline at end of file diff --git a/src/js/getImages.js b/src/js/getImages.js index 340eb6f..bc66bd2 100644 --- a/src/js/getImages.js +++ b/src/js/getImages.js @@ -2,7 +2,7 @@ import axios from 'axios'; const BASE_URL = "https://pixabay.com/api/"; const API_KEY = "35791203-a082b793cbab5a6f0440a6e52"; -async function getImages(searchQuery, page = 1) { +async function getImages(searchQuery, page) { const params = new URLSearchParams({ key: API_KEY, q: searchQuery, @@ -10,10 +10,10 @@ async function getImages(searchQuery, page = 1) { orientation: 'horizontal', safesearch: true, per_page: 40, - }) + }); const images = await axios.get(`${BASE_URL}?${params}&page=${page}`); - console.log(images.data) + //console.log(images.data) return images.data; }; -export {getImages} \ No newline at end of file +export { getImages }; \ No newline at end of file