Added iziToast

package.json

@@ -16,6 +16,7 @@
   "license": "ISC",
   "dependencies": {
     "axios": "^1.6.2",
+    "izitoast": "^1.4.0",
     "slim-select": "^2.6.0",
     "vite-plugin-full-reload": "^1.0.5",
     "vite-plugin-html-inject": "^1.0.1"

src/cat-api.js

@@ -20,7 +20,7 @@ export const fetchCatByBreed = async breedId => {
     `${BASE_URL}${IMAGE_END_POINT}?breed_ids=${breedId}`
   );
   if (!responce || responce.status !== 200) {
-    throw new Error('Моя помилка');
+    throw new Error('Error fetching cat by breed');
   }
   return responce.data;
 };

src/css/styles.css

@@ -36,7 +36,7 @@ img {
 }
 
 .error {
-  display: none;
+  font-size: 20px;
 }
 
 .container {
@@ -51,16 +51,6 @@ img {
   justify-content: center;
 }
 
-.cat-info {
-  display: flex;
-  justify-content: center;
-  flex-wrap: nowrap;
-  gap: 60px;
-  margin-top: 50px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .text-wrapper {
   position: absolute;
   top: 50%;
@@ -75,6 +65,17 @@ img {
 .title {
   color: #f0d62e;
 }
+
+.cat-info {
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 60px;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .imgWrapper {
   width: 600px;
 }

src/index.html

@@ -31,7 +31,9 @@ <h1>CatBreedsExplorer</h1>
           autoplay
         ></dotlottie-player>
       </div>
-      <p class="error">Oops! Something went wrong! Try reloading the page!</p>
+      <p class="error visually-hidden">
+        Oops! Something went wrong! Try reloading the page!
+      </p>
       <div class="cat-info hidden"></div>
     </div>
     <script src="index.js" type="module"></script>

src/index.js

@@ -1,10 +1,12 @@
 import SlimSelect from 'slim-select';
+import iziToast from 'izitoast';
+import 'izitoast/dist/css/iziToast.min.css';
 import { fetchBreeds, fetchCatByBreed } from './cat-api';
 
 const catInfoBox = document.querySelector('.cat-info');
 const select = document.querySelector('#selectElement');
 const loader = document.querySelector('.loader');
-
+const error = document.querySelector('.error');
 const breedSelect = new SlimSelect({
   select: '#selectElement',
   settings: {
@@ -34,7 +36,16 @@ fetchBreeds()
   })
   .catch(err => {
     loader.classList.add('visually-hidden');
-    console.log(err);
+    error.classList.remove('visually-hidden');
+    iziToast.show({
+      message: 'Failed to fetch cat breeds',
+      messageColor: 'red',
+      messageSize: '18px',
+      backgroundColor: '#ffffff',
+      position: 'topRight',
+      timeout: 2500,
+    });
+    console.log(err.message);
   });
 
 function onChangeSelect(evt) {
@@ -51,7 +62,16 @@ function onChangeSelect(evt) {
     .catch(err => {
       catInfoBox.innerHTML = '';
       loader.classList.add('visually-hidden');
-      console.error('FetchCatByBreed Error:', err);
+      error.classList.remove('visually-hidden');
+      iziToast.show({
+        message: 'Error fetching cat by breed',
+        messageColor: 'red',
+        messageSize: '18px',
+        backgroundColor: '#ffffff',
+        position: 'topRight',
+        timeout: 2500,
+      });
+      console.log(err.message);
     })
     .finally(() => {
       loader.classList.add('visually-hidden');