From 11d1a6f7bf1347313b06a020fa349cf8cee6164f Mon Sep 17 00:00:00 2001 From: Serge Date: Fri, 30 Sep 2022 23:27:35 +0300 Subject: [PATCH 1/2] added raw files for Friends App task --- submissions/Serge044/FriendsApp/index.html | 30 ++++ submissions/Serge044/FriendsApp/script.js | 115 +++++++++++++ submissions/Serge044/FriendsApp/style.css | 188 +++++++++++++++++++++ 3 files changed, 333 insertions(+) create mode 100644 submissions/Serge044/FriendsApp/index.html create mode 100644 submissions/Serge044/FriendsApp/script.js create mode 100644 submissions/Serge044/FriendsApp/style.css diff --git a/submissions/Serge044/FriendsApp/index.html b/submissions/Serge044/FriendsApp/index.html new file mode 100644 index 0000000000..cfe99335ae --- /dev/null +++ b/submissions/Serge044/FriendsApp/index.html @@ -0,0 +1,30 @@ + + + + + Friends App + + + + + +
+
+
+
+

Friends App

+
+ + +
+
+
+
+
+
+ + + + diff --git a/submissions/Serge044/FriendsApp/script.js b/submissions/Serge044/FriendsApp/script.js new file mode 100644 index 0000000000..a8f1be6684 --- /dev/null +++ b/submissions/Serge044/FriendsApp/script.js @@ -0,0 +1,115 @@ +window.addEventListener("load", windowLoad); + +function windowLoad() { + //HTML + const htmlBlock = document.documentElement; + + // get saved theme + const saveUserTheme = localStorage.getItem("user-theme"); + + // work with system configurations + let userTheme; + if (window.matchMedia) { + userTheme = window.matchMedia("(prefers-color-scheme: dark)").matches + ? "dark" + : "light"; + } + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", (e) => { + !saveUserTheme ? changeTheme() : null; + }); + + // change theme by click + const themeButton = document.querySelector(".page__theme"); + const resetButton = document.querySelector(".page__reset"); + if (themeButton) { + themeButton.addEventListener("click", function (e) { + resetButton.classList.add("active"); + changeTheme(true); + }); + } + if (resetButton) { + resetButton.addEventListener("click", function (e) { + resetButton.classList.remove("active"); + localStorage.setItem("user-theme", ""); + }); + } + + // function add theme class + function setThemeClass() { + if (saveUserTheme) { + htmlBlock.classList.add(saveUserTheme); + resetButton.classList.add("active"); + } else { + htmlBlock.classList.add(userTheme); + } + } + // add theme class + setThemeClass(); + + // function change theme + function changeTheme(saveTheme = false) { + let currentTheme = htmlBlock.classList.contains("light") ? "light" : "dark"; + let newTheme; + + if (currentTheme === "light") { + newTheme = "dark"; + } else if (currentTheme === "dark") { + newTheme = "light"; + } + htmlBlock.classList.remove(currentTheme); + htmlBlock.classList.add(newTheme); + saveTheme ? localStorage.setItem("user-theme", newTheme) : null; + } +} + +// get 10 cards +fetch("https://randomuser.me/api/?results=10") + .then((res) => res.json()) + .then((data) => { + let cards = data.results; + + let result = ""; + + cards.forEach(function (lists) { + result += ` +
+
+
+
+
+
${lists.name.first} ${lists.name.last}
+
${lists.gender}
+
+
+ +
+ +
+

age-image:

+
${lists.dob.age}
+
+ +
+

location-image:

+
${lists.location.city}, ${lists.location.country}
+
+ +
+

phone-image:

+
${lists.cell}
+
+ +
+

email-image:

+
${lists.email}
+
+ +
+
+
`; + }); + + document.getElementById("result").innerHTML = result; + }); diff --git a/submissions/Serge044/FriendsApp/style.css b/submissions/Serge044/FriendsApp/style.css new file mode 100644 index 0000000000..82cff160b5 --- /dev/null +++ b/submissions/Serge044/FriendsApp/style.css @@ -0,0 +1,188 @@ +/* --to null-- */ +*, +*::before, +*::after { + padding: 0; + margin: 0; + border: 0; + box-sizing: border-box; +} +a { + text-decoration: none; +} +ul, +ol, +li { + list-style: none; +} +img { + vertical-align: top; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: inherit; + font-size: inherit; +} +html, +body { + height: 100%; + line-height: 1; + font-size: 14px; + color: #fff; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; +} + +h1 { + font-size: 30px; + margin: 0px 0px 30px 0px; +} +.wrapper { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +/* ------------------ */ + +body { + display: flex; + flex-direction: row; + transition: all 0.3s ease 0s; + background-color: #fff; + color: black; + position: relative; +} + +.page__container { + position: absolute; + top: 20px; + left: 10px; + min-width: 350px; +} + +#btn { + width: 50px; + height: 50px; +} + +html.dark body { + color: #fff; + background-color: black; +} + +html.light body { + color: black; + background-color: #fff; +} + +html.dark .page__theme { + /* background: url(../images/sun.png) 0 0 / 100% no-repeat; */ + background-color: white; + border-radius: 20%; +} + +html.light .page__theme { + /* background: url(../images/moon.png) 0 0 / 100% no-repeat; */ + background-color: black; + border-radius: 20%; +} + +.page__reset { + opacity: 0; + visibility: hidden; +} + +.page__reset.active { + opacity: 1; + visibility: visible; +} + +.page__reset::before { + content: "x"; + position: absolute; + top: 0; + right: 0; + cursor: pointer; + width: 12px; + height: 12px; + font-size: 14px; + border-radius: 50%; + line-height: 10px; + color: #fff; + text-align: center; + background-color: #667; +} + +.page__title, .page__action { + display: inline-block; + } + + .page__action { + position: absolute; + right: 20px; + } + +/* -------------------------------------- */ + +#result { + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.friend-card { + margin: 20px; + height: 500px; + width: 350px; + border: 2px solid rgb(16, 15, 15); + border-radius: 5px; + box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; +} + +.card-top { + background-color: gray; + padding: 15px; + text-align: center; + border-radius: 2px 2px 0 0; +} +.card-top img { + border-radius: 20%; + border: 5px solid beige; +} + +.card-bottom { + padding: 10px; + background-color: rgba(142, 181, 181, 0.777); +} + +.card-bottom .bullet { + padding: 10px; + background-color: rgba(153, 83, 223, 0.817); + margin-bottom: 10px; + border-radius: 5px; + display: flex; +} + +.icons { + color: violet; + margin-right: 10px; +} + +#name { + padding-top: 10px; + font-size: 25px; +} + +#gender { + font-size: 14px; +} + +.title { + font-size: 35px; + color: blueviolet; +} From 55de0b0a8daaf8fc61ac9957f0fe9f900467a9be Mon Sep 17 00:00:00 2001 From: Serge Date: Sat, 1 Oct 2022 18:21:25 +0300 Subject: [PATCH 2/2] added visual design for menu sort --- submissions/Serge044/FriendsApp/index.html | 31 +++++++++- submissions/Serge044/FriendsApp/style.css | 70 +++++++++++++++++++++- 2 files changed, 97 insertions(+), 4 deletions(-) diff --git a/submissions/Serge044/FriendsApp/index.html b/submissions/Serge044/FriendsApp/index.html index cfe99335ae..3afcf89956 100644 --- a/submissions/Serge044/FriendsApp/index.html +++ b/submissions/Serge044/FriendsApp/index.html @@ -20,7 +20,36 @@

Friends App

-
+
+
+
+ +
+

sort-by-age

+ + +
+ + +
+

sort-by-name

+ + +
+ +
+

sort-by-sex

+ + + +
+ +
+ +
+ +
+
diff --git a/submissions/Serge044/FriendsApp/style.css b/submissions/Serge044/FriendsApp/style.css index 82cff160b5..6118c60a7f 100644 --- a/submissions/Serge044/FriendsApp/style.css +++ b/submissions/Serge044/FriendsApp/style.css @@ -67,6 +67,7 @@ body { #btn { width: 50px; height: 50px; + cursor: pointer; } html.dark body { @@ -128,6 +129,15 @@ html.light .page__theme { /* -------------------------------------- */ +.page__header { + display: flex; + margin-left: 20px; + background-color: rgba(74, 178, 243, 0.46); + border-radius: 5px 0 0 5px; + align-items: center; + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;; +} + #result { width: 100%; display: flex; @@ -182,7 +192,61 @@ html.light .page__theme { font-size: 14px; } -.title { - font-size: 35px; - color: blueviolet; +.page__title { + font-size: 35px; + font-weight: bold; + font-style: italic; +} + +.menu-sort { + display: flex; + justify-content: center; + flex-direction: column; + margin-top: 18px; + margin-right: 20px; + width: 300px; + height: 400px; + background-color: rgba(142, 181, 181, 0.777); + border-radius: 5px; + border: 2px solid rgb(16, 15, 15); + box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;; +} + +.page__content { + display: flex; +} + +.bullet-sort { + height: 50px; + padding: 10px; + background-color: rgba(153, 83, 223, 0.817); + margin: 10px; + border-radius: 5px; + display: flex; + align-items: center; + +} + +.btn_sort { + margin: 5px; + width: 30px; + border-radius: 50%; + cursor: pointer; + color: black; + font-size: 15px; +} + +.btn_sort-reset { + width: 50px; + height: 30px; + border-radius: 5px; + cursor: pointer; +} + +.btn_sort-reset:hover { + background-color: rgba(255, 18, 18, 0.52); +} + +.btn_sort:hover { + background-color: violet; }