Styles and slimselect

Working library for select plus additional styles for the page
Perslay · Feb 18, 2024 · 8d3d027 · 8d3d027
1 parent bf4fdd3
commit 8d3d027
Show file tree

Hide file tree

Showing 5 changed files with 617 additions and 32 deletions.
diff --git a/src/cat-api.js b/src/cat-api.js
@@ -1,24 +1,22 @@
 import axios from 'axios';
 import Notiflix from 'notiflix';
-// import SlimSelect from 'slim-select'
 
 export const selectInput = document.querySelector('.breed-select');
+const cats = [];
 
 export const fetchBreeds = () => {
   axios.defaults.headers.common['x-api-key'] =
     'live_E41oW7TQeyZPbpWGQQHegvg3I5o2ZS6Oik46a7C42PktGiUWsKCBBexsIii8F6Xa';
 
-  axios
+  return axios
     .get('https://api.thecatapi.com/v1/breeds')
     .then(response => {
-      response.data.map(cat => {
-        selectInput.insertAdjacentHTML(
-          'beforeend',
-          `<option value="${cat.id}">${cat.name}</option>`
-        );
+      response.data.map(({ id, name }) => {
+        cats.push({ text: name, value: id });
       });
+      return cats;
     })
-    .catch(error => {
+    .catch(() => {
       Notiflix.Notify.failure('Something went wrong. Try reloading the page!');
     });
 };
@@ -29,7 +27,7 @@ export const fetchCatByBreed = breedId => {
     .then(response => {
       return response.data;
     })
-    .catch(error => {
-      console.log(error);
+    .catch(() => {
+      Notiflix.Notify.failure('Something went wrong. Try reloading the page!');
     });
 };
diff --git a/src/index.html b/src/index.html
@@ -3,16 +3,17 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Homework 10</title>
+    <title>Cat Breeds</title>
+    <link rel="stylesheet" href="./slim-select.css" />
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
+    <h1 class="main-heading">Cat breeds</h1>
     <select class="breed-select"></select>
-    <div>
+    <div class="'loader-box'">
       <p class="loader"></p>
     </div>
     <div class="cat-info"></div>
-
     <script src="index.js" type="module"></script>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,35 +1,49 @@
 import Notiflix from 'notiflix';
-// import SlimSelect from 'slim-select'
-import {
-  fetchBreeds,
-  selectInput,
-  fetchCatByBreed,
-  errorParag,
-} from './cat-api.js';
+import SlimSelect from 'slim-select';
+import { fetchBreeds, selectInput, fetchCatByBreed } from './cat-api.js';
 
 const loadingParag = document.querySelector('.loader');
 const catInfo = document.querySelector('.cat-info');
 
 loadingParag.classList.add('hidden');
 
 try {
-  fetchBreeds();
+  fetchBreeds().then(breeds => {
+    new SlimSelect({
+      select: '.breed-select',
+      settings: {
+        placeholderText: 'Cat Breed Name',
+      },
+      data: breeds,
+    });
+  });
 } catch (error) {
   console.log(error);
 }
 
 function onSelect(e) {
+  if (!e.target.value) return;
   loadingParag.classList.remove('hidden');
+
   fetchCatByBreed(e.target.value)
     .then((catInfo.innerHTML = ''))
-    .then(data => showCat(data[0]))
-    .catch(error => {
+    // .then(data => showCat(data[0]))
+    // .catch(() => {
+    //   loadingParag.classList.add('hidden');
+    //   Notiflix.Notify.failure(
+    //     'No cat data found for the selected breed. Try choosing another cat!'
+    //   );
+    // });
+    .then(data => {
+      const catData = data[0];
+      showCat(catData);
+    })
+    .catch(() => {
       loadingParag.classList.add('hidden');
       Notiflix.Notify.failure(
         'Cat information error. Try choosing another breed!'
       );
     });
-  // error rasy
 }
 
 selectInput.addEventListener('change', onSelect);
@@ -38,14 +52,12 @@ function showCat(info) {
   const { name, description, temperament } = info.breeds[0];
   const { url } = info;
   const inserted = `
-  <img src="${url}" alt="${name}}" />
-  <h2>${name}</h2>
-  <p>Temperament: ${temperament}</p>
-  <p>${description}</p>
+  <img class='image' src="${url}" alt="${name}}" />
+  <h2 class='second-heading'>${name}</h2>
+  <p class='paragraph'><strong class='strong'>Temperament: </strong>${temperament}</p>
+  <p class='paragraph'>${description}</p>
   `;
   catInfo.insertAdjacentHTML('beforeend', inserted);
 
   loadingParag.classList.add('hidden');
 }
-
-// slimselect biblioteke zrobic do selecta