diff --git a/docs/SviatoslavTaranenko/Games.html b/docs/SviatoslavTaranenko/Games.html new file mode 100644 index 00000000..43411372 --- /dev/null +++ b/docs/SviatoslavTaranenko/Games.html @@ -0,0 +1,133 @@ + + + + + + + + Games Project - Games + + +
+
+ Logo +
+
+ Calculator +
+
+ Games +
+
+ About +
+ +
+
+
+
+
+ +
+
+
+ + +
+
+ + +
+
+
+
+ + + +
+
+ + + +
+
+
+ + + + +
+
+
+

Study project "Games"

+ +
Loading...
+ +
+ + + + + + diff --git a/docs/SviatoslavTaranenko/Login.html b/docs/SviatoslavTaranenko/Login.html new file mode 100644 index 00000000..cbfecf01 --- /dev/null +++ b/docs/SviatoslavTaranenko/Login.html @@ -0,0 +1,85 @@ + + + + + + + + Games Project - Login + + +
+
+ Logo +
+
+ Calculator +
+
+ Games +
+
+ About +
+ +
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+ + + + diff --git a/docs/SviatoslavTaranenko/LoginDone.html b/docs/SviatoslavTaranenko/LoginDone.html new file mode 100644 index 00000000..7523db2e --- /dev/null +++ b/docs/SviatoslavTaranenko/LoginDone.html @@ -0,0 +1,22 @@ + + + + + + + + Games Project - Login Done + + +
+

Perfectly

+

You have successfully

+

logged into your account

