add function onError(err) and some style

Irina-anat · Jan 14, 2024 · 070304a · 070304a
1 parent b207937
commit 070304a
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 11 deletions.
diff --git a/src/createMarkup.js b/src/createMarkup.js
@@ -1,13 +1,13 @@
 function createMarkup(catData) {
     const { url, breeds } = catData;
-    return `<div>
-        <img src="${url || 'https://www.reelviews.net/resources/img/default_poster.jpg'}" alt="${breeds[0].name}" width="400"/>
-    </div>
+    return `<div class="box-description">
+    <div class="img-thumb"><img src="${url || 'https://www.reelviews.net/resources/img/default_poster.jpg'}" alt="${breeds[0].name}" width="500"/></div>
     <div>
-        <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>
+        <h1 class="title">${breeds[0].name || 'No name'}</h1>
+        <p class="description">${breeds[0].description || 'Not found'}</p>
+        <p class="description"><span>Temperament:</span> ${breeds[0].temperament}</p>
+        <a class="wikipedia-link" href="${breeds[0].wikipedia_url}" target="_blank">Link to Wikipedia page</a>
+    </div>
     </div>`;
 };
 

diff --git a/src/index.html b/src/index.html
@@ -6,10 +6,12 @@
     <title>Cat-search</title>
   </head>
   <body>
+    <div class="container"> 
     <select class="breed-select"></select>
     <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>
+  </div>
   </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -10,12 +10,14 @@ const catInfo = document.querySelector('.cat-info');
 const loader = document.querySelector('.loader');
 const error = document.querySelector('.error');
 
+
 error.classList.add('is-hidden');
 
 let storedBreeds = [];
 
 fetchBreeds()
     .then(data => {
+        data = data.filter(img => img.image?.url != null)
         data.forEach(breed => {
             storedBreeds.push({ text: breed.name, value: breed.id });
         });
@@ -24,7 +26,7 @@ fetchBreeds()
             data: storedBreeds
         });
     })
-    .catch(err => console.log(err));
+    .catch(err => onError(err));
 
 //console.log(storedBreeds)
 
@@ -38,14 +40,28 @@ function onSelectBreed(event) {
    // console.log(breedId);
     fetchCatByBreed(breedId)
         .then(data => {
+            //console.log(data)
             loader.classList.add('is-hidden');
             catInfo.classList.remove('is-hidden');
             catInfo.innerHTML = createMarkup(data[0]);
         })
-        .catch(err => console.log(err));
+        .catch(err=>onError(err));
 };
 
 
+function onError(err) {
+    breedSelect.classList.add('is-hidden');
+    loader.classList.add('is-hidden');
+
+    Notify.failure('Oops! Something went wrong! Try reloading the page!',
+        {
+        position: 'center-center',
+        timeout: 3000,
+        width: '300px',
+        fontSize: '22px'
+    });
+};
+
 
 
 
diff --git a/src/styles.css b/src/styles.css
@@ -7,8 +7,8 @@ body {
         Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    padding: 20px;
     margin: 0;
+    height: 100vh;
 }
 
 ul {
@@ -19,7 +19,7 @@ ul {
 
 img {
     display: block;
-
+    height: auto;
 }
 
 a {
@@ -91,4 +91,63 @@ p {
     clip: rect(0 0 0 0);
     clip-path: inset(100%);
     overflow: hidden;
+}
+
+.container{
+    margin: 0 auto;
+    height: 100vh;
+    padding: 20px;
+    max-width: 1200px;
+    background-color: #faebd7;
+}
+
+.box-description{
+    display: flex;
+}
+
+@media (max-width: 600px) {
+    .box-description {
+    flex-wrap: wrap;
+    }
+}
+
+.breed-select{
+    margin-bottom: 20px;
+}
+
+.img-thumb{
+    margin-bottom: 20px;
+    margin-right: 20px; 
+    max-width: 500px;  
+}
+
+
+@media (max-width: 600px) {
+    img {
+    max-width: 100%;
+    }
+}
+
+.title{
+    margin-bottom: 20px;
+    font-size: 26px;
+}
+
+.description{
+    margin-bottom: 20px;
+    font-size: 18px;
+}
+
+.description>span{
+    font-weight: 500;
+    font-size: 20px;
+}
+
+.wikipedia-link{
+    color: #007bff;
+    transition: color 0.3s ease;
+}
+
+.wikipedia-link:hover {
+    color: #0056b3;
 }