From 070304ab029b18c96af5298b33a0f25a8410624b Mon Sep 17 00:00:00 2001 From: Iryna Rozmaita Date: Sun, 14 Jan 2024 18:16:50 +0200 Subject: [PATCH] add function onError(err) and some style --- src/createMarkup.js | 14 +++++----- src/index.html | 2 ++ src/index.js | 20 ++++++++++++-- src/styles.css | 63 +++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 88 insertions(+), 11 deletions(-) diff --git a/src/createMarkup.js b/src/createMarkup.js index fea5cef..0c4cefe 100644 --- a/src/createMarkup.js +++ b/src/createMarkup.js @@ -1,13 +1,13 @@ function createMarkup(catData) { const { url, breeds } = catData; - return `
- ${breeds[0].name} -
+ return `
+
${breeds[0].name}
-

${breeds[0].name || 'No name'}

-

${breeds[0].description || 'Not found'}

-

Temperament: ${breeds[0].temperament}

- Link to Wikipedia page +

${breeds[0].name || 'No name'}

+

${breeds[0].description || 'Not found'}

+

Temperament: ${breeds[0].temperament}

+ Link to Wikipedia page +
`; }; diff --git a/src/index.html b/src/index.html index 6078621..833319c 100644 --- a/src/index.html +++ b/src/index.html @@ -6,10 +6,12 @@ Cat-search +

Oops! Something went wrong! Try reloading the page!

+
diff --git a/src/index.js b/src/index.js index f88c863..8c88214 100644 --- 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 index b4a7333..40e3e68 100644 --- 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; } \ No newline at end of file