+
+
+ +
+
+
+ + diff --git a/docs/SviatoslavTaranenko/Styles/Games.css b/docs/SviatoslavTaranenko/Styles/Games.css new file mode 100644 index 00000000..6e21138e --- /dev/null +++ b/docs/SviatoslavTaranenko/Styles/Games.css @@ -0,0 +1,615 @@ +body { + margin: 0; + padding: 0; + min-width: 300px; + display: flex; + flex-direction: column; +} + +.loading-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 50%); + align-items: center; + justify-content: center; + color: #FFF; + font-size: 24px; + font-family: "Roboto", sans-serif; +} + +.header { + border: none; + width: 100%; + background-color: #EF4934; +} + +.header__all { + display: grid; + grid-template-columns: 6fr 1fr; +} + +.header__img { + margin-top: 8px; + margin-bottom: 8px; + width: 55px; + height: 55px; + justify-content: center; + margin-left: 61px; +} + +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + +.header__items { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + align-items: center; +} + +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + +.header__items a { + text-decoration: none; + color: #FFF; +} + +.header__items_Calculator { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 18.75px; + margin-right: 40px; +} + +.header__items_Calculator:active { + text-decoration: underline; +} + +.header__items_Games { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Games:active { + text-decoration: underline; +} + +.header__items_About { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_About:active { + text-decoration: underline; +} + +.header__items_Login { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Login:active { + text-decoration: underline; +} + +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + +.games__filter { + display: flex; + width: 100%; + min-height: 60px; + background-color: #221F1F; + align-items: center; + justify-content: space-around; +} + +@media (max-width: 1120px) { + + .games__filter { + padding: 10px 0; + display: flex; + flex-wrap: wrap; + width: 100%; + min-height: 60px; + background-color: #221F1F; + align-items: center; + gap: 25px; + } +} + +.datalist__games_filter select { + min-width: 114px; + border: none; + background-color: #333; + appearance: none; + min-height: 36px; + border-radius: 6px; + align-items: center; + gap: 33px; + padding: 0 12px; + background-image: url("../img/arrow.png"); + background-repeat: no-repeat; + background-position: calc(100% - 15px); + color: #FFF; + font-family: "Roboto", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + cursor: not-allowed; +} + +.radio__filter { + display: flex; + gap: 12px; + max-width: 240px; +} + +.radio__games_filter { + display: flex; +} + +.radio__games_filter input { + appearance: none; + z-index: -1; + opacity: 0; + gap: 20px; + cursor: not-allowed; +} + +.radio__games_filter label { + cursor: not-allowed; + font-family: "Roboto", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + color: #FFF; + display: flex; + align-items: center; + gap: 12px; + position: relative; +} + +.radio__games_filter label::before { + content: ""; + display: block; + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid #FFF; + transition: background-color 300ms; +} + +.radio__games_filter label::after { + content: ""; + display: block; + width: 10px; + height: 10px; + border-radius: 10px; + opacity: 0; + background: #FFF; + position: absolute; + left: 6px; +} + +.checkbox__games_filter label::before { + content: ""; + display: flex; + width: 20px; + height: 20px; + border-radius: 6px; + border: 1px solid #FFF; + padding: 3px; + background-color: #221F1F; + margin-right: 12px; + text-align: center; + line-height: 16px; + font-size: 16px; + transition: background-color 300ms; +} + +.checkbox__games_filter label::after { + content: ""; + display: block; + width: 14px; + height: 14px; + background: url("../img/check-white.png"); + background-repeat: no-repeat; + opacity: 0; + position: absolute; + top: 10px; + left: 8px; +} + +.radio__games_filter input:checked + label::before { + background-color: #221F1F; +} + +.radio__games_filter input:checked + label::after { + opacity: 1; +} + +.checkbox__filter { + display: flex; + align-items: center; + gap: 90px; + max-width: 80px; + padding-right: 100px; + cursor: not-allowed; +} + +.checkbox__games_filter { + display: flex; + align-items: center; + gap: 12px; + cursor: not-allowed; +} + +.checkbox__games_filter input { + appearance: none; + position: absolute; + z-index: -1; + opacity: 0; + width: 20px; + height: 20px; + background-color: #FFF; + cursor: not-allowed; +} + +.checkbox__games_filter label { + cursor: not-allowed; + font-family: "Roboto", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + color: #FFF; + position: absolute; + display: flex; + align-items: center; +} + +.checkbox__games_filter input:checked + label::before { + background-color: #221F1F +} + +.checkbox__games_filter input:checked + label::after { + opacity: 1; +} + +.search__bar { + display: flex; + padding-left: 20px; + width: 100%; + max-width: 377px; + height: 36px; + align-items: center; + border-radius: 6px; + background-color: #FFF; + background-image: url("../img/Icons.png"); + background-position: left 5px center; + background-size: 24px 24px; + background-repeat: no-repeat; + cursor: not-allowed; + + @media (max-width: 400px) { + max-width: 250px; + } + + @media (max-width: 280px) { + max-width: 180px; + } +} + +.search__bar input { + background: transparent; + flex: 1; + border: 0; + outline: none; + padding-left: 15px; + font-family: "Roboto", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + cursor: not-allowed; +} + +.search__bar button { + display: flex; + height: 36px; + width: 25%; + padding: 13px 20px; + border: 0; + border-radius: 0 6px 6px 0; + align-items: center; + justify-content: center; + background-color: #EF4934; + font-family: "Roboto", sans-serif; + font-size: 14px; + font-style: normal; + font-weight: 400; + color: #FFF; + cursor: not-allowed; +} + +.search__bar button:active { + box-shadow: 0 0 0 1px #A9A9A9; +} + +.Games .Games__title { + margin: 60px 0 0 85px; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 32px; +} + +@media (max-width: 940px) { + + .Games .Games__title { + margin: 60px 0 0 85px; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 32px; + } +} + +@media (max-width: 670px) { + + .Games .Games__title { + display: flex; + align-content: center; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 32px; + } +} + +@media (max-width: 340px) { + + .Games .Games__title { + margin: 40px 0 20px 55px; + display: flex; + align-content: center; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 24px; + } +} + +.card__container { + margin-top: 60px; + display: grid; + grid-template-columns: 275px 275px 275px 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + justify-content: center; + min-height: auto; +} + +@media (max-width: 1250px) { + + .card__container { + margin-top: 60px; + display: grid; + grid-template-columns: 275px 275px 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + justify-content: center; + min-height: auto; + } +} + +@media (max-width: 970px) { + + .card__container { + margin: 60px 60px 0 0; + display: grid; + grid-template-columns: 275px 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + align-content: center; + justify-content: center; + min-height: auto; + } +} + +@media (max-width: 670px) { + + .card__container { + margin: 60px 60px 0 0; + display: grid; + grid-template-columns: 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + align-content: center; + justify-content: center; + min-height: auto; + } +} + +@media (max-width: 340px) { + + .card__container { + display: grid; + grid-template-columns: 250px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + align-content: center; + justify-content: center; + min-height: auto; + } +} + +.Games__cards_desc { + margin-bottom: 5px; + border-radius: 12px; + padding: 12px 12px 22px; + background-color: #ECECEC; + height: 280px; +} + +.Games__cards_top { + display: grid; + grid-template-columns: 1fr 2fr; + column-gap: 12px; + grid-template-rows: 90px; + row-gap: 16px; + justify-content: center; +} + +.Games__cards_top_img { + width: 90px; + height: 90px; + justify-content: center; + border-radius: 8px; +} + +.Games__cards_top_text { + padding-top: 0; + margin-top: 0; +} + +.Games__cards_top_text_title { + padding-top: 0; + margin-top: 0; + margin-bottom: 0; + padding-bottom: 0; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 18px; + line-height: 21px; +} + +.Games__cards_top_text_p { + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + margin-top: 0; +} + +.Games__cards_btm { + padding-top: 5px; +} + +.Games__cards_btm { + padding-top: 10px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; +} + +.footer { + background-color: #221F1F; + border: none; + width: 100%; + min-height: 100px; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; +} diff --git a/docs/SviatoslavTaranenko/Styles/Login.css b/docs/SviatoslavTaranenko/Styles/Login.css new file mode 100644 index 00000000..1bc2b5c2 --- /dev/null +++ b/docs/SviatoslavTaranenko/Styles/Login.css @@ -0,0 +1,436 @@ +body { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +.header { + border: none; + width: 100%; + background-color: #EF4934; +} + +.header__all { + display: grid; + grid-template-columns: 6fr 1fr; +} + +.header__img { + margin-top: 8px; + margin-bottom: 8px; + width: 55px; + height: 55px; + justify-content: center; + margin-left: 61px; +} + +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + +.header__items { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + align-items: center; +} + +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + +.header__items a { + text-decoration: none; + color: #FFF; +} + +.header__items_Calculator { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 18.75px; + margin-right: 40px; +} + +.header__items_Calculator:active { + text-decoration: underline; +} + +.header__items_Games { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Games:active { + text-decoration: underline; +} + +.header__items_About { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_About:active { + text-decoration: underline; +} + +.header__items_Login { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Login:active { + text-decoration: underline; +} + +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + +.Login__table { + margin: 0 auto; + max-width: 575px; + + @media (max-width: 670px) { + max-width: 500px; + } + + @media (max-width: 500px) { + max-width: 300px; + } +} + +.Login__table_title { + display: flex; + justify-content: center; + color: #221F1F; + font-family: "Roboto", sans-serif; + font-size: 48px; + font-weight: 700; + line-height: 32px; + + @media (max-width: 670px) { + display: flex; + justify-content: center; + font-size: 36px; + line-height: 24px; + } + + @media (max-width: 430px) { + display: flex; + justify-content: center; + font-size: 24px; + line-height: 20px; + } +} + +.Login__table_email { + margin-top: 20px; +} + +.Login__table_email_title { + color: #221F1F; + font-family: "Roboto", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 26px; + padding-top: 10px; + + @media (max-width: 670px) { + font-size: 20px; + line-height: 24px; + } + + @media (max-width: 500px) { + font-size: 16px; + line-height: 20px; + } +} + +.Login__table_email_input { + display: flex; + justify-content: center; + border: solid 1px #A9A9A9; + border-radius: 6px; + min-width: 575px; + min-height: 40px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + + @media (max-width: 670px) { + display: flex; + justify-content: center; + min-width: 500px; + min-height: 35px; + font-size: 12px; + line-height: 19px; + } + + @media (max-width: 500px) { + display: flex; + justify-content: center; + min-width: 300px; + min-height: 30px; + font-size: 10px; + line-height: 17px; + } +} + +.Login__table_password { + margin-top: 20px; +} + +.Login__table_password_title { + color: #221F1F; + font-family: "Roboto", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 26px; + padding-top: 20px; + + @media (max-width: 670px) { + display: block; + font-size: 20px; + line-height: 24px; + } + + @media (max-width: 500px) { + display: block; + font-size: 16px; + line-height: 20px; + } +} + +.Login__table_password_input { + display: flex; + justify-content: center; + border: solid 1px #A9A9A9; + border-radius: 6px; + min-width: 575px; + min-height: 40px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + + @media (max-width: 670px) { + display: flex; + justify-content: center; + min-width: 500px; + min-height: 35px; + font-size: 12px; + line-height: 19px; + } + + @media (max-width: 500px) { + display: flex; + justify-content: center; + min-width: 300px; + min-height: 30px; + font-size: 10px; + line-height: 17px; + } +} + +.Login__table_verif { + display: flex; + align-items: center; + margin: 10px 0; + padding-top: 10px; +} + +.Login__table_verif_input { + position: absolute; + -webkit-appearance: none; + width: 20px; + height: 20px; + border-radius: 6px; + border: 1px solid #EF4934; + cursor: pointer; +} + +.Login__table_verif_text { + position: relative; + cursor: pointer; +} + +.Login__table_verif_input:checked + label::after { + content: ""; + position: absolute; + left: 10px; + width: 6px; + height: 14px; + border: solid #EF4934; + border-width: 0 2px 2px 0; + transform: rotate(45deg); +} + +.Login__table_verif_input::before { + content: ""; + color: transparent; + display: block; + border-color: #FFF; + background-size: contain; +} + +.Login__table_verif_text { + font-family: "Roboto", sans-serif; + font-size: 14px; + font-weight: 400; + line-height: 21px; + color: #221F1F; + padding-left: 30px; + + @media (max-width: 500px) { + font-size: 10px; + } +} + +.errors-container { + font-family: "Roboto", sans-serif; + font-size: 14px; + margin-top: 10px; + color: #FF2E2EBA; + + @media (max-width: 500px) { + font-size: 10px; + } +} + +.Login__table_btn { + padding-top: 10px; +} + +.Login__table_btn_name { + min-width: 580px; + min-height: 55px; + border-radius: 6px; + background-color: #EF4934; + font-family: "Roboto", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 26px; + color: #FFF; + border: none; + cursor: pointer; + + @media (max-width: 670px) { + min-width: 500px; + min-height: 35px; + font-size: 20px; + line-height: 24px; + } + + @media (max-width: 500px) { + min-width: 305px; + min-height: 30px; + font-size: 16px; + line-height: 20px; + } +} + +.Login__table_btn_name:active { + box-shadow: 0 0 0 1px #A9A9A9; +} + +.footer { + margin-top: 100px; + background-color: #333; + color: #FFF; + padding: 10px; + text-align: center; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; +} diff --git a/docs/SviatoslavTaranenko/Styles/LoginDone.css b/docs/SviatoslavTaranenko/Styles/LoginDone.css new file mode 100644 index 00000000..19a4baae --- /dev/null +++ b/docs/SviatoslavTaranenko/Styles/LoginDone.css @@ -0,0 +1,64 @@ +.Login_Done { + margin: auto; + max-width: 575px; +} + +.Login_Done_title { + display: flex; + justify-content: center; + color: #221F1F; + font-family: "Roboto", sans-serif; + font-size: 48px; + font-weight: 700; + line-height: 40px; + text-align: center; + align-content: center; +} + +.Login_Done_text { + display: flex; + justify-content: center; + color: #221F1F; + font-family: "Roboto", sans-serif; + font-size: 48px; + font-weight: 400; + text-align: center; + align-content: center; +} + +.Login__table_btn { + padding-top: 10px; +} + +.Login__table_btn a { + text-decoration: none; + color: #FFF; +} + +.Login__table_btn_name { + min-width: 575px; + min-height: 60px; + border-radius: 6px; + background-color: #EF4934; + font-family: "Roboto", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 26px; + color: #FFF; + border: none; + cursor: pointer; + + @media (max-width: 600px) { + min-width: 300px; + display: flex; + margin: 0 auto; + justify-content: center; + align-content: center; + text-align: center; + align-items: center; + } +} + +.Login__table_btn_name:active { + box-shadow: 0 0 0 1px #A9A9A9; +} diff --git a/docs/SviatoslavTaranenko/Styles/calculator.css b/docs/SviatoslavTaranenko/Styles/calculator.css new file mode 100644 index 00000000..214c939f --- /dev/null +++ b/docs/SviatoslavTaranenko/Styles/calculator.css @@ -0,0 +1,291 @@ +body { + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + min-width: 250px; +} + +.header { + border: none; + width: 100%; + background-color: #EF4934; +} + +.header__all { + display: grid; + grid-template-columns: 6fr 1fr; +} + +.header__img { + margin-top: 8px; + margin-bottom: 8px; + width: 55px; + height: 55px; + justify-content: center; + margin-left: 61px; +} + +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + +.header__items { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + align-items: center; +} + +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + +.header__items a { + text-decoration: none; + color: #FFF; +} + +.header__items_Calculator { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 18.75px; + margin-right: 40px; +} + +.header__items_Calculator:active { + text-decoration: underline; +} + +.header__items_Games { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Games:active { + text-decoration: underline; +} + +.header__items_About { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_About:active { + text-decoration: underline; +} + +.header__items_Login { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Login:active { + text-decoration: underline; +} + +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + +.title { + display: flex; + justify-content: center; + color: #221F1F; + font-family: "Roboto", sans-serif; + font-size: 48px; + font-weight: 700; + line-height: 32px; + + @media (max-width: 700px) { + font-size: 36px; + } + + @media (max-width: 300px) { + font-size: 24px; + } +} + +.field { + display: flex; + justify-content: center; + column-gap: 10px; + margin: 20px; + + @media (max-width: 700px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } +} + +input { + border: solid 1px #A9A9A9; + border-radius: 6px; + min-width: 6px; + min-height: 40px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + + @media (max-width: 700px) { + margin: 5px 0; + } +} + +select { + border: solid 1px #A9A9A9; + border-radius: 6px; + min-width: 6px; + min-height: 45px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 21px; + text-align: center; + + @media (max-width: 700px) { + margin: 5px 0; + } +} + +button { + min-width: 60px; + min-height: 40px; + border-radius: 6px; + background-color: #EF4934; + font-family: "Roboto", sans-serif; + font-size: 22px; + font-weight: 600; + line-height: 26px; + color: #FFF; + border: none; + cursor: pointer; + + @media (max-width: 700px) { + margin: 5px 0; + } +} + +button:active { + box-shadow: 0 0 0 1px #A9A9A9; +} + +span { + border: solid 1px #A9A9A9; + border-radius: 6px; + min-width: 155px; + min-height: 40px; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 42px; + text-align: center; + + @media (max-width: 700px) { + margin: 5px 0; + } +} + +.footer { + margin-top: auto; + background-color: #333; + color: #FFF; + padding: 10px; + text-align: center; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; +} diff --git a/docs/SviatoslavTaranenko/Styles/style.css b/docs/SviatoslavTaranenko/Styles/style.css new file mode 100644 index 00000000..89dd027f --- /dev/null +++ b/docs/SviatoslavTaranenko/Styles/style.css @@ -0,0 +1,250 @@ +body { + margin: 0; + padding: 0; + min-width: 300px; + display: flex; + flex-direction: column; +} + +.header { + border: none; + width: 100%; + background-color: #EF4934; +} + +.header__all { + display: grid; + grid-template-columns: 6fr 1fr; +} + +.header__img { + margin-top: 8px; + margin-bottom: 8px; + width: 55px; + height: 55px; + justify-content: center; + margin-left: 61px; +} + +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + +.header__items { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + align-items: center; +} + +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + +.header__items a { + text-decoration: none; + color: #FFF; +} + +.header__items_Calculator { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 18.75px; + margin-right: 40px; +} + +.header__items_Calculator:active { + text-decoration: underline; +} + +.header__items_Games { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Games:active { + text-decoration: underline; +} + +.header__items_About { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_About:active { + text-decoration: underline; +} + +.header__items_Login { + color: #FFF; + font-family: "Roboto", sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 19px; + margin-right: 40px; +} + +.header__items_Login:active { + text-decoration: underline; +} + +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + +.about .about__all { + margin: 60px; + display: grid; + grid-template-columns: 1fr 1fr; + justify-content: center; +} + +@media (max-width: 1220px) { + + .about .about__all { + display: flex; + flex-direction: column; + } +} + +@media (max-width: 1220px) { + + .about__img { + display: flex; + justify-content: center; + align-content: center; + align-items: center; + } +} + +.about__all .about__text .about__text_title { + margin-top: 0; + padding-top: 0; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 48px; + line-height: 32px; + color: #221F1F; + + @media (max-width: 1220px) { + display: flex; + margin-top: 25px; + justify-content: center; + align-content: center; + align-items: center; + } +} + +.about__all .about__text .about__text_inf { + color: #221F1F; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + + @media (max-width: 1220px) { + margin-top: 25px; + justify-content: center; + align-content: center; + align-items: center; + } +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; +} + +.about__all .about__text .about__text_link { + color: #EF4934; +} + +.footer { + margin-top: auto; + background-color: #333; + color: #FFF; + padding: 10px; + text-align: center; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} diff --git a/docs/SviatoslavTaranenko/calculator.html b/docs/SviatoslavTaranenko/calculator.html new file mode 100644 index 00000000..001c633d --- /dev/null +++ b/docs/SviatoslavTaranenko/calculator.html @@ -0,0 +1,79 @@ + + + + + Basic JS + + + + + +
+
+ Logo +
+
+ Calculator +
+
+ Games +
+
+ About +
+ +
+
+
+

