add loader

Irina-anat · Jan 13, 2024 · b207937 · b207937
1 parent 1f13b57
commit b207937
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 23 deletions.
diff --git a/src/cat-api.js b/src/cat-api.js
@@ -1,27 +1,22 @@
 const BASE_URL = 'https://api.thecatapi.com/v1';
 const API_KEY = 'live_ZXvXnN3nLIiVAMYsFosudfyRXWXuiSEi6HJhbZIzZhQtawavdsyjEdVTjhSqCXMm';
 
-function fetchBreeds() {
+async function fetchBreeds() {
     const URL = `${BASE_URL}/breeds?api_key=${API_KEY}`
-    return fetch(URL).then(resp => {
-        if (!resp.ok) {
-            throw new Error(resp.statusText)
-        }
-        //console.log(resp)
-        return resp.json();
-    }); 
+    const resp = await fetch(URL);
+    if (!resp.ok) {
+        throw new Error(resp.statusText);
+    }
+    return await resp.json(); 
 };
 
-function fetchCatByBreed(breedId) {
+async function fetchCatByBreed(breedId) {
     const URL = `${BASE_URL}/images/search?api_key=${API_KEY}&breed_ids=${breedId}`
-    return fetch(URL)
-        .then(resp => {
-            if (!resp.ok) {
-                throw new Error(resp.status);
-            }
-            //console.log(resp)
-            return resp.json();
-        });  
+    const resp = await fetch(URL);
+    if (!resp.ok) {
+        throw new Error(resp.status);
+    }
+    return await resp.json();  
 };
 
 

diff --git a/src/createMarkup.js b/src/createMarkup.js
@@ -1,11 +1,11 @@
 function createMarkup(catData) {
     const { url, breeds } = catData;
     return `<div>
-        <img src="${url}" alt="${breeds[0].name}" width="400"/>
+        <img src="${url || 'https://www.reelviews.net/resources/img/default_poster.jpg'}" alt="${breeds[0].name}" width="400"/>
     </div>
     <div>
-        <h1>${breeds[0].name}</h1>
-        <p>${breeds[0].description}</p>
+        <h1>${breeds[0].name || 'No name'}</h1>
+        <p>${breeds[0].description || 'Not found'}</p>
         <p><span>Temperament:</span> ${breeds[0].temperament}</p>
         <a href="${breeds[0].wikipedia_url}" target="_blank">Link to Wikipedia page</a>
     </div>`;

diff --git a/src/index.html b/src/index.html
@@ -7,7 +7,7 @@
   </head>
   <body>
     <select class="breed-select"></select>
-    <p class="loader">Loading data, please wait...</p>
+    <p class="loader"></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>

diff --git a/src/index.js b/src/index.js
@@ -3,13 +3,15 @@ import { createMarkup } from './createMarkup';
 import SlimSelect from 'slim-select'
 import { Notify } from 'notiflix/build/notiflix-notify-aio';
 import 'slim-select/dist/slimselect.css';
-
+import '../src/styles.css'
 
 const breedSelect = document.querySelector('.breed-select');
 const catInfo = document.querySelector('.cat-info');
 const loader = document.querySelector('.loader');
 const error = document.querySelector('.error');
 
+error.classList.add('is-hidden');
+
 let storedBreeds = [];
 
 fetchBreeds()
@@ -30,9 +32,14 @@ breedSelect.addEventListener('change', onSelectBreed);
 
 function onSelectBreed(event) {
     const breedId = event.currentTarget.value;
-    console.log(breedId);
+    catInfo.classList.add('is-hidden');
+    loader.classList.remove('is-hidden');
+
+   // console.log(breedId);
     fetchCatByBreed(breedId)
         .then(data => {
+            loader.classList.add('is-hidden');
+            catInfo.classList.remove('is-hidden');
             catInfo.innerHTML = createMarkup(data[0]);
         })
         .catch(err => console.log(err));

diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,94 @@
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    padding: 20px;
+    margin: 0;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+img {
+    display: block;
+
+}
+
+a {
+    text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+    padding: 0;
+}
+
+.loader {
+    position: relative;
+    width: 80px;
+    height: 80px;
+    border: 2px solid hsl(121, 44%, 53%);
+    border-radius: 50%;
+    display: flex;   
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 150px;
+    animation: rotation 1s linear infinite;
+}
+
+.loader::after,
+.loader::before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    left: 0;
+    top: 0;
+    background: #FF3D00;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+}
+
+.loader::before {
+    left: auto;
+    top: auto;
+    right: 0;
+    bottom: 0;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.is-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    white-space: nowrap;
+    clip: rect(0 0 0 0);
+    clip-path: inset(100%);
+    overflow: hidden;
+}