From 8d3d02768685eada00f930e7042d7aaefdebf500 Mon Sep 17 00:00:00 2001 From: Perslay Date: Mon, 19 Feb 2024 00:23:16 +0100 Subject: [PATCH] Styles and slimselect Working library for select plus additional styles for the page --- src/cat-api.js | 18 +- src/index.html | 7 +- src/index.js | 46 ++-- src/slim-select.css | 502 ++++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 76 ++++++- 5 files changed, 617 insertions(+), 32 deletions(-) create mode 100644 src/slim-select.css diff --git a/src/cat-api.js b/src/cat-api.js index 12ec7f8..cc71dd7 100644 --- a/src/cat-api.js +++ b/src/cat-api.js @@ -1,24 +1,22 @@ import axios from 'axios'; import Notiflix from 'notiflix'; -// import SlimSelect from 'slim-select' export const selectInput = document.querySelector('.breed-select'); +const cats = []; export const fetchBreeds = () => { axios.defaults.headers.common['x-api-key'] = 'live_E41oW7TQeyZPbpWGQQHegvg3I5o2ZS6Oik46a7C42PktGiUWsKCBBexsIii8F6Xa'; - axios + return axios .get('https://api.thecatapi.com/v1/breeds') .then(response => { - response.data.map(cat => { - selectInput.insertAdjacentHTML( - 'beforeend', - `` - ); + response.data.map(({ id, name }) => { + cats.push({ text: name, value: id }); }); + return cats; }) - .catch(error => { + .catch(() => { Notiflix.Notify.failure('Something went wrong. Try reloading the page!'); }); }; @@ -29,7 +27,7 @@ export const fetchCatByBreed = breedId => { .then(response => { return response.data; }) - .catch(error => { - console.log(error); + .catch(() => { + Notiflix.Notify.failure('Something went wrong. Try reloading the page!'); }); }; diff --git a/src/index.html b/src/index.html index 0084509..4ed2def 100755 --- a/src/index.html +++ b/src/index.html @@ -3,16 +3,17 @@ - Homework 10 + Cat Breeds + +

Cat breeds

-
+

- diff --git a/src/index.js b/src/index.js index 8658efe..b0819dd 100755 --- a/src/index.js +++ b/src/index.js @@ -1,11 +1,6 @@ import Notiflix from 'notiflix'; -// import SlimSelect from 'slim-select' -import { - fetchBreeds, - selectInput, - fetchCatByBreed, - errorParag, -} from './cat-api.js'; +import SlimSelect from 'slim-select'; +import { fetchBreeds, selectInput, fetchCatByBreed } from './cat-api.js'; const loadingParag = document.querySelector('.loader'); const catInfo = document.querySelector('.cat-info'); @@ -13,23 +8,42 @@ const catInfo = document.querySelector('.cat-info'); loadingParag.classList.add('hidden'); try { - fetchBreeds(); + fetchBreeds().then(breeds => { + new SlimSelect({ + select: '.breed-select', + settings: { + placeholderText: 'Cat Breed Name', + }, + data: breeds, + }); + }); } catch (error) { console.log(error); } function onSelect(e) { + if (!e.target.value) return; loadingParag.classList.remove('hidden'); + fetchCatByBreed(e.target.value) .then((catInfo.innerHTML = '')) - .then(data => showCat(data[0])) - .catch(error => { + // .then(data => showCat(data[0])) + // .catch(() => { + // loadingParag.classList.add('hidden'); + // Notiflix.Notify.failure( + // 'No cat data found for the selected breed. Try choosing another cat!' + // ); + // }); + .then(data => { + const catData = data[0]; + showCat(catData); + }) + .catch(() => { loadingParag.classList.add('hidden'); Notiflix.Notify.failure( 'Cat information error. Try choosing another breed!' ); }); - // error rasy } selectInput.addEventListener('change', onSelect); @@ -38,14 +52,12 @@ function showCat(info) { const { name, description, temperament } = info.breeds[0]; const { url } = info; const inserted = ` - ${name}} -

${name}

-

Temperament: ${temperament}

-

${description}

+ ${name}} +

${name}

+

Temperament: ${temperament}

+

${description}