Calculator v. 1

+
+ + + + + +
+ + + + + diff --git a/docs/SviatoslavTaranenko/img/Icons.png b/docs/SviatoslavTaranenko/img/Icons.png new file mode 100644 index 00000000..d2e797d2 Binary files /dev/null and b/docs/SviatoslavTaranenko/img/Icons.png differ diff --git a/docs/SviatoslavTaranenko/img/Instagram.png b/docs/SviatoslavTaranenko/img/Instagram.png new file mode 100644 index 00000000..748dd0cd Binary files /dev/null and b/docs/SviatoslavTaranenko/img/Instagram.png differ diff --git a/docs/SviatoslavTaranenko/img/LinkedIn.png b/docs/SviatoslavTaranenko/img/LinkedIn.png new file mode 100644 index 00000000..990339ae Binary files /dev/null and b/docs/SviatoslavTaranenko/img/LinkedIn.png differ diff --git a/docs/SviatoslavTaranenko/img/Rectangle 7.png b/docs/SviatoslavTaranenko/img/Rectangle 7.png new file mode 100644 index 00000000..ce1b899a Binary files /dev/null and b/docs/SviatoslavTaranenko/img/Rectangle 7.png differ diff --git a/docs/SviatoslavTaranenko/img/arrow.png b/docs/SviatoslavTaranenko/img/arrow.png new file mode 100644 index 00000000..68f4f73a Binary files /dev/null and b/docs/SviatoslavTaranenko/img/arrow.png differ diff --git a/docs/SviatoslavTaranenko/img/check-white.png b/docs/SviatoslavTaranenko/img/check-white.png new file mode 100644 index 00000000..c163ae9b Binary files /dev/null and b/docs/SviatoslavTaranenko/img/check-white.png differ diff --git a/docs/SviatoslavTaranenko/img/check.png b/docs/SviatoslavTaranenko/img/check.png new file mode 100644 index 00000000..a18c88cb Binary files /dev/null and b/docs/SviatoslavTaranenko/img/check.png differ diff --git a/docs/SviatoslavTaranenko/img/facebook.png b/docs/SviatoslavTaranenko/img/facebook.png new file mode 100644 index 00000000..7c082513 Binary files /dev/null and b/docs/SviatoslavTaranenko/img/facebook.png differ diff --git a/docs/SviatoslavTaranenko/img/image.png b/docs/SviatoslavTaranenko/img/image.png new file mode 100644 index 00000000..1766e224 Binary files /dev/null and b/docs/SviatoslavTaranenko/img/image.png differ diff --git a/docs/SviatoslavTaranenko/img/logo.png b/docs/SviatoslavTaranenko/img/logo.png new file mode 100644 index 00000000..3b724d74 Binary files /dev/null and b/docs/SviatoslavTaranenko/img/logo.png differ diff --git a/docs/SviatoslavTaranenko/index.html b/docs/SviatoslavTaranenko/index.html new file mode 100644 index 00000000..a6b28984 --- /dev/null +++ b/docs/SviatoslavTaranenko/index.html @@ -0,0 +1,86 @@ + + + + + + + + + Games Project - About + + +
+
+ Logo +
+
+ Calculator +
+
+ Games +
+
+ About +
+ +
+
+
+
+
+
+ Desc +
+ +
+

