From f43e5dd3741fab81223627be597b528037c5e3f0 Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Tue, 27 Sep 2022 17:14:24 +0300 Subject: [PATCH 1/7] Friends app is ready --- submissions/Mifaresss/friends-app/index.html | 101 +++++ submissions/Mifaresss/friends-app/scripts.js | 130 ++++++ submissions/Mifaresss/friends-app/styles.css | 410 +++++++++++++++++++ 3 files changed, 641 insertions(+) create mode 100644 submissions/Mifaresss/friends-app/index.html create mode 100644 submissions/Mifaresss/friends-app/scripts.js create mode 100644 submissions/Mifaresss/friends-app/styles.css diff --git a/submissions/Mifaresss/friends-app/index.html b/submissions/Mifaresss/friends-app/index.html new file mode 100644 index 0000000000..948d74888e --- /dev/null +++ b/submissions/Mifaresss/friends-app/index.html @@ -0,0 +1,101 @@ + + + + + + + + Friends App | Mifares + + + + + + +
+
+
+

Friends App

+
+
+ +
+

Filter by gender:

+
+ + +
+
+ + +
+
+ + +
+
+ +
+

Sort by age:

+
+ + +
+
+ + +
+
+
+

Sort by alphabet:

+
+ + +
+
+ + +
+
+ +
+ + +
+
+
+
    +
    +
    + +
    + + + + diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js new file mode 100644 index 0000000000..daa8925c5c --- /dev/null +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -0,0 +1,130 @@ +function getData() { + const requestURL = 'https://randomuser.me/api/?results=150&inc=name,gender,picture,dob'; + return fetch(requestURL) + .then(response => { + if (!response.ok) { + throw Error(response.statusText); + } + return response.json(); + }) + .then(data => data.results) +} + +function createHuman(person) { + const human = document.createElement('li'); + human.classList.add('people__human'); + coloringCard(person, human); + human.innerHTML = ` + +

    My name ${person.name.first}

    +

    I am ${person.dob.age}

    + + ` + return human; +} + +const peopleList = document.querySelector('.people__list'); +let receivedPeople = []; + +function createPeopleHTML() { + getData().then(people => { + receivedPeople = people.slice(); + sortByAlphabet(receivedPeople); + renderPeople(receivedPeople); + }) +} +createPeopleHTML(); + +function renderPeople(people) { + peopleList.innerHTML = ''; + const peopleHtml = people.map(human => createHuman(human)); + peopleList.append(...peopleHtml); +} + + +let newPersonGender; +function convertGender(person) { + if (person.gender == 'male') newPersonGender = './images/male-svgrepo-com.svg'; + if (person.gender == 'female') newPersonGender = './images/female-svgrepo-com.svg'; + return newPersonGender; +} +function coloringCard(person, human) { + if (person.gender == 'male') human.classList.add('people__human_male'); + if (person.gender == 'female') human.classList.add('people__human_female'); +} + + + +const state = { + sortBy: 'by-alphabet__a-z', + filterGenderBy: 'value', +}; + +const form = document.querySelector('.filter'); +form.addEventListener('change', filterData); +form.addEventListener('submit', filterPeopleByName) + +function getCurrentInputId(elements) { + const currentInput = Array.from(elements).find(selectedInput => selectedInput.checked); + const currentInputId = currentInput.id; + return currentInputId; +} + +function filterData({currentTarget}) { + const currentInputSortingId = getCurrentInputId(currentTarget.elements.sorting); + state.sortBy = currentInputSortingId; + + const currentInputGenderId = getCurrentInputId(currentTarget.elements.gender); + state.filterGenderBy = currentInputGenderId; + + let sortedPeople; + if (state.sortBy == 'sort-by-age__ascending' || state.sortBy == 'sort-by-age__descending') { + sortedPeople = sortByAge(receivedPeople); + } else { + sortedPeople = sortByAlphabet(receivedPeople); + } + + const filteredPeople = filterByGender(sortedPeople); + renderPeople(filteredPeople); +} + +function filterByGender(people) { + if (state.filterGenderBy === 'gender__all') return people; + return people.filter(human => { + if (human.gender == state.filterGenderBy) return human; + }) +} + +function sortByAge(people) { + let copyPeople = [...people]; + const sorterByAge = (a, b) => a.dob.age - b.dob.age; + if (state.sortBy == 'sort-by-age__ascending') { + copyPeople.sort(sorterByAge); + } else { + copyPeople.sort((a, b) => sorterByAge(b, a)); + } + + return copyPeople; +} + +function sortByAlphabet(people) { + if (state.sortBy == 'by-alphabet__a-z') people.sort((a,b) => a.name.first.localeCompare(b.name.first)); + if (state.sortBy == 'by-alphabet__z-a') people.reverse((a,b) => a.name.first.localeCompare(b.name.first)); + return people; +} + + +function filterPeopleByName({currentTarget}) { + const currentInputNameValue = currentTarget.elements.name.value; + const filteredByName = filterByName(currentInputNameValue, receivedPeople); + renderPeople(filteredByName) + currentTarget.elements.name.value = ''; + console.log(currentTarget.elements.gender) +} + +function filterByName(data, people) { + let copyPeople = people.filter(human => { + return human.name.first.toLowerCase().includes(data.toLowerCase()); + }) + return copyPeople; +} diff --git a/submissions/Mifaresss/friends-app/styles.css b/submissions/Mifaresss/friends-app/styles.css new file mode 100644 index 0000000000..cb70e20edb --- /dev/null +++ b/submissions/Mifaresss/friends-app/styles.css @@ -0,0 +1,410 @@ +/* ========================================== Common Styles ========================================== */ +:root { + --filters-main-color: #e7eac0; + --border-main-color: #817f7f; +} +body { + font-family: 'Poppins', sans-serif; + height: 100%; + background: url(../images/background/earth-1756274_1280.webp); + background-repeat: no-repeat; + background-size: 100% 100%; + background-attachment: fixed; + background-position: top; +} +.wrapper { + display: flex; + flex-direction: column; + min-height: 100%; +} +.container { + max-width: 1200px; + margin: 0 auto 30px; + padding: 0 15px; + flex: 1 1 auto; +} + + +/* ========================================== Header Styles ========================================== */ +.header { + height: 100px; + display: flex; + justify-content: center; + align-items: center; +} +@import "https://fonts.googleapis.com/css?family=Russo+One"; +.funny-title { + border-top: 5px solid var(--filters-main-color); + border-bottom: 5px solid var(--filters-main-color); + font-size: 50px; + text-align: center; + text-transform: uppercase; + font-family: 'Russo One',sans-serif; + font-weight: 900; + letter-spacing: 5px; +} +@-webkit-keyframes move-background { +0%{background-position:-300px 0} +100%{background-position:300px -300px} +} +@-moz-keyframes move-background { +0%{background-position:-300px 0} +100%{background-position:300px -300px} +} +@keyframes move-background { +0%{background-position:-300px 0} +100%{background-position:300px -300px} +} +.title { + -webkit-animation-play-state:running; + -moz-animation-play-state:running; + animation-play-state:running; + color:transparent; + background:url(https://obninsksite.ru/assets/theme/images/blog/square.svg) no-repeat var(--filters-main-color); + background-size:cover; + -webkit-text-fill-color:transparent; + -moz-text-fill-color:transparent; + -webkit-background-clip:text; + -moz-background-clip:text; + background-clip:text; + -webkit-animation:move-background 20s infinite linear alternate; + -moz-animation:move-background 20s infinite linear alternate; + animation:move-background 20s infinite linear alternate +} + + + + + + +/* ========================================== Form Styles ========================================== */ +.filter { + width: 100%; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 20px; + padding: 10px; + border: 2px solid var(--border-main-color); + border-radius: 5px; + box-shadow: 0 0 7px rgba(129, 127, 127, 0.934); + position: sticky; + background-color: rgba(88, 94, 98, 0.675); + top: 5px; + z-index: 5; + color: var(--filters-main-color); +} +.filter::after { + content: ''; + position: absolute; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0); + backdrop-filter: blur(10px); + top: 0; + left: 0; + z-index: -5; +} + + +/* ================== Filter By Gender, Age, Alphabet Styles ================== */ +.filter-sorter { + display: flex; + gap: 15px; + align-items: center; + flex: 1 1 auto; + position: relative; +} +.filter-sorter__description { + position: absolute; + top: 0; + left: 0; + white-space: nowrap; +} +.filter-sorter__wrapper { + margin-top: 23px; + display: flex; + justify-content: center; + align-items: center; + flex: 1 1 auto; +} +.filter-sorter__label { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + border: 2px solid var(--border-main-color); + border-radius: 5px; + flex: 1 1 auto; + padding: 0 5px; +} +.filter-sorter__input { + position: absolute; + white-space: nowrap; + width: 1px; + height: 1px; + overflow: hidden; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + clip-path: inset(50%); + margin: -1px; +} +.filter-sorter__input:checked ~ .filter-sorter__label { + background-color: rgba(125, 129, 134, 0.331); + outline: 3px solid rgba(202, 202, 202, 0.657); +} +.filter-sorter__img { + width: 34px; + height: 100%; + fill: var(--filters-main-color); +} +/* ===== Filter OnLy By Gender Styles ===== */ +.filter-gender__span_all { + margin-right: 5px; +} +/* ===== Filter OnLy By Alphabet Styles ===== */ +.sort-by-alphabet__label { + padding: 9px; +} + + +/* ================== Filter By Name Styles ================== */ +.filter-name { + flex: 1 1 auto; + display: flex; + gap: 7.3px; + flex-direction: column; +} +.filter-name__input { + border: 2px solid var(--border-main-color); + border-radius: 5px; + height: 38px; + padding-left: 8px; + flex: 1 1 auto; + background-color: transparent; + color: var(--filters-main-color); +} +.filter-name__input:focus { + background-color: rgba(125, 129, 134, 0.331); + outline: 3px solid rgba(202, 202, 202, 0.657); +} + + + + +/* ================================== People Cards ================================== */ +.people { + margin-top: 20px; +} +.people__list { + display: flex; + flex-wrap: wrap; + gap: 10px; +} +.people__human { + display: flex; + flex-direction: column; + width: calc(110px + 141 * ((100vw - 320px) / (1600 - 320))); + padding: 7px; + border-radius: 5px; + flex: 1 1 auto; + position: relative; +} +.people__human_male { + background-color: rgba(40, 110, 180, 0.6); + box-shadow: 0 0 8px rgba(40, 110, 180, 0.45); +} +.people__human_female { + background-color: rgba(211, 113, 238, 0.5); + box-shadow: 0 0 8px rgba(211, 113, 238, 0.559); +} +.people__name { + font-size: calc(14px + 3 * ((100vw - 320px) / (1600 - 320))); + font-weight: 600; + margin-top: 5px; + flex: 1 1 auto; +} +.people__img { + width: 100%; + border-radius: 5px; +} +.people__age { + margin-top: 5px; + margin-bottom: 2px; + font-size: calc(14px + 2 * ((100vw - 320px) / (1600 - 320))); +} +.people__gender { + width: calc(25px + 20 * ((100vw - 320px) / (1600 - 320))); + position: absolute; + right: 0; + bottom: 3px; +} + + + +/* ================================== Footer Styles ================================== */ +.footer { + height: 60px; + background-color: rgba(105, 106, 103, 0.495); + display: flex; + justify-content: center; + align-items: center; +} +.footer__description { + color: rgb(153, 152, 152); +} +.footer__link { + color: rgb(153, 152, 152); + transition: all .2s; + background-color: transparent; + position: relative; +} +.footer__link::after { + position: absolute; + transition: all .2s; + bottom: 0; + left: 0; + right: 0; + margin: auto; + width: 0%; + content: ''; + color: transparent; + background: #d8ddd7; + height: 1px; +} +.footer__link:hover { + color: rgb(183, 182, 182); +} +.footer__link:hover:after { + width: 100%; +} + + + + + + + + + +/* ================================== Media Request Styles ================================== */ +@media (max-width: 1094px) { + .filter-gender__span_all, + .filter-gender__span { + display: none; + } +} +@media (max-width: 930px) { + body { + background-size: 120% 100%; + } + .filter { + font-size: 14px; + } + .filter-sorter__wrapper { + margin-top: 20px; + } + .filter-sorter { + gap: 10px; + } + .filter-sorter__label { + padding: 0; + } + .filter-name { + gap: 5.5px; + } + .filter-name__input { + height: 32px; + } + .filter-sorter__img { + width: 28px; + } + .filter-gender__all { + padding: 0 5px; + } + /* ===== Filter OnLy By Age Styles ===== */ + .sort-by-age__span { + display: none; + } + /* ===== Filter OnLy By Alphabet Styles ===== */ + .sort-by-alphabet__label { + padding: 7px; + } +} +@media (max-width: 674px) { + body { + background-size: 150% 100%; + } + .filter { + gap: 18px; + } + .filter-sorter__wrapper { + margin-top: 20px; + } + .filter-sorter { + gap: 8px; + } + .filter-name { + gap: 6px; + } +} +@media (max-width: 500px) { + body { + background-size: 170% 100%; + } + .header { + height: 70px; + } + .container { + padding: 0 10px; + } + .title { + font-size: 34px; + letter-spacing: 3px; + } + .filter { + gap: 12px; + padding: 8px; + } + .filter-name { + gap: 3.7px; + } + .filter-name__label { + min-width: none; + } + .filter-name__input { + padding: 6px 0px 6px 5px; + } + .sort-by-alphabet__label { + padding: 7px 4px; + } + .sort-by-alphabet__label_all { + padding: 7px 5px; + } + .filter-sorter { + gap: 7px; + } + .filter-sorter__input:checked ~ .filter-sorter__label { + outline: 2px solid rgb(202, 202, 202); + } +} +@media (max-width: 400px) { + body { + background-size: 190% 100%; + } + .filter { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + } + .filter-name__input { + width: 100%; + } + .filter-name { + gap: 6px; + } + .people { + margin-top: 15px; + } +} From d3294bd24cb3898d074f8a5a3058481eec20bbd6 Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Tue, 27 Sep 2022 17:58:50 +0300 Subject: [PATCH 2/7] Remove "console.log" --- submissions/Mifaresss/friends-app/scripts.js | 1 - 1 file changed, 1 deletion(-) diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js index daa8925c5c..39637586d0 100644 --- a/submissions/Mifaresss/friends-app/scripts.js +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -119,7 +119,6 @@ function filterPeopleByName({currentTarget}) { const filteredByName = filterByName(currentInputNameValue, receivedPeople); renderPeople(filteredByName) currentTarget.elements.name.value = ''; - console.log(currentTarget.elements.gender) } function filterByName(data, people) { From 481bc4eae5a337d55f0d4d576fd5b903b70520aa Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Tue, 27 Sep 2022 19:10:41 +0300 Subject: [PATCH 3/7] Added "Reset" button, slightly reworked filter logic --- submissions/Mifaresss/friends-app/index.html | 4 ++ submissions/Mifaresss/friends-app/scripts.js | 24 +++++----- submissions/Mifaresss/friends-app/styles.css | 49 ++++++++++++++++++-- 3 files changed, 63 insertions(+), 14 deletions(-) diff --git a/submissions/Mifaresss/friends-app/index.html b/submissions/Mifaresss/friends-app/index.html index 948d74888e..6791f939e5 100644 --- a/submissions/Mifaresss/friends-app/index.html +++ b/submissions/Mifaresss/friends-app/index.html @@ -85,6 +85,10 @@

    Friends App

    + +
    + +
    diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js index 39637586d0..3da565bf83 100644 --- a/submissions/Mifaresss/friends-app/scripts.js +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -61,8 +61,9 @@ const state = { }; const form = document.querySelector('.filter'); -form.addEventListener('change', filterData); -form.addEventListener('submit', filterPeopleByName) +form.addEventListener('input', filterData); +const resetButton = document.querySelector('.filter-reset__button') +resetButton.addEventListener('click', resetFilters); function getCurrentInputId(elements) { const currentInput = Array.from(elements).find(selectedInput => selectedInput.checked); @@ -85,7 +86,11 @@ function filterData({currentTarget}) { } const filteredPeople = filterByGender(sortedPeople); - renderPeople(filteredPeople); + + const currentInputNameValue = currentTarget.elements.name.value; + const filteredByName = filterByName(currentInputNameValue, filteredPeople); + + renderPeople(filteredByName); } function filterByGender(people) { @@ -113,17 +118,14 @@ function sortByAlphabet(people) { return people; } - -function filterPeopleByName({currentTarget}) { - const currentInputNameValue = currentTarget.elements.name.value; - const filteredByName = filterByName(currentInputNameValue, receivedPeople); - renderPeople(filteredByName) - currentTarget.elements.name.value = ''; -} - function filterByName(data, people) { let copyPeople = people.filter(human => { return human.name.first.toLowerCase().includes(data.toLowerCase()); }) return copyPeople; } + +function resetFilters() { + form.reset(); + renderPeople(receivedPeople) +} diff --git a/submissions/Mifaresss/friends-app/styles.css b/submissions/Mifaresss/friends-app/styles.css index cb70e20edb..e467c8074d 100644 --- a/submissions/Mifaresss/friends-app/styles.css +++ b/submissions/Mifaresss/friends-app/styles.css @@ -75,8 +75,6 @@ body { - - /* ========================================== Form Styles ========================================== */ .filter { width: 100%; @@ -100,6 +98,7 @@ body { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); + border-radius: 3px; backdrop-filter: blur(10px); top: 0; left: 0; @@ -189,7 +188,27 @@ body { background-color: rgba(125, 129, 134, 0.331); outline: 3px solid rgba(202, 202, 202, 0.657); } - +/* ================== ResetButton Styles ================== */ +.filter-reset { + display: flex; + flex: 1 1 auto; +} +.filter-reset__button { + font-size: 18px; + flex: 1 1 auto; + padding: 15px 5px; + border: 2px solid var(--border-main-color); + background-color: transparent; + color: var(--filters-main-color); + border-radius: 5px; + transition: all .2s; +} +.filter-reset__button:hover { + background-color: rgba(125, 129, 134, 0.331); +} +.filter-reset__button:active { + outline: 3px solid rgba(202, 202, 202, 0.657); +} @@ -323,6 +342,9 @@ body { .filter-gender__all { padding: 0 5px; } + .filter-reset__button { + padding: 10px 10px; + } /* ===== Filter OnLy By Age Styles ===== */ .sort-by-age__span { display: none; @@ -388,6 +410,9 @@ body { .filter-sorter__input:checked ~ .filter-sorter__label { outline: 2px solid rgb(202, 202, 202); } + .filter-reset__button { + padding: 9px 10px; + } } @media (max-width: 400px) { body { @@ -404,6 +429,24 @@ body { .filter-name { gap: 6px; } + .filter::before { + content: ''; + position: absolute; + width: 63.21px; + height: 32.86px; + background-color: rgba(0, 0, 0, 0); + backdrop-filter: blur(10px); + bottom: -38px; + right: -2px; + border-radius: 5px; + z-index: -5; + } + .filter-reset__button { + position: absolute; + bottom: -38px; + right: -2px; + padding: 1px 5px; + } .people { margin-top: 15px; } From 98ebc73b83194f2454ca24a0d7b80195449849e4 Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Sat, 1 Oct 2022 18:44:38 +0300 Subject: [PATCH 4/7] Fixed bugs; code "cleaned up" --- submissions/Mifaresss/friends-app/index.html | 9 +- submissions/Mifaresss/friends-app/scripts.js | 49 +++++----- submissions/Mifaresss/friends-app/styles.css | 97 ++++++++++---------- 3 files changed, 76 insertions(+), 79 deletions(-) diff --git a/submissions/Mifaresss/friends-app/index.html b/submissions/Mifaresss/friends-app/index.html index 6791f939e5..6432f7c1dd 100644 --- a/submissions/Mifaresss/friends-app/index.html +++ b/submissions/Mifaresss/friends-app/index.html @@ -1,5 +1,5 @@ - + @@ -33,7 +33,7 @@

    Friends App

    @@ -41,7 +41,7 @@

    Friends App

    @@ -95,8 +95,7 @@

    Friends App

    diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js index 3da565bf83..4f0dcc5979 100644 --- a/submissions/Mifaresss/friends-app/scripts.js +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -1,13 +1,13 @@ function getData() { const requestURL = 'https://randomuser.me/api/?results=150&inc=name,gender,picture,dob'; return fetch(requestURL) - .then(response => { - if (!response.ok) { - throw Error(response.statusText); - } - return response.json(); - }) - .then(data => data.results) + .then(response => { + if (!response.ok) { + throw Error(response.statusText); + } + return response.json(); + }) + .then(data => data.results); } function createHuman(person) { @@ -16,7 +16,7 @@ function createHuman(person) { coloringCard(person, human); human.innerHTML = ` -

    My name ${person.name.first}

    +

    My name's ${person.name.first}

    I am ${person.dob.age}

    ` @@ -25,12 +25,15 @@ function createHuman(person) { const peopleList = document.querySelector('.people__list'); let receivedPeople = []; +let peopleForFilter = []; function createPeopleHTML() { getData().then(people => { - receivedPeople = people.slice(); + receivedPeople = [...people]; sortByAlphabet(receivedPeople); - renderPeople(receivedPeople); + peopleForFilter = [...people]; + sortByAlphabet(peopleForFilter); + renderPeople(peopleForFilter); }) } createPeopleHTML(); @@ -61,7 +64,7 @@ const state = { }; const form = document.querySelector('.filter'); -form.addEventListener('input', filterData); +form.addEventListener('input', processMainData); const resetButton = document.querySelector('.filter-reset__button') resetButton.addEventListener('click', resetFilters); @@ -71,24 +74,24 @@ function getCurrentInputId(elements) { return currentInputId; } -function filterData({currentTarget}) { - const currentInputSortingId = getCurrentInputId(currentTarget.elements.sorting); - state.sortBy = currentInputSortingId; +function processMainData({currentTarget}) { + const InputSortingId = getCurrentInputId(currentTarget.elements.sorting); + state.sortBy = InputSortingId; - const currentInputGenderId = getCurrentInputId(currentTarget.elements.gender); - state.filterGenderBy = currentInputGenderId; + const InputGenderId = getCurrentInputId(currentTarget.elements.gender); + state.filterGenderBy = InputGenderId; let sortedPeople; if (state.sortBy == 'sort-by-age__ascending' || state.sortBy == 'sort-by-age__descending') { - sortedPeople = sortByAge(receivedPeople); + sortedPeople = sortByAge(peopleForFilter); } else { - sortedPeople = sortByAlphabet(receivedPeople); + sortedPeople = sortByAlphabet(peopleForFilter); } const filteredPeople = filterByGender(sortedPeople); - const currentInputNameValue = currentTarget.elements.name.value; - const filteredByName = filterByName(currentInputNameValue, filteredPeople); + const InputNameValue = currentTarget.elements.name.value; + const filteredByName = filterByName(InputNameValue, filteredPeople); renderPeople(filteredByName); } @@ -118,14 +121,14 @@ function sortByAlphabet(people) { return people; } -function filterByName(data, people) { +function filterByName(inputNameValue, people) { let copyPeople = people.filter(human => { - return human.name.first.toLowerCase().includes(data.toLowerCase()); + return human.name.first.toLowerCase().includes(inputNameValue.toLowerCase()); }) return copyPeople; } function resetFilters() { form.reset(); - renderPeople(receivedPeople) + renderPeople(receivedPeople); } diff --git a/submissions/Mifaresss/friends-app/styles.css b/submissions/Mifaresss/friends-app/styles.css index e467c8074d..174a4baabc 100644 --- a/submissions/Mifaresss/friends-app/styles.css +++ b/submissions/Mifaresss/friends-app/styles.css @@ -1,7 +1,13 @@ /* ========================================== Common Styles ========================================== */ :root { - --filters-main-color: #e7eac0; - --border-main-color: #817f7f; + --main-color: #e7eac0; + --gray-color: #817f7f; + + --male-background-color: rgba(40, 110, 180, 0.6); + --female-background-color: rgba(211, 113, 238, 0.5); + + --element-bc-color-on-focus: rgba(125, 129, 134, 0.331); + --element-outline-color-on-focus: rgba(202, 202, 202, 0.657); } body { font-family: 'Poppins', sans-serif; @@ -34,8 +40,8 @@ body { } @import "https://fonts.googleapis.com/css?family=Russo+One"; .funny-title { - border-top: 5px solid var(--filters-main-color); - border-bottom: 5px solid var(--filters-main-color); + border-top: 5px solid var(--main-color); + border-bottom: 5px solid var(--main-color); font-size: 50px; text-align: center; text-transform: uppercase; @@ -43,33 +49,25 @@ body { font-weight: 900; letter-spacing: 5px; } -@-webkit-keyframes move-background { -0%{background-position:-300px 0} -100%{background-position:300px -300px} -} -@-moz-keyframes move-background { -0%{background-position:-300px 0} -100%{background-position:300px -300px} -} -@keyframes move-background { -0%{background-position:-300px 0} -100%{background-position:300px -300px} -} .title { - -webkit-animation-play-state:running; - -moz-animation-play-state:running; - animation-play-state:running; - color:transparent; - background:url(https://obninsksite.ru/assets/theme/images/blog/square.svg) no-repeat var(--filters-main-color); - background-size:cover; - -webkit-text-fill-color:transparent; + animation-play-state: running; + color: transparent; + background: url(https://obninsksite.ru/assets/theme/images/blog/square.svg) no-repeat var(--main-color); + background-size: cover; + -webkit-text-fill-color: transparent; -moz-text-fill-color:transparent; - -webkit-background-clip:text; - -moz-background-clip:text; - background-clip:text; - -webkit-animation:move-background 20s infinite linear alternate; - -moz-animation:move-background 20s infinite linear alternate; - animation:move-background 20s infinite linear alternate + -webkit-background-clip: text; + -moz-background-clip: text; + background-clip: text; + animation: move-background 20s infinite linear alternate; +} +@keyframes move-background { + 0% { + background-position: -300px 0; + } + 100% { + background-position: 300px -300px; + } } @@ -83,14 +81,14 @@ body { flex-wrap: wrap; gap: 20px; padding: 10px; - border: 2px solid var(--border-main-color); + border: 2px solid var(--gray-color); border-radius: 5px; box-shadow: 0 0 7px rgba(129, 127, 127, 0.934); position: sticky; background-color: rgba(88, 94, 98, 0.675); top: 5px; z-index: 5; - color: var(--filters-main-color); + color: var(--main-color); } .filter::after { content: ''; @@ -132,7 +130,7 @@ body { align-items: center; justify-content: center; cursor: pointer; - border: 2px solid var(--border-main-color); + border: 2px solid var(--gray-color); border-radius: 5px; flex: 1 1 auto; padding: 0 5px; @@ -150,19 +148,19 @@ body { margin: -1px; } .filter-sorter__input:checked ~ .filter-sorter__label { - background-color: rgba(125, 129, 134, 0.331); - outline: 3px solid rgba(202, 202, 202, 0.657); + background-color: var(--element-bc-color-on-focus); + outline: 3px solid var(--element-outline-color-on-focus); } .filter-sorter__img { width: 34px; height: 100%; - fill: var(--filters-main-color); + fill: var(--main-color); } /* ===== Filter OnLy By Gender Styles ===== */ .filter-gender__span_all { margin-right: 5px; } -/* ===== Filter OnLy By Alphabet Styles ===== */ +/* ===== Sort OnLy By Alphabet Styles ===== */ .sort-by-alphabet__label { padding: 9px; } @@ -176,17 +174,17 @@ body { flex-direction: column; } .filter-name__input { - border: 2px solid var(--border-main-color); + border: 2px solid var(--gray-color); border-radius: 5px; height: 38px; padding-left: 8px; flex: 1 1 auto; background-color: transparent; - color: var(--filters-main-color); + color: var(--main-color); } .filter-name__input:focus { - background-color: rgba(125, 129, 134, 0.331); - outline: 3px solid rgba(202, 202, 202, 0.657); + background-color: var(--element-bc-color-on-focus); + outline: 3px solid var(--element-outline-color-on-focus); } /* ================== ResetButton Styles ================== */ .filter-reset { @@ -197,17 +195,17 @@ body { font-size: 18px; flex: 1 1 auto; padding: 15px 5px; - border: 2px solid var(--border-main-color); + border: 2px solid var(--gray-color); background-color: transparent; - color: var(--filters-main-color); + color: var(--main-color); border-radius: 5px; transition: all .2s; } .filter-reset__button:hover { - background-color: rgba(125, 129, 134, 0.331); + background-color: var(--element-bc-color-on-focus); } .filter-reset__button:active { - outline: 3px solid rgba(202, 202, 202, 0.657); + outline: 3px solid var(--element-outline-color-on-focus); } @@ -231,12 +229,12 @@ body { position: relative; } .people__human_male { - background-color: rgba(40, 110, 180, 0.6); - box-shadow: 0 0 8px rgba(40, 110, 180, 0.45); + background-color: var(--male-background-color); + box-shadow: 0 0 8px var(--male-background-color); } .people__human_female { - background-color: rgba(211, 113, 238, 0.5); - box-shadow: 0 0 8px rgba(211, 113, 238, 0.559); + background-color: var(--female-background-color); + box-shadow: 0 0 8px var(--female-background-color); } .people__name { font-size: calc(14px + 3 * ((100vw - 320px) / (1600 - 320))); @@ -401,9 +399,6 @@ body { .sort-by-alphabet__label { padding: 7px 4px; } - .sort-by-alphabet__label_all { - padding: 7px 5px; - } .filter-sorter { gap: 7px; } From 57e682d86ae2f0d0ebc35826eb08f1c87af5c17b Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Sat, 1 Oct 2022 18:58:24 +0300 Subject: [PATCH 5/7] Fixed bug --- submissions/Mifaresss/friends-app/scripts.js | 1 + 1 file changed, 1 insertion(+) diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js index 4f0dcc5979..9438e0f913 100644 --- a/submissions/Mifaresss/friends-app/scripts.js +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -130,5 +130,6 @@ function filterByName(inputNameValue, people) { function resetFilters() { form.reset(); + sortByAlphabet(peopleForFilter); renderPeople(receivedPeople); } From 7496f50bc7e85713d67eac27bcaae8408e99268d Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Sun, 2 Oct 2022 16:38:43 +0300 Subject: [PATCH 6/7] A little more refactoring :) --- submissions/Mifaresss/friends-app/scripts.js | 32 +++++++++----------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js index 9438e0f913..3bb3ce387f 100644 --- a/submissions/Mifaresss/friends-app/scripts.js +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -13,7 +13,7 @@ function getData() { function createHuman(person) { const human = document.createElement('li'); human.classList.add('people__human'); - coloringCard(person, human); + coloringCards(person, human); human.innerHTML = `

    My name's ${person.name.first}

    @@ -24,16 +24,14 @@ function createHuman(person) { } const peopleList = document.querySelector('.people__list'); + let receivedPeople = []; -let peopleForFilter = []; function createPeopleHTML() { getData().then(people => { receivedPeople = [...people]; sortByAlphabet(receivedPeople); - peopleForFilter = [...people]; - sortByAlphabet(peopleForFilter); - renderPeople(peopleForFilter); + renderPeople(receivedPeople); }) } createPeopleHTML(); @@ -44,14 +42,13 @@ function renderPeople(people) { peopleList.append(...peopleHtml); } - -let newPersonGender; function convertGender(person) { + let newPersonGender; if (person.gender == 'male') newPersonGender = './images/male-svgrepo-com.svg'; if (person.gender == 'female') newPersonGender = './images/female-svgrepo-com.svg'; return newPersonGender; } -function coloringCard(person, human) { +function coloringCards(person, human) { if (person.gender == 'male') human.classList.add('people__human_male'); if (person.gender == 'female') human.classList.add('people__human_female'); } @@ -65,6 +62,7 @@ const state = { const form = document.querySelector('.filter'); form.addEventListener('input', processMainData); + const resetButton = document.querySelector('.filter-reset__button') resetButton.addEventListener('click', resetFilters); @@ -83,9 +81,9 @@ function processMainData({currentTarget}) { let sortedPeople; if (state.sortBy == 'sort-by-age__ascending' || state.sortBy == 'sort-by-age__descending') { - sortedPeople = sortByAge(peopleForFilter); + sortedPeople = sortByAge(receivedPeople); } else { - sortedPeople = sortByAlphabet(peopleForFilter); + sortedPeople = sortByAlphabet(receivedPeople); } const filteredPeople = filterByGender(sortedPeople); @@ -99,12 +97,12 @@ function processMainData({currentTarget}) { function filterByGender(people) { if (state.filterGenderBy === 'gender__all') return people; return people.filter(human => { - if (human.gender == state.filterGenderBy) return human; - }) + return human.gender == state.filterGenderBy; + }); } function sortByAge(people) { - let copyPeople = [...people]; + const copyPeople = [...people]; const sorterByAge = (a, b) => a.dob.age - b.dob.age; if (state.sortBy == 'sort-by-age__ascending') { copyPeople.sort(sorterByAge); @@ -122,14 +120,14 @@ function sortByAlphabet(people) { } function filterByName(inputNameValue, people) { - let copyPeople = people.filter(human => { + return people.filter(human => { return human.name.first.toLowerCase().includes(inputNameValue.toLowerCase()); - }) - return copyPeople; + }); } function resetFilters() { form.reset(); - sortByAlphabet(peopleForFilter); + state.sortBy = 'by-alphabet__a-z'; + sortByAlphabet(receivedPeople); renderPeople(receivedPeople); } From 772f550f47a4acdb6c0beccd8f3980a1edb9d520 Mon Sep 17 00:00:00 2001 From: Mifaresss <9803211@gmail.com> Date: Fri, 7 Oct 2022 22:24:52 +0300 Subject: [PATCH 7/7] There are no boundaries for perfection)) --- submissions/Mifaresss/friends-app/index.html | 4 +- submissions/Mifaresss/friends-app/scripts.js | 68 ++++++++++---------- submissions/Mifaresss/friends-app/styles.css | 10 +++ 3 files changed, 45 insertions(+), 37 deletions(-) diff --git a/submissions/Mifaresss/friends-app/index.html b/submissions/Mifaresss/friends-app/index.html index 6432f7c1dd..67f4209da2 100644 --- a/submissions/Mifaresss/friends-app/index.html +++ b/submissions/Mifaresss/friends-app/index.html @@ -68,7 +68,7 @@

    Friends App

    Sort by alphabet:

    - + @@ -98,7 +98,7 @@

    Friends App

    Created by Mifaresss

    - + diff --git a/submissions/Mifaresss/friends-app/scripts.js b/submissions/Mifaresss/friends-app/scripts.js index 3bb3ce387f..73a2ad79d4 100644 --- a/submissions/Mifaresss/friends-app/scripts.js +++ b/submissions/Mifaresss/friends-app/scripts.js @@ -1,13 +1,13 @@ function getData() { const requestURL = 'https://randomuser.me/api/?results=150&inc=name,gender,picture,dob'; return fetch(requestURL) - .then(response => { - if (!response.ok) { - throw Error(response.statusText); - } - return response.json(); - }) - .then(data => data.results); + .then(response => { + if (!response.ok) { + throw Error(response.statusText); + } + return response.json(); + }) + .then(data => data.results); } function createHuman(person) { @@ -15,11 +15,11 @@ function createHuman(person) { human.classList.add('people__human'); coloringCards(person, human); human.innerHTML = ` - -

    My name's ${person.name.first}

    -

    I am ${person.dob.age}

    - - ` + +

    My name's ${person.name.first}

    +

    I am ${person.dob.age}

    + + `; return human; } @@ -30,16 +30,15 @@ let receivedPeople = []; function createPeopleHTML() { getData().then(people => { receivedPeople = [...people]; - sortByAlphabet(receivedPeople); - renderPeople(receivedPeople); + renderPeople(people); }) } createPeopleHTML(); function renderPeople(people) { peopleList.innerHTML = ''; - const peopleHtml = people.map(human => createHuman(human)); - peopleList.append(...peopleHtml); + const peopleHTML = people.map(human => createHuman(human)); + peopleList.append(...peopleHTML); } function convertGender(person) { @@ -56,7 +55,7 @@ function coloringCards(person, human) { const state = { - sortBy: 'by-alphabet__a-z', + sortBy: 'value', filterGenderBy: 'value', }; @@ -72,51 +71,51 @@ function getCurrentInputId(elements) { return currentInputId; } -function processMainData({currentTarget}) { - const InputSortingId = getCurrentInputId(currentTarget.elements.sorting); - state.sortBy = InputSortingId; +function processMainData({ currentTarget }) { + if (currentTarget.elements.sorting.value == 'on') { + const InputSortingId = getCurrentInputId(currentTarget.elements.sorting); + state.sortBy = InputSortingId; + } const InputGenderId = getCurrentInputId(currentTarget.elements.gender); state.filterGenderBy = InputGenderId; let sortedPeople; - if (state.sortBy == 'sort-by-age__ascending' || state.sortBy == 'sort-by-age__descending') { + if (state.sortBy.includes('age')) { sortedPeople = sortByAge(receivedPeople); } else { sortedPeople = sortByAlphabet(receivedPeople); } - const filteredPeople = filterByGender(sortedPeople); + const filteredPeopleByGender = filterByGender(sortedPeople); const InputNameValue = currentTarget.elements.name.value; - const filteredByName = filterByName(InputNameValue, filteredPeople); + const filteredPeopleByName = filterByName(InputNameValue, filteredPeopleByGender); - renderPeople(filteredByName); + renderPeople(filteredPeopleByName); } function filterByGender(people) { if (state.filterGenderBy === 'gender__all') return people; return people.filter(human => { return human.gender == state.filterGenderBy; - }); + }) } function sortByAge(people) { const copyPeople = [...people]; const sorterByAge = (a, b) => a.dob.age - b.dob.age; - if (state.sortBy == 'sort-by-age__ascending') { - copyPeople.sort(sorterByAge); - } else { - copyPeople.sort((a, b) => sorterByAge(b, a)); - } + if (state.sortBy == 'sort-by-age__ascending') copyPeople.sort(sorterByAge); + if (state.sortBy == 'sort-by-age__descending') copyPeople.sort((a, b) => sorterByAge(b, a)); return copyPeople; } function sortByAlphabet(people) { - if (state.sortBy == 'by-alphabet__a-z') people.sort((a,b) => a.name.first.localeCompare(b.name.first)); - if (state.sortBy == 'by-alphabet__z-a') people.reverse((a,b) => a.name.first.localeCompare(b.name.first)); - return people; + const copyPeople = [...people]; + if (state.sortBy == 'by-alphabet__a-z') copyPeople.sort((a, b) => a.name.first.localeCompare(b.name.first)); + if (state.sortBy == 'by-alphabet__z-a') copyPeople.sort((b, a) => a.name.first.localeCompare(b.name.first)); + return copyPeople; } function filterByName(inputNameValue, people) { @@ -127,7 +126,6 @@ function filterByName(inputNameValue, people) { function resetFilters() { form.reset(); - state.sortBy = 'by-alphabet__a-z'; - sortByAlphabet(receivedPeople); + state.sortBy = 'value'; renderPeople(receivedPeople); } diff --git a/submissions/Mifaresss/friends-app/styles.css b/submissions/Mifaresss/friends-app/styles.css index 174a4baabc..8b076f94bf 100644 --- a/submissions/Mifaresss/friends-app/styles.css +++ b/submissions/Mifaresss/friends-app/styles.css @@ -18,6 +18,16 @@ body { background-attachment: fixed; background-position: top; } +body::-webkit-scrollbar { + width: 13px; +} +body::-webkit-scrollbar-track { + background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 40%, rgba(154,154,154,1) 40%, rgba(154,154,154,1) 50%, rgba(154,154,154,1) 60%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%); +} +body::-webkit-scrollbar-thumb { + background: linear-gradient(90deg, #f598a8, #b5b4af); + border-radius: 5px; +} .wrapper { display: flex; flex-direction: column;