From 1f13b57af1eac7dffcabd74cf18ac7bbebb132b3 Mon Sep 17 00:00:00 2001
From: Iryna Rozmaita <iriszechka@ukr.net>
Date: Sat, 13 Jan 2024 14:47:54 +0200
Subject: [PATCH] add createMarkup.js

---
 src/createMarkup.js | 14 ++++++++++++++
 src/index.js        | 19 +++++++------------
 2 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 src/createMarkup.js

diff --git a/src/createMarkup.js b/src/createMarkup.js
new file mode 100644
index 0000000..481bb8f
--- /dev/null
+++ 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 };
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 67fd0ce..e402489 100644
--- 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,7 +22,7 @@ fetchBreeds()
             data: storedBreeds
         });
     })
-    .catch(e => console.log(e));
+    .catch(err => console.log(err));
 
 //console.log(storedBreeds)
     
@@ -28,22 +30,15 @@ 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));
 };
 
-    
+