HTTP requests is ready

KristinaHranovska · Nov 25, 2023 · 3c091f4 · 3c091f4
1 parent 5639eef
commit 3c091f4
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^4.0.5",
-    "glob": "^8.1.0"
+    "glob": "^8.1.0",
+    "vite": "^4.0.5"
   },
   "author": "Alexander Repeta <alexander.repeta@gmail.com>",
   "license": "ISC",
   "dependencies": {
+    "izitoast": "^1.4.0",
     "vite-plugin-full-reload": "^1.0.5",
     "vite-plugin-html-inject": "^1.0.1"
   }

diff --git a/src/index.html b/src/index.html
@@ -8,6 +8,10 @@
     <link rel="stylesheet" href="./css/style.css" />
   </head>
   <body>
+    <form class="js-search">
+      <input name="search" type="text" />
+      <button type="submit">Search</button>
+    </form>
     <script type="module" src="./js/script.js"></script>
   </body>
 </html>
diff --git a/src/js/script.js b/src/js/script.js
@@ -0,0 +1,44 @@
+import iziToast from "izitoast";
+import "izitoast/dist/css/iziToast.min.css";
+
+const formSearch = document.querySelector('.js-search');
+const BASE_URL = 'https://pixabay.com/api/';
+const KEY = '40891115-11d0b88dd3a60afc830d1d27f';
+let picktures;
+
+const searchParams = new URLSearchParams({
+    key: KEY,
+    image_type: 'photo',
+    orientation: 'horizontal',
+    safesearch: true,
+})
+
+formSearch.addEventListener('submit', onSearch);
+
+function onSearch(event) {
+    event.preventDefault();
+    const inputValue = event.target.elements.search.value;
+
+
+    getPictures(inputValue)
+        .then(data => {
+            if (!data.hits.length) {
+                iziToast.error({
+                    title: 'Error',
+                    message: 'Sorry, there are no images matching your search query. Please try again!',
+                });
+            }
+        })
+        .catch((err) => console.log(err));
+}
+
+function getPictures(name) {
+    return fetch(`${BASE_URL}?${searchParams}&q=${name}`)
+        .then(res => {
+            console.log(`${BASE_URL}?${searchParams}&q=${name}`);
+            if (!res.ok) {
+                throw new Error(res.statusText);
+            }
+            return res.json();
+        })
+}