add fetch methods and slimselect

LesiaUKR · Nov 22, 2023 · 0240f2e · 0240f2e
1 parent e2a09fd
commit 0240f2e
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 3 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": {
+    "slim-select": "^2.6.0",
     "vite-plugin-full-reload": "^1.0.5",
     "vite-plugin-html-inject": "^1.0.1"
   }

diff --git a/src/cat-api.js b/src/cat-api.js
@@ -0,0 +1,29 @@
+const BASE_URL = 'https://api.thecatapi.com/v1';
+const BREEDS_END_POINT = '/breeds';
+const IMAGE_END_POINT = '/images/search';
+const API_KEY =
+  'live_0MLgLm3ygusJhuSn6RvDBclcWVtxZS27hFvL1qegdoBmEHHqkWml5GyhzLGFd5H8';
+
+export const fetchBreeds = () => {
+  return fetch(`${BASE_URL}${BREEDS_END_POINT}`).then(resp => {
+    console.log(resp);
+    if (!resp.ok) {
+      console.log(resp);
+      throw new Error('Моя помилка');
+    }
+    return resp.json();
+  });
+};
+
+export const fetchCatByBreed = breedId => {
+  return fetch(
+    `${BASE_URL}${IMAGE_END_POINT}?breeds_ids="${breedId}"&api_key=${API_KEY}`
+  ).then(resp => {
+    console.log(resp);
+    if (!resp.ok) {
+      console.log(resp);
+      throw new Error('Моя помилка');
+    }
+    return resp.json();
+  });
+};
diff --git a/src/index.html b/src/index.html
@@ -4,14 +4,19 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="shortcut icon" href="../assets/javascript.svg" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/slim-select/dist/slimselect.min.css"
+    />
     <title>JS advanced HW 2</title>
   </head>
   <body>
-    <select class="breed-select"></select>
+    <select id="selectElement"></select>
     <p class="loader">Loading data, please wait...</p>
     <p class="error">Oops! Something went wrong! Try reloading the page!</p>
     <div class="cat-info"></div>
 
     <script src="index.js" type="module"></script>
+    <script src="./cat-api.js" type="module"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,39 @@
+import SlimSelect from 'slim-select';
+import { fetchBreeds, fetchCatByBreed } from './cat-api';
+
+console.log(SlimSelect);
+
+const breedSelect = new SlimSelect({
+  select: '#selectElement',
+  settings: {
+    placeholderText: 'Search cats beeds',
+  },
+});
+console.log(breedSelect);
+
+fetchBreeds()
+  .then(data => {
+    console.log(data);
+
+    const options = [
+      {
+        value: '',
+        text: breedSelect.settings.placeholderText,
+        placeholder: true,
+      },
+      ...data.map(({ name, id }) => ({
+        value: `${id}`,
+        text: `${name}`,
+      })),
+    ];
+
+    breedSelect.setData(options);
+  })
+  .catch(err => console.log(err));
+
+const selectedBreedId = e.target.value;
+console.log(selectedBreedId);
+
+// fetchCatByBreed(selectedElement).then(data => {
+//   console.log(data);
+// });