`; catInfo.insertAdjacentHTML('beforeend', inserted); loadingParag.classList.add('hidden'); } - -// slimselect biblioteke zrobic do selecta diff --git a/src/slim-select.css b/src/slim-select.css new file mode 100644 index 0000000..b7a527f --- /dev/null +++ b/src/slim-select.css @@ -0,0 +1,502 @@ +:root { + --ss-primary-color: #68d684; + --ss-bg-color: #1a1a1a; + --ss-font-color: #e2e2e2; + --ss-font-placeholder-color: #9c9c9c; + --ss-disabled-color: #7c7c7c; + --ss-border-color: #68d684; + --ss-highlight-color: #fffb8c; + --ss-success-color: #00b755; + --ss-error-color: #dc3545; + --ss-focus-color: #68d684; + --ss-main-height: 30px; + --ss-content-height: 300px; + --ss-spacing-l: 10px; + --ss-spacing-m: 10px; + --ss-spacing-s: 8px; + --ss-animation-timing: 0.2s; + --ss-border-radius: 4px; +} +@keyframes ss-valueIn { + 0% { + transform: scale(0); + opacity: 0; + } + 100% { + transform: scale(1); + opacity: 1; + } +} +@keyframes ss-valueOut { + 0% { + transform: scale(1); + opacity: 1; + } + 100% { + transform: scale(0); + opacity: 0; + } +} +.ss-hide { + display: none !important; +} +.ss-main { + display: flex; + flex-direction: row; + font-size: 1.4em; + position: relative; + user-select: none; + color: var(--ss-font-color); + margin: 2rem auto; + min-height: var(--ss-main-height); + max-width: 300px; + padding: var(--ss-spacing-s); + cursor: pointer; + border: 1px solid var(--ss-border-color); + border-radius: var(--ss-border-radius); + background-color: var(--ss-bg-color); + outline: 0; + box-sizing: border-box; + transition: background-color var(--ss-animation-timing); + overflow: hidden; +} +.ss-main:focus { + box-shadow: 0 0 5px var(--ss-focus-color); +} +.ss-main.ss-disabled { + background-color: var(--ss-disabled-color); + cursor: not-allowed; +} +.ss-main.ss-disabled .ss-values .ss-disabled { + color: var(--ss-font-color); +} +.ss-main.ss-disabled .ss-values .ss-value .ss-value-delete { + cursor: not-allowed; +} +.ss-main.ss-open-above { + border-top-left-radius: 0px; + border-top-right-radius: 0px; +} +.ss-main.ss-open-below { + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; +} +.ss-main .ss-values { + display: inline-flex; + flex-wrap: wrap; + gap: var(--ss-spacing-m); + flex: 1 1 100%; +} +.ss-main .ss-values .ss-placeholder { + display: flex; + padding: var(--ss-spacing-s) var(--ss-spacing-m) var(--ss-spacing-s) + var(--ss-spacing-m); + margin: auto 0px auto 0px; + line-height: 1em; + align-items: center; + width: 100%; + color: var(--ss-font-placeholder-color); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.ss-main .ss-values .ss-max { + display: flex; + user-select: none; + align-items: center; + width: fit-content; + font-size: 12px; + color: var(--ss-bg-color); + line-height: 1; + padding: var(--ss-spacing-s) var(--ss-spacing-m); + background-color: var(--ss-primary-color); + border-radius: var(--ss-border-radius); +} +.ss-main .ss-values .ss-single { + display: flex; + margin: auto 0px auto var(--ss-spacing-s); +} +.ss-main .ss-values .ss-value { + display: flex; + user-select: none; + align-items: center; + width: fit-content; + background-color: var(--ss-primary-color); + border-radius: var(--ss-border-radius); + animation-name: ss-valueIn; + animation-duration: var(--ss-animation-timing); + animation-timing-function: ease-out; + animation-fill-mode: both; +} +.ss-main .ss-values .ss-value.ss-value-out { + animation-name: ss-valueOut; + animation-duration: var(--ss-animation-timing); + animation-timing-function: ease-out; +} +.ss-main .ss-values .ss-value .ss-value-text { + font-size: 12px; + color: var(--ss-bg-color); + line-height: 1; + padding: var(--ss-spacing-s) var(--ss-spacing-m); +} +.ss-main .ss-values .ss-value .ss-value-delete { + display: flex; + align-items: center; + height: var(--ss-spacing-l); + width: var(--ss-spacing-l); + padding: var(--ss-spacing-s) var(--ss-spacing-m); + cursor: pointer; + border-left: solid 1px var(--ss-bg-color); + box-sizing: content-box; +} +.ss-main .ss-values .ss-value .ss-value-delete svg { + height: var(--ss-spacing-l); + width: var(--ss-spacing-l); +} +.ss-main .ss-values .ss-value .ss-value-delete svg path { + fill: none; + stroke: var(--ss-bg-color); + stroke-width: 18; + stroke-linecap: round; + stroke-linejoin: round; +} +.ss-main .ss-deselect { + flex: 0 1 auto; + display: flex; + align-items: center; + justify-content: center; + width: fit-content; + height: auto; + margin: 0 var(--ss-spacing-m) 0 var(--ss-spacing-m); +} +.ss-main .ss-deselect svg { + width: 8px; + height: 8px; +} +.ss-main .ss-deselect svg path { + fill: none; + stroke: var(--ss-font-color); + stroke-width: 20; + stroke-linecap: round; + stroke-linejoin: round; +} +.ss-main .ss-arrow { + flex: 0 1 auto; + display: flex; + align-items: center; + justify-content: flex-end; + width: 12px; + height: 12px; + margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m); +} +.ss-main .ss-arrow path { + fill: none; + stroke: var(--ss-font-color); + stroke-width: 18; + stroke-linecap: round; + stroke-linejoin: round; + transition-timing-function: ease-out; + transition: var(--ss-animation-timing); +} +.ss-content { + position: absolute; + display: flex; + height: auto; + flex-direction: column; + width: auto; + max-height: var(--ss-content-height); + box-sizing: border-box; + border: solid 1px var(--ss-border-color); + background-color: var(--ss-bg-color); + transition: transform var(--ss-animation-timing), + opacity var(--ss-animation-timing); + opacity: 0; + transform: scaleY(0); + transform-origin: center top; + overflow: hidden; + z-index: 10000; +} +.ss-content.ss-relative { + position: relative; + height: 100%; +} +.ss-content.ss-open-above { + flex-direction: column-reverse; + opacity: 1; + transform: scaleY(1); + transform-origin: center bottom; + border-top-left-radius: var(--ss-border-radius); + border-top-right-radius: var(--ss-border-radius); +} +.ss-content.ss-open-below { + opacity: 1; + transform: scaleY(1); + transform-origin: center top; + border-bottom-left-radius: var(--ss-border-radius); + border-bottom-right-radius: var(--ss-border-radius); +} +.ss-content .ss-search { + flex: 0 1 auto; + display: flex; + flex-direction: row; + padding: var(--ss-spacing-l) var(--ss-spacing-l) var(--ss-spacing-m) + var(--ss-spacing-l); +} +.ss-content .ss-search input { + display: inline-flex; + font-size: inherit; + line-height: inherit; + flex: 1 1 auto; + width: 100%; + min-width: 0px; + padding: var(--ss-spacing-m) var(--ss-spacing-l); + margin: 0; + border: 1px solid var(--ss-border-color); + border-radius: var(--ss-border-radius); + background-color: var(--ss-bg-color); + outline: 0; + text-align: left; + box-sizing: border-box; +} +.ss-content .ss-search input::placeholder { + color: var(--ss-font-placeholder-color); + vertical-align: middle; +} +.ss-content .ss-search input:focus { + box-shadow: 0 0 5px var(--ss-focus-color); +} +.ss-content .ss-search .ss-addable { + display: inline-flex; + justify-content: center; + align-items: center; + cursor: pointer; + flex: 0 0 auto; + height: auto; + margin: 0 0 0 var(--ss-spacing-m); + border: 1px solid var(--ss-border-color); + border-radius: var(--ss-border-radius); +} +.ss-content .ss-search .ss-addable svg { + display: flex; + align-items: center; + justify-content: flex-end; + flex: 0 1 auto; + width: 12px; + height: 12px; + margin: auto var(--ss-spacing-m) auto var(--ss-spacing-m); +} +.ss-content .ss-search .ss-addable svg path { + fill: none; + stroke: var(--ss-font-color); + stroke-width: 18; + stroke-linecap: round; + stroke-linejoin: round; +} +.ss-content .ss-list { + flex: 1 1 auto; + height: auto; + overflow-x: hidden; + overflow-y: auto; +} +.ss-content .ss-list .ss-error { + color: var(--ss-error-color); + padding: var(--ss-spacing-l); +} +.ss-content .ss-list .ss-searching { + color: var(--ss-font-color); + padding: var(--ss-spacing-l); +} +.ss-content .ss-list .ss-optgroup.ss-close .ss-option { + display: none !important; +} +.ss-content .ss-list .ss-optgroup .ss-optgroup-label { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) + var(--ss-spacing-l); +} +.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-label-text { + flex: 1 1 auto; + font-weight: bold; + color: var(--ss-font-color); +} +.ss-content .ss-list .ss-optgroup .ss-optgroup-label:has(.ss-arrow) { + cursor: pointer; +} +.ss-content .ss-list .ss-optgroup .ss-optgroup-label .ss-optgroup-actions { + flex: 0 1 auto; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: var(--ss-spacing-m); +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall { + flex: 0 0 auto; + display: flex; + flex-direction: row; + cursor: pointer; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall:hover { + opacity: 0.5; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall.ss-selected + svg + path { + stroke: var(--ss-error-color); +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall + span { + flex: 0 1 auto; + display: flex; + align-items: center; + justify-content: center; + font-size: 60%; + text-align: center; + padding: 0 var(--ss-spacing-s) 0 0; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall + svg { + flex: 0 1 auto; + width: 13px; + height: 13px; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall + svg + path { + fill: none; + stroke: var(--ss-success-color); + stroke-linecap: round; + stroke-linejoin: round; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall + svg:first-child { + stroke-width: 5; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-selectall + svg:last-child { + stroke-width: 11; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-closable { + flex: 0 1 auto; + display: flex; + flex-direction: row; + cursor: pointer; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-closable + .ss-arrow { + flex: 1 1 auto; + width: 10px; + height: 10px; +} +.ss-content + .ss-list + .ss-optgroup + .ss-optgroup-label + .ss-optgroup-actions + .ss-closable + .ss-arrow + path { + fill: none; + stroke: var(--ss-font-color); + stroke-width: 18; + stroke-linecap: round; + stroke-linejoin: round; + transition-timing-function: ease-out; + transition: var(--ss-animation-timing); +} +.ss-content .ss-list .ss-optgroup .ss-option { + padding: var(--ss-spacing-s) var(--ss-spacing-s) var(--ss-spacing-s) + calc(var(--ss-spacing-l) * 3); +} +.ss-content .ss-list .ss-option { + display: flex; + padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) + var(--ss-spacing-l); + color: var(--ss-font-color); + cursor: pointer; + user-select: none; +} +.ss-content .ss-list .ss-option:hover { + color: var(--ss-bg-color); + background-color: var(--ss-primary-color); +} +.ss-content .ss-list .ss-option.ss-highlighted, +.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected { + color: var(--ss-bg-color); + background-color: var(--ss-primary-color); +} +.ss-content .ss-list .ss-option.ss-disabled { + cursor: not-allowed; + background-color: var(--ss-disabled-color); +} +.ss-content .ss-list .ss-option.ss-disabled:hover { + color: var(--ss-font-color); +} +.ss-content .ss-list .ss-option .ss-search-highlight { + background-color: var(--ss-highlight-color); +} /*# sourceMappingURL=slimselect.css.map */ + +@media (min-width: 600px) { + .ss-main { + max-width: 500px; + } +} + +@media (min-width: 1000px) { + .ss-main { + max-width: 800px; + } +} diff --git a/src/styles.css b/src/styles.css index b4b13ad..f4e65cb 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,11 +1,19 @@ +:root { + --color-light: #eee; + --color-dark: #1a1a1a; + --color-accent: #68d684; +} + body { - background-color: gray; + background-color: var(--color-dark); + background-image: linear-gradient(var(--color-dark), black); + min-height: 100vh; } .loader { width: 48px; height: 48px; - border: 5px solid #fff; + border: 5px solid var(--color-light); border-bottom-color: transparent; border-radius: 50%; display: inline-block; @@ -17,6 +25,50 @@ body { display: none; } +h1, +h2, +p { + margin: 0; +} + +.main-heading { + color: var(--color-accent); + font-size: 3em; + margin: 0 1rem; + padding-top: 1rem; + text-align: center; + text-transform: uppercase; +} + +.cat-info { + margin: 0 auto; + max-width: 300px; +} + +.image { + border-radius: 15px; + box-shadow: 0 0 10px var(--color-accent); + margin: 0 auto; + max-width: 300px; +} + +.second-heading { + color: var(--color-accent); + font-size: 2em; + padding: 1rem 0; + text-align: center; +} + +.paragraph { + color: var(--color-light); + font-size: 1.2em; + padding-bottom: 0.8em; +} + +.strong { + color: var(--color-accent); +} + @keyframes rotation { 0% { transform: rotate(0deg); @@ -25,3 +77,23 @@ body { transform: rotate(360deg); } } + +@media (min-width: 600px) { + .cat-info { + max-width: 500px; + } + + .image { + max-width: 500px; + } +} + +@media (min-width: 1000px) { + .cat-info { + max-width: 800px; + } + + .image { + max-width: 800px; + } +}