About me

+

+ Hi! My name is Sviatoslav and I'm a Junior Frontend Developer.
+ I am already familiar with main Web Technologies like
+ HTML, CSS, JavaScript and Git version control system. +

+

+ This page was developed during the course + 'Frontend for + beginners' from Masters Academy in 2023. +

+

+ This is a social project from MOCG company where I got
an opportunity to work with Frontend mentors and to create my own small project for the portfolio. +

+

+ You can contact me via instagram: sviat_taranenko and/or check out my + GitHub. +

+
+
+
+ + + diff --git a/docs/SviatoslavTaranenko/scripts/Games.js b/docs/SviatoslavTaranenko/scripts/Games.js new file mode 100644 index 00000000..e552c3b5 --- /dev/null +++ b/docs/SviatoslavTaranenko/scripts/Games.js @@ -0,0 +1,108 @@ +function createCardElement(game) { + const template = document.querySelector('.card-template'); + + if (!template) { + console.error('Template not found'); + return null; + } + + const clone = document.importNode(template.content, true); + + const gameTopImgElement = clone.querySelector('[data-type="Games__cards_top_img"]'); + if (gameTopImgElement) { + gameTopImgElement.src = game.thumbnail; + gameTopImgElement.alt = `Thumbnail for ${game.title}`; + } else { + console.error('Element with data-type "Games__cards_top_img" not found'); + } + + const gameTitleElement = clone.querySelector('[data-type="Games__cards_top_text_title"]'); + if (gameTitleElement) { + gameTitleElement.textContent = game.title; + } else { + console.error('Element with data-type "Games__cards_top_text_title" not found'); + } + + const gameDescriptionElement = clone.querySelector('[data-type="Games__cards_top_text_p"]'); + if (gameDescriptionElement) { + gameDescriptionElement.textContent = `${game.short_description.substring(0, 35)}...`; + } else { + console.error('Element with data-type "Games__cards_top_text_p" not found'); + } + + const genreElement = clone.querySelector('[data-card-genre]'); + if (genreElement) { + genreElement.textContent = `Genre: ${game.genre}`; + } + + const platformElement = clone.querySelector('[data-card-platform]'); + if (platformElement) { + platformElement.textContent = `Platform: ${game.platform}`; + } + + const publisherElement = clone.querySelector('[data-card-publisher]'); + if (publisherElement) { + publisherElement.textContent = `Publisher: ${game.publisher}`; + } + + const developerElement = clone.querySelector('[data-card-developer]'); + if (developerElement) { + developerElement.textContent = `Developer: ${game.developer}`; + } + + const releaseDateElement = clone.querySelector('[data-card-release-date]'); + if (releaseDateElement) { + releaseDateElement.textContent = `Release Date: ${game.release_date}`; + } + + return clone; +} + +async function fetchGamesData() { + const response = await fetch('https://mmo-games.p.rapidapi.com/games', { + method: 'GET', + headers: { + 'X-RapidAPI-Key': '1c3169c707mshb51bff34cbc9ff6p1749b9jsn648a19134256', + 'X-RapidAPI-Host': 'mmo-games.p.rapidapi.com', + }, + }); + const gamesData = await response.json(); + return gamesData.slice(0, 50); +} + +function renderGames(games) { + const cardContainer = document.querySelector('[data-type="card-container"]'); + + if (!cardContainer) { + console.error('Card container not found'); + return; + } + + cardContainer.innerHTML = ''; + + games.forEach((game) => { + const cardElement = createCardElement(game); + if (cardElement) { + cardContainer.appendChild(cardElement); + } + }); +} + +document.addEventListener('DOMContentLoaded', async () => { + const loadingOverlay = document.getElementById('loading-overlay'); + loadingOverlay.style.display = 'flex'; + + try { + const gamesData = await fetchGamesData(); + renderGames(gamesData); + } catch (error) { + console.error('Games loading error:', error); + } finally { + loadingOverlay.style.display = 'none'; + } +}); + +function init() { +} + +document.addEventListener('DOMContentLoaded', init); diff --git a/docs/SviatoslavTaranenko/scripts/calculator.js b/docs/SviatoslavTaranenko/scripts/calculator.js new file mode 100644 index 00000000..f82b338b --- /dev/null +++ b/docs/SviatoslavTaranenko/scripts/calculator.js @@ -0,0 +1,13 @@ +const FIRST_VALUE_ELEMENT = document.getElementById('firstValue'); +const SECOND_VALUE_ELEMENT = document.getElementById('secondValue'); +const OPERATION_ELEMENT = document.getElementById('operation'); +const CALCULATE_BUTTON_ELEMENT = document.getElementById('calculate'); +const RESULT_ELEMENT = document.getElementById('result'); + +CALCULATE_BUTTON_ELEMENT.addEventListener('click', () => { + const firstValue = FIRST_VALUE_ELEMENT.value; + const secondValue = SECOND_VALUE_ELEMENT.value; + const operation = OPERATION_ELEMENT.value; + + RESULT_ELEMENT.innerText = window.calculate(firstValue, secondValue, operation); +}); diff --git a/docs/SviatoslavTaranenko/scripts/homework.js b/docs/SviatoslavTaranenko/scripts/homework.js new file mode 100644 index 00000000..b86885e2 --- /dev/null +++ b/docs/SviatoslavTaranenko/scripts/homework.js @@ -0,0 +1,80 @@ +const dateInfoContainer = document.createElement('div'); +dateInfoContainer.style.textAlign = 'center'; +dateInfoContainer.style.marginTop = '20px'; +dateInfoContainer.style.fontFamily = '"Roboto", sans-serif'; +dateInfoContainer.style.fontWeight = '500'; +dateInfoContainer.style.fontSize = '16px'; +document.body.appendChild(dateInfoContainer); + +/** + * Функція для виведення результату та дати + * @param {string} result Результат обчислення + */ +function showResult(result) { + const timestamp = new Date().toLocaleString(); + + dateInfoContainer.textContent = `Date of calculation: ${timestamp}`; + + return result; +} + +/** + * @param firstValue string with the first number + * @param secondValue string with the second number + * @param operation string with the operation symbol + * @returns {string|games} result of calculation or an error message: + * - if firstValue or secondValue is not a number, return 'Enter a number' + * - if operation is not '+', '-', '*', '/', return 'Choose a valid operation' + * - if the result is more than 100, return 'Result is too big' + * - else return number of result: 1 '+' 2 returns 3 + */ +function calculate(firstValue, secondValue, operation) { + if (!firstValue.trim() || !secondValue.trim()) { + return 'Enter a number'; + } + + const firstNumber = Number(firstValue); + const secondNumber = Number(secondValue); + + if (Number.isNaN(firstNumber) || Number.isNaN(secondNumber)) { + return 'Enter a valid number'; + } + + let result; + + switch (operation) { + case '+': + result = firstNumber + secondNumber; + break; + + case '-': + result = firstNumber - secondNumber; + break; + + case '/': + if (secondNumber === 0) { + return 'You cannot divide by zero'; + } + result = firstNumber / secondNumber; + break; + + case '*': + result = firstNumber * secondNumber; + break; + + default: + return 'Choose a valid operation'; + } + + if (result > 100) { + return 'Result is too big'; + } + + if (result > 1) { + return showResult(`${result} games`); + } + + return showResult(`${result} game`); +} + +window.calculate = calculate; diff --git a/docs/SviatoslavTaranenko/scripts/script.js b/docs/SviatoslavTaranenko/scripts/script.js new file mode 100644 index 00000000..697bf2b3 --- /dev/null +++ b/docs/SviatoslavTaranenko/scripts/script.js @@ -0,0 +1,116 @@ +const EMAIL_INPUT_ID = 'email-input-id'; +const PASSWORD_INPUT_ID = 'password-input-id'; +const NOT_A_ROBOT_CHECKBOX_ID = 'not-a-robot-checkbox-id'; +const SUBMIT_BUTTON_ID = 'submit-button-id'; +const ERRORS_CONTAINER_ID = 'errors-container'; +const ERRORS_EMAIL_ID = 'errors-email'; +const ERRORS_PASSWORD_ID = 'errors-password'; +const RESULT_PAGE_PATH = 'LoginDone.html'; + +const submitButton = document.getElementById(SUBMIT_BUTTON_ID); +/** + * Return input value by id. + * @param {string} elementId + * @return {string|boolean} input value + */ +function getValueById(elementId) { + const element = document.getElementById(elementId); + const type = element.getAttribute('type'); + return type === 'checkbox' ? element.checked : element.value; +} + +/** + * Add errors to errors container. + * @param {Object} inputData in format like: { [input_id]: error_text, ... } + */ +function setErrorsCheckbox(inputData) { + const errorContainerElement = document.getElementById(ERRORS_CONTAINER_ID); + Object.values(inputData).forEach((error) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); + }); +} + +function setErrorsEmail(inputData) { + const errorContainerElement = document.getElementById(ERRORS_EMAIL_ID); + Object.values(inputData).forEach((error) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); + }); +} + +function setErrorsPassword(inputData) { + const errorContainerElement = document.getElementById(ERRORS_PASSWORD_ID); + Object.values(inputData).forEach((error) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); + }); +} +/** + * Delete all errors from errors container. + */ +function deleteErrorsCheckbox() { + const errorContainerElement = document.getElementById(ERRORS_CONTAINER_ID); + errorContainerElement.replaceChildren(); +} + +function deleteErrorsEmail() { + const errorContainerElement = document.getElementById(ERRORS_EMAIL_ID); + errorContainerElement.replaceChildren(); +} + +function deleteErrorsPassword() { + const errorContainerElement = document.getElementById(ERRORS_PASSWORD_ID); + errorContainerElement.replaceChildren(); +} + +/** + * Goes to the page with the result. + */ +function navigateToResultPage() { + window.location.href = RESULT_PAGE_PATH; +} + +function isEmail(email) { + const showEmail = email.replace(/\s/g, ''); + const emailText = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; + return emailText.test(showEmail); +} + +function validateForm() { + deleteErrorsCheckbox(); + deleteErrorsEmail(); + deleteErrorsPassword(); + + const errors = {}; + const email = getValueById(EMAIL_INPUT_ID); + const password = getValueById(PASSWORD_INPUT_ID); + const checkbox = getValueById(NOT_A_ROBOT_CHECKBOX_ID); + + if (!isEmail(email)) { + errors[EMAIL_INPUT_ID] = 'Enter correct e-mail'; + } + + if (password.length < 8 || password.length > 12) { + errors[PASSWORD_INPUT_ID] = 'Password must be from 8 to 12 symbols'; + } + + if (!checkbox) { + errors[NOT_A_ROBOT_CHECKBOX_ID] = 'Are you a robot?'; + } + + setErrorsEmail({ [EMAIL_INPUT_ID]: errors[EMAIL_INPUT_ID] }); + setErrorsPassword({ [PASSWORD_INPUT_ID]: errors[PASSWORD_INPUT_ID] }); + setErrorsCheckbox({ [NOT_A_ROBOT_CHECKBOX_ID]: errors[NOT_A_ROBOT_CHECKBOX_ID] }); + + if (Object.keys(errors).length === 0) { + navigateToResultPage(); + } +} +submitButton.onclick = validateForm; diff --git a/docs/index.html b/docs/index.html index d604230c..982a45b7 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,12 +1,10 @@ - MA Projects -

MA Projects

@@ -14,9 +12,12 @@

MA Projects

  • Vladyslav Yermolin - Lecture 5
    • +
  • + Sviatoslav Taranenko - Final Project +
  • Dmytro Shevchenko - Games Project -
    • +
  • Serhii Noskov - Final Project
    • @@ -32,5 +33,4 @@

    MA Projects

    - diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Games.html b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Games.html index add137bc..43411372 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Games.html +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Games.html @@ -29,7 +29,7 @@
    - @@ -63,7 +63,7 @@ - +
    @@ -129,34 +129,5 @@

    - - diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Login.html b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Login.html index 632a87d9..cbfecf01 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Login.html +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Login.html @@ -5,7 +5,6 @@ - Games Project - Login @@ -38,10 +37,12 @@

    Login page

    +
    +
    @@ -53,6 +54,32 @@

    Login page

    + diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Games.css b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Games.css index d47aaeb9..6e21138e 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Games.css +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Games.css @@ -1,6 +1,9 @@ body { margin: 0; padding: 0; + min-width: 300px; + display: flex; + flex-direction: column; } .loading-overlay { @@ -38,12 +41,41 @@ body { margin-left: 61px; } +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + .header__items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; } +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + .header__items a { text-decoration: none; color: #FFF; @@ -101,6 +133,17 @@ body { text-decoration: underline; } +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + .games__filter { display: flex; width: 100%; @@ -110,6 +153,20 @@ body { justify-content: space-around; } +@media (max-width: 1120px) { + + .games__filter { + padding: 10px 0; + display: flex; + flex-wrap: wrap; + width: 100%; + min-height: 60px; + background-color: #221F1F; + align-items: center; + gap: 25px; + } +} + .datalist__games_filter select { min-width: 114px; border: none; @@ -128,11 +185,13 @@ body { font-size: 14px; font-style: normal; font-weight: 400; + cursor: not-allowed; } .radio__filter { display: flex; gap: 12px; + max-width: 240px; } .radio__games_filter { @@ -144,10 +203,11 @@ body { z-index: -1; opacity: 0; gap: 20px; + cursor: not-allowed; } .radio__games_filter label { - cursor: pointer; + cursor: not-allowed; font-family: "Roboto", sans-serif; font-size: 14px; font-style: normal; @@ -221,13 +281,17 @@ body { .checkbox__filter { display: flex; align-items: center; - gap: 90px + gap: 90px; + max-width: 80px; + padding-right: 100px; + cursor: not-allowed; } .checkbox__games_filter { display: flex; align-items: center; gap: 12px; + cursor: not-allowed; } .checkbox__games_filter input { @@ -238,10 +302,11 @@ body { width: 20px; height: 20px; background-color: #FFF; + cursor: not-allowed; } .checkbox__games_filter label { - cursor: pointer; + cursor: not-allowed; font-family: "Roboto", sans-serif; font-size: 14px; font-style: normal; @@ -273,6 +338,15 @@ body { background-position: left 5px center; background-size: 24px 24px; background-repeat: no-repeat; + cursor: not-allowed; + + @media (max-width: 400px) { + max-width: 250px; + } + + @media (max-width: 280px) { + max-width: 180px; + } } .search__bar input { @@ -285,6 +359,7 @@ body { font-size: 14px; font-style: normal; font-weight: 400; + cursor: not-allowed; } .search__bar button { @@ -302,6 +377,7 @@ body { font-style: normal; font-weight: 400; color: #FFF; + cursor: not-allowed; } .search__bar button:active { @@ -316,26 +392,109 @@ body { line-height: 32px; } +@media (max-width: 940px) { + + .Games .Games__title { + margin: 60px 0 0 85px; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 36px; + line-height: 32px; + } +} + +@media (max-width: 670px) { + + .Games .Games__title { + display: flex; + align-content: center; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 24px; + line-height: 32px; + } +} + +@media (max-width: 340px) { + + .Games .Games__title { + margin: 40px 0 20px 55px; + display: flex; + align-content: center; + font-family: "Roboto", sans-serif; + font-weight: 700; + font-size: 20px; + line-height: 24px; + } +} + .card__container { margin-top: 60px; display: grid; grid-template-columns: 275px 275px 275px 275px; column-gap: 25px; - grid-template-rows: 260px; - row-gap: 60px; + grid-template-rows: 310px; + row-gap: 80px; justify-content: center; min-height: auto; } -.Games__cards { - margin-top: 60px; - display: grid; - grid-template-columns: 275px 275px 275px 275px; - column-gap: 25px; - grid-template-rows: 260px; - row-gap: 60px; - justify-content: center; - min-height: auto; +@media (max-width: 1250px) { + + .card__container { + margin-top: 60px; + display: grid; + grid-template-columns: 275px 275px 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + justify-content: center; + min-height: auto; + } +} + +@media (max-width: 970px) { + + .card__container { + margin: 60px 60px 0 0; + display: grid; + grid-template-columns: 275px 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + align-content: center; + justify-content: center; + min-height: auto; + } +} + +@media (max-width: 670px) { + + .card__container { + margin: 60px 60px 0 0; + display: grid; + grid-template-columns: 275px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + align-content: center; + justify-content: center; + min-height: auto; + } +} + +@media (max-width: 340px) { + + .card__container { + display: grid; + grid-template-columns: 250px; + column-gap: 25px; + grid-template-rows: 310px; + row-gap: 80px; + align-content: center; + justify-content: center; + min-height: auto; + } } .Games__cards_desc { @@ -343,7 +502,7 @@ body { border-radius: 12px; padding: 12px 12px 22px; background-color: #ECECEC; - height: 260px; + height: 280px; } .Games__cards_top { @@ -437,6 +596,8 @@ body { display: flex; margin-top: 10px; justify-content: center; + align-content: center; + text-align: center; font-family: "Roboto", sans-serif; font-weight: 400; font-size: 22px; @@ -452,4 +613,3 @@ body { .about__text_link:hover { color: #EF4934; } - diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Login.css b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Login.css index 8dd483c5..1bc2b5c2 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Login.css +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/Login.css @@ -1,6 +1,9 @@ body { margin: 0; padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; } .header { @@ -23,12 +26,41 @@ body { margin-left: 61px; } +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + .header__items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; } +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + .header__items a { text-decoration: none; color: #FFF; @@ -86,9 +118,28 @@ body { text-decoration: underline; } +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + .Login__table { margin: 0 auto; max-width: 575px; + + @media (max-width: 670px) { + max-width: 500px; + } + + @media (max-width: 500px) { + max-width: 300px; + } } .Login__table_title { @@ -99,6 +150,20 @@ body { font-size: 48px; font-weight: 700; line-height: 32px; + + @media (max-width: 670px) { + display: flex; + justify-content: center; + font-size: 36px; + line-height: 24px; + } + + @media (max-width: 430px) { + display: flex; + justify-content: center; + font-size: 24px; + line-height: 20px; + } } .Login__table_email { @@ -112,9 +177,21 @@ body { font-weight: 600; line-height: 26px; padding-top: 10px; + + @media (max-width: 670px) { + font-size: 20px; + line-height: 24px; + } + + @media (max-width: 500px) { + font-size: 16px; + line-height: 20px; + } } .Login__table_email_input { + display: flex; + justify-content: center; border: solid 1px #A9A9A9; border-radius: 6px; min-width: 575px; @@ -123,6 +200,24 @@ body { font-weight: 400; font-size: 14px; line-height: 21px; + + @media (max-width: 670px) { + display: flex; + justify-content: center; + min-width: 500px; + min-height: 35px; + font-size: 12px; + line-height: 19px; + } + + @media (max-width: 500px) { + display: flex; + justify-content: center; + min-width: 300px; + min-height: 30px; + font-size: 10px; + line-height: 17px; + } } .Login__table_password { @@ -136,9 +231,23 @@ body { font-weight: 600; line-height: 26px; padding-top: 20px; + + @media (max-width: 670px) { + display: block; + font-size: 20px; + line-height: 24px; + } + + @media (max-width: 500px) { + display: block; + font-size: 16px; + line-height: 20px; + } } .Login__table_password_input { + display: flex; + justify-content: center; border: solid 1px #A9A9A9; border-radius: 6px; min-width: 575px; @@ -147,6 +256,24 @@ body { font-weight: 400; font-size: 14px; line-height: 21px; + + @media (max-width: 670px) { + display: flex; + justify-content: center; + min-width: 500px; + min-height: 35px; + font-size: 12px; + line-height: 19px; + } + + @media (max-width: 500px) { + display: flex; + justify-content: center; + min-width: 300px; + min-height: 30px; + font-size: 10px; + line-height: 17px; + } } .Login__table_verif { @@ -197,6 +324,10 @@ body { line-height: 21px; color: #221F1F; padding-left: 30px; + + @media (max-width: 500px) { + font-size: 10px; + } } .errors-container { @@ -204,6 +335,10 @@ body { font-size: 14px; margin-top: 10px; color: #FF2E2EBA; + + @media (max-width: 500px) { + font-size: 10px; + } } .Login__table_btn { @@ -222,8 +357,80 @@ body { color: #FFF; border: none; cursor: pointer; + + @media (max-width: 670px) { + min-width: 500px; + min-height: 35px; + font-size: 20px; + line-height: 24px; + } + + @media (max-width: 500px) { + min-width: 305px; + min-height: 30px; + font-size: 16px; + line-height: 20px; + } } .Login__table_btn_name:active { box-shadow: 0 0 0 1px #A9A9A9; } + +.footer { + margin-top: 100px; + background-color: #333; + color: #FFF; + padding: 10px; + text-align: center; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; +} diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/LoginDone.css b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/LoginDone.css index fc004340..19a4baae 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/LoginDone.css +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/LoginDone.css @@ -11,6 +11,8 @@ font-size: 48px; font-weight: 700; line-height: 40px; + text-align: center; + align-content: center; } .Login_Done_text { @@ -20,6 +22,8 @@ font-family: "Roboto", sans-serif; font-size: 48px; font-weight: 400; + text-align: center; + align-content: center; } .Login__table_btn { @@ -43,6 +47,16 @@ color: #FFF; border: none; cursor: pointer; + + @media (max-width: 600px) { + min-width: 300px; + display: flex; + margin: 0 auto; + justify-content: center; + align-content: center; + text-align: center; + align-items: center; + } } .Login__table_btn_name:active { diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/calculator.css b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/calculator.css index 0bcba94b..214c939f 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/calculator.css +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/calculator.css @@ -1,6 +1,10 @@ body { margin: 0; padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + min-width: 250px; } .header { @@ -23,12 +27,41 @@ body { margin-left: 61px; } +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + .header__items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; } +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + .header__items a { text-decoration: none; color: #FFF; @@ -52,7 +85,7 @@ body { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; - line-height: 18.75px; + line-height: 19px; margin-right: 40px; } @@ -65,7 +98,7 @@ body { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; - line-height: 18.75px; + line-height: 19px; margin-right: 40px; } @@ -78,7 +111,7 @@ body { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; - line-height: 18.75px; + line-height: 19px; margin-right: 40px; } @@ -86,6 +119,17 @@ body { text-decoration: underline; } +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + .title { display: flex; justify-content: center; @@ -94,6 +138,14 @@ body { font-size: 48px; font-weight: 700; line-height: 32px; + + @media (max-width: 700px) { + font-size: 36px; + } + + @media (max-width: 300px) { + font-size: 24px; + } } .field { @@ -101,6 +153,13 @@ body { justify-content: center; column-gap: 10px; margin: 20px; + + @media (max-width: 700px) { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } } input { @@ -113,6 +172,10 @@ input { font-size: 14px; line-height: 21px; text-align: center; + + @media (max-width: 700px) { + margin: 5px 0; + } } select { @@ -125,6 +188,10 @@ select { font-size: 14px; line-height: 21px; text-align: center; + + @media (max-width: 700px) { + margin: 5px 0; + } } button { @@ -139,6 +206,10 @@ button { color: #FFF; border: none; cursor: pointer; + + @media (max-width: 700px) { + margin: 5px 0; + } } button:active { @@ -155,4 +226,66 @@ span { font-size: 14px; line-height: 42px; text-align: center; + + @media (max-width: 700px) { + margin: 5px 0; + } +} + +.footer { + margin-top: auto; + background-color: #333; + color: #FFF; + padding: 10px; + text-align: center; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; } diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/style.css b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/style.css index 6d63e125..89dd027f 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/style.css +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/Styles/style.css @@ -1,13 +1,14 @@ body { margin: 0; padding: 0; + min-width: 300px; + display: flex; + flex-direction: column; } .header { border: none; width: 100%; - margin: 0; - padding: 0; background-color: #EF4934; } @@ -18,18 +19,48 @@ body { .header__img { margin-top: 8px; - margin-bottom: 8px;width: 55px; + margin-bottom: 8px; + width: 55px; height: 55px; justify-content: center; margin-left: 61px; } +@media (max-width: 670px) { + + .header__all { + display: flex; + flex-direction: column; + } + + .header__img { + padding: 15px 0; + display: block; + margin: 0 auto; + width: 55px; + height: 55px; + justify-content: center; + align-content: center; + } +} + .header__items { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; } +@media (max-width: 670px) { + + .header__items { + display: flex; + justify-content: space-between; + align-items: center; + margin-left: 25px; + padding-bottom: 15px; + } +} + .header__items a { text-decoration: none; color: #FFF; @@ -53,7 +84,7 @@ body { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; - line-height: 18.75px; + line-height: 19px; margin-right: 40px; } @@ -66,7 +97,7 @@ body { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; - line-height: 18.75px; + line-height: 19px; margin-right: 40px; } @@ -79,7 +110,7 @@ body { font-family: "Roboto", sans-serif; font-weight: 500; font-size: 16px; - line-height: 18.75px; + line-height: 19px; margin-right: 40px; } @@ -87,6 +118,17 @@ body { text-decoration: underline; } +@media (max-width: 430px) { + + .header__items { + display: flex; + flex-direction: column; + margin: 0 auto; + padding-left: 35px; + padding-bottom: 15px; + } +} + .about .about__all { margin: 60px; display: grid; @@ -94,6 +136,24 @@ body { justify-content: center; } +@media (max-width: 1220px) { + + .about .about__all { + display: flex; + flex-direction: column; + } +} + +@media (max-width: 1220px) { + + .about__img { + display: flex; + justify-content: center; + align-content: center; + align-items: center; + } +} + .about__all .about__text .about__text_title { margin-top: 0; padding-top: 0; @@ -102,6 +162,14 @@ body { font-size: 48px; line-height: 32px; color: #221F1F; + + @media (max-width: 1220px) { + display: flex; + margin-top: 25px; + justify-content: center; + align-content: center; + align-items: center; + } } .about__all .about__text .about__text_inf { @@ -110,8 +178,73 @@ body { font-weight: 400; font-size: 22px; line-height: 32px; + + @media (max-width: 1220px) { + margin-top: 25px; + justify-content: center; + align-content: center; + align-items: center; + } +} + +.about__text_link { + color: #FFF; + text-decoration: none; +} + +.about__text_link:hover { + color: #EF4934; } .about__all .about__text .about__text_link { color: #EF4934; } + +.footer { + margin-top: auto; + background-color: #333; + color: #FFF; + padding: 10px; + text-align: center; +} + +.footer__icons { + display: flex; + justify-content: center; +} + +.footer__icons_row { + display: flex; + justify-content: center; + gap: 33px; + margin-top: 20px; +} + +.footer__icons_all { + display: flex; + justify-content: center; + margin: auto; + align-items: center; + background-color: #FFF; + width: 42px; + height: 42px; + border-radius: 50%; +} + +.footer__icons_row img { + width: 20px; + height: 20px; +} + +.footer__text { + display: flex; + margin-top: 10px; + justify-content: center; + align-content: center; + text-align: center; + font-family: "Roboto", sans-serif; + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/calculator.html b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/calculator.html index 20535870..001c633d 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/calculator.html +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/calculator.html @@ -4,6 +4,7 @@ Basic JS + @@ -48,5 +49,31 @@

    Calculator v. 1

    + diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/index.html b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/index.html index 768aa07e..a6b28984 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/index.html +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/index.html @@ -14,16 +14,16 @@ Logo
    - Calculator + Calculator
    - Games + Games
    - About + About
    - Login + Login
    @@ -43,21 +43,44 @@

    About me

    This page was developed during the course - 'Frontend for -
    +     'Frontend for beginners' from Masters Academy in 2023.

    - This is a social project from MOCG company where I got
    an opportunity to work with Frontend mentors and to -
    create my own small project for the portfolio. + This is a social project from MOCG company where I got
    an opportunity to work with Frontend mentors and to create my own small project for the portfolio.

    - You can contact me via instagram: sviat_taranenko and/or -
    check out my - GitHub. + You can contact me via instagram: sviat_taranenko and/or check out my + GitHub.

    + diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/Games.js b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/Games.js index d477799c..e552c3b5 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/Games.js +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/Games.js @@ -1,8 +1,3 @@ -// games-mock.js - -const games = []; -const gamesData = games.map((game) => ({ ...game, isNew: game.release_date.includes('2022') })); - function createCardElement(game) { const template = document.querySelector('.card-template'); @@ -63,27 +58,19 @@ function createCardElement(game) { return clone; } -function highlightText(element, searchText) { - const { innerHTML } = element; - const lowerCaseInnerHTML = innerHTML.toLowerCase(); - const lowerCaseSearchText = searchText.toLowerCase(); - - element.innerHTML = innerHTML.replace(/<\/mark>/g, '').replace(//g, ''); - - let index = lowerCaseInnerHTML.indexOf(lowerCaseSearchText); - - while (index !== -1) { - const start = innerHTML.substring(0, index); - const match = innerHTML.substring(index, index + searchText.length); - const end = innerHTML.substring(index + searchText.length); - - element.innerHTML = `${start}${match}${end}`; - - index = lowerCaseInnerHTML.indexOf(lowerCaseSearchText, index + 1); - } +async function fetchGamesData() { + const response = await fetch('https://mmo-games.p.rapidapi.com/games', { + method: 'GET', + headers: { + 'X-RapidAPI-Key': '1c3169c707mshb51bff34cbc9ff6p1749b9jsn648a19134256', + 'X-RapidAPI-Host': 'mmo-games.p.rapidapi.com', + }, + }); + const gamesData = await response.json(); + return gamesData.slice(0, 50); } -function renderGames(gamess) { +function renderGames(games) { const cardContainer = document.querySelector('[data-type="card-container"]'); if (!cardContainer) { @@ -91,78 +78,31 @@ function renderGames(gamess) { return; } - const searchText = document.getElementById('search').value.toLowerCase(); - cardContainer.innerHTML = ''; - gamess.forEach((game) => { + games.forEach((game) => { const cardElement = createCardElement(game); if (cardElement) { cardContainer.appendChild(cardElement); - - const elementsToHighlight = cardElement.querySelectorAll('[data-card-genre], [data-type="Games__cards_top_text_title"], [data-type="Games__cards_top_text_p"]'); - - elementsToHighlight.forEach((element) => { - highlightText(element, searchText); - }); } }); } -function filterGames() { - const filterForm = document.getElementById('filterForm'); - const searchTextElement = document.getElementById('search'); - - filterForm.addEventListener('change', () => { - const isNewChecked = document.getElementById('new_games').checked; - const isOldChecked = document.getElementById('old_games').checked; - const selectedGenre = document.getElementById('game_properties').value; - - const searchText = searchTextElement.value.toLowerCase(); - - const filteredGames = gamesData.filter((game) => { - const isNewMatch = isNewChecked && game.isNew; - const isOldMatch = isOldChecked && !game.isNew; - const genreMatch = selectedGenre === 'Genre' || game.genre === selectedGenre; - const titleMatch = game.title.toLowerCase().includes(searchText); - const descriptionMatch = game.short_description.toLowerCase().includes(searchText); - - return (isNewMatch || isOldMatch) && genreMatch && (titleMatch || descriptionMatch); - }); - - renderGames(filteredGames); - - const cardElements = document.querySelectorAll('.card-template'); - cardElements.forEach((cardElement) => { - const elementsToHighlight = cardElement.querySelectorAll('[data-card-genre], [data-type="Games__cards_top_text_title"], [data-type="Games__cards_top_text_p"]'); - elementsToHighlight.forEach((element) => { - highlightText(element, searchText); - }); - }); - }); - - searchTextElement.addEventListener('input', () => { - const searchText = searchTextElement.value.toLowerCase(); - - const cardElements = document.querySelectorAll('[data-type="card-template"]'); - cardElements.forEach((cardElement) => { - const elementsToHighlight = cardElement.querySelectorAll('[data-card-genre], [data-type="Games__cards_top_text_title"], [data-type="Games__cards_top_text_p"]'); - elementsToHighlight.forEach((element) => { - highlightText(element, searchText); - }); - }); - }); -} +document.addEventListener('DOMContentLoaded', async () => { + const loadingOverlay = document.getElementById('loading-overlay'); + loadingOverlay.style.display = 'flex'; + + try { + const gamesData = await fetchGamesData(); + renderGames(gamesData); + } catch (error) { + console.error('Games loading error:', error); + } finally { + loadingOverlay.style.display = 'none'; + } +}); function init() { - renderGames(gamesData); - filterGames(); - - const applyButton = document.getElementById('apply'); - - applyButton.addEventListener('click', () => { - filterGames(); - }); } document.addEventListener('DOMContentLoaded', init); diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/homework.js b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/homework.js index 6bf78a0d..b86885e2 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/homework.js +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/homework.js @@ -29,11 +29,15 @@ function showResult(result) { * - else return number of result: 1 '+' 2 returns 3 */ function calculate(firstValue, secondValue, operation) { + if (!firstValue.trim() || !secondValue.trim()) { + return 'Enter a number'; + } + const firstNumber = Number(firstValue); const secondNumber = Number(secondValue); if (Number.isNaN(firstNumber) || Number.isNaN(secondNumber)) { - return 'Enter a number'; + return 'Enter a valid number'; } let result; diff --git a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/script.js b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/script.js index ceb3e150..697bf2b3 100644 --- a/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/script.js +++ b/homeworks/sviatoslav.taranenko_SviatoslavTaranenko/GamesProject/scripts/script.js @@ -3,6 +3,8 @@ const PASSWORD_INPUT_ID = 'password-input-id'; const NOT_A_ROBOT_CHECKBOX_ID = 'not-a-robot-checkbox-id'; const SUBMIT_BUTTON_ID = 'submit-button-id'; const ERRORS_CONTAINER_ID = 'errors-container'; +const ERRORS_EMAIL_ID = 'errors-email'; +const ERRORS_PASSWORD_ID = 'errors-password'; const RESULT_PAGE_PATH = 'LoginDone.html'; const submitButton = document.getElementById(SUBMIT_BUTTON_ID); @@ -21,7 +23,7 @@ function getValueById(elementId) { * Add errors to errors container. * @param {Object} inputData in format like: { [input_id]: error_text, ... } */ -function setErrors(inputData) { +function setErrorsCheckbox(inputData) { const errorContainerElement = document.getElementById(ERRORS_CONTAINER_ID); Object.values(inputData).forEach((error) => { const errorElement = document.createElement('p'); @@ -30,14 +32,44 @@ function setErrors(inputData) { errorContainerElement.appendChild(errorElement); }); } + +function setErrorsEmail(inputData) { + const errorContainerElement = document.getElementById(ERRORS_EMAIL_ID); + Object.values(inputData).forEach((error) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); + }); +} + +function setErrorsPassword(inputData) { + const errorContainerElement = document.getElementById(ERRORS_PASSWORD_ID); + Object.values(inputData).forEach((error) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = error; + errorContainerElement.appendChild(errorElement); + }); +} /** * Delete all errors from errors container. */ -function deleteErrors() { +function deleteErrorsCheckbox() { const errorContainerElement = document.getElementById(ERRORS_CONTAINER_ID); errorContainerElement.replaceChildren(); } +function deleteErrorsEmail() { + const errorContainerElement = document.getElementById(ERRORS_EMAIL_ID); + errorContainerElement.replaceChildren(); +} + +function deleteErrorsPassword() { + const errorContainerElement = document.getElementById(ERRORS_PASSWORD_ID); + errorContainerElement.replaceChildren(); +} + /** * Goes to the page with the result. */ @@ -52,7 +84,10 @@ function isEmail(email) { } function validateForm() { - deleteErrors(); + deleteErrorsCheckbox(); + deleteErrorsEmail(); + deleteErrorsPassword(); + const errors = {}; const email = getValueById(EMAIL_INPUT_ID); const password = getValueById(PASSWORD_INPUT_ID); @@ -65,14 +100,17 @@ function validateForm() { if (password.length < 8 || password.length > 12) { errors[PASSWORD_INPUT_ID] = 'Password must be from 8 to 12 symbols'; } + if (!checkbox) { errors[NOT_A_ROBOT_CHECKBOX_ID] = 'Are you a robot?'; } - if (Object.keys(errors).length > 0) { - setErrors(errors); - } else { + + setErrorsEmail({ [EMAIL_INPUT_ID]: errors[EMAIL_INPUT_ID] }); + setErrorsPassword({ [PASSWORD_INPUT_ID]: errors[PASSWORD_INPUT_ID] }); + setErrorsCheckbox({ [NOT_A_ROBOT_CHECKBOX_ID]: errors[NOT_A_ROBOT_CHECKBOX_ID] }); + + if (Object.keys(errors).length === 0) { navigateToResultPage(); } } - submitButton.onclick = validateForm;