add createMarkup.js

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

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/src/createMarkup.js b/src/createMarkup.js
@@ -0,0 +1,14 @@
+function createMarkup(catData) {
+    const { url, breeds } = catData;
+    return `<div>
+        <img src="${url}" alt="${breeds[0].name}" width="400"/>
+    </div>
+    <div>
+        <h1>${breeds[0].name}</h1>
+        <p>${breeds[0].description}</p>
+        <p><span>Temperament:</span> ${breeds[0].temperament}</p>
+        <a href="${breeds[0].wikipedia_url}" target="_blank">Link to Wikipedia page</a>
+    </div>`;
+};
+
+export { createMarkup };
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,10 @@
 import { fetchBreeds, fetchCatByBreed } from './cat-api';
+import { createMarkup } from './createMarkup';
 import SlimSelect from 'slim-select'
 import { Notify } from 'notiflix/build/notiflix-notify-aio';
 import 'slim-select/dist/slimselect.css';
 
+
 const breedSelect = document.querySelector('.breed-select');
 const catInfo = document.querySelector('.cat-info');
 const loader = document.querySelector('.loader');
@@ -20,30 +22,23 @@ fetchBreeds()
             data: storedBreeds
         });
     })
-    .catch(e => console.log(e));
+    .catch(err => console.log(err));
 
 //console.log(storedBreeds)
 
 breedSelect.addEventListener('change', onSelectBreed);
 
 function onSelectBreed(event) {
     const breedId = event.currentTarget.value;
+    console.log(breedId);
     fetchCatByBreed(breedId)
         .then(data => {
-            const { url, breeds, wikipedia_url } = data[0];        
-            catInfo.innerHTML = `<div>
-            <img src="${url}" alt="${breeds[0].name}" width="400"/>
-            </div>
-            <div><h1>${breeds[0].name}</h1>
-            <p>${breeds[0].description}</p>
-            <p><span>Temperament:</span> ${breeds[0].temperament}</p>
-            <a href="${breeds[0].wikipedia_url}" target="_blank">Link to Wikipedia page</a>
-            </div>`
+            catInfo.innerHTML = createMarkup(data[0]);
         })
-    .catch(e=> console.log(e));
+        .catch(err => console.log(err));
 };
 
-    
+