From 2f2d2a895213bf2069e5623caf7fd909bdca21fe Mon Sep 17 00:00:00 2001 From: Katya Vakulenko Date: Sat, 6 Jan 2024 19:19:35 +0100 Subject: [PATCH 01/14] add project to the new folder --- docs/rogerosha/5-logic/homework.js | 74 +++++ docs/rogerosha/5-logic/index.html | 71 +++++ docs/rogerosha/5-logic/script.js | 13 + docs/rogerosha/5-logic/style.css | 149 +++++++++ docs/rogerosha/PokemonProject/css/login.css | 179 +++++++++++ .../rogerosha/PokemonProject/css/pokemons.css | 295 ++++++++++++++++++ docs/rogerosha/PokemonProject/css/result.css | 62 ++++ docs/rogerosha/PokemonProject/css/style.css | 130 ++++++++ .../PokemonProject/images/MA-logo.svg | 20 ++ .../PokemonProject/images/Urshifu.svg | 10 + .../PokemonProject/images/checkmark.png | Bin 0 -> 305 bytes .../PokemonProject/images/networks.svg | 8 + .../PokemonProject/images/pokemon.svg | 16 + .../PokemonProject/images/search.svg | 4 + docs/rogerosha/PokemonProject/index.html | 64 ++++ docs/rogerosha/PokemonProject/login.html | 70 +++++ docs/rogerosha/PokemonProject/pokemons.html | 118 +++++++ docs/rogerosha/PokemonProject/result.html | 26 ++ .../PokemonProject/scripts/pokemons.js | 96 ++++++ .../PokemonProject/scripts/script.js | 70 +++++ 20 files changed, 1475 insertions(+) create mode 100644 docs/rogerosha/5-logic/homework.js create mode 100644 docs/rogerosha/5-logic/index.html create mode 100644 docs/rogerosha/5-logic/script.js create mode 100644 docs/rogerosha/5-logic/style.css create mode 100644 docs/rogerosha/PokemonProject/css/login.css create mode 100644 docs/rogerosha/PokemonProject/css/pokemons.css create mode 100644 docs/rogerosha/PokemonProject/css/result.css create mode 100644 docs/rogerosha/PokemonProject/css/style.css create mode 100644 docs/rogerosha/PokemonProject/images/MA-logo.svg create mode 100644 docs/rogerosha/PokemonProject/images/Urshifu.svg create mode 100644 docs/rogerosha/PokemonProject/images/checkmark.png create mode 100644 docs/rogerosha/PokemonProject/images/networks.svg create mode 100644 docs/rogerosha/PokemonProject/images/pokemon.svg create mode 100644 docs/rogerosha/PokemonProject/images/search.svg create mode 100644 docs/rogerosha/PokemonProject/index.html create mode 100644 docs/rogerosha/PokemonProject/login.html create mode 100644 docs/rogerosha/PokemonProject/pokemons.html create mode 100644 docs/rogerosha/PokemonProject/result.html create mode 100644 docs/rogerosha/PokemonProject/scripts/pokemons.js create mode 100644 docs/rogerosha/PokemonProject/scripts/script.js diff --git a/docs/rogerosha/5-logic/homework.js b/docs/rogerosha/5-logic/homework.js new file mode 100644 index 00000000..fdd8aeb2 --- /dev/null +++ b/docs/rogerosha/5-logic/homework.js @@ -0,0 +1,74 @@ +const inputHistory = document.querySelector('.input-history'); +const outputHistory = document.querySelector('.output-history'); + +function calculate() { + const firstValue = parseFloat(document.getElementById('firstValue').value); + const secondValue = parseFloat(document.getElementById('secondValue').value); + const operation = document.getElementById('operation').value; + let result; + let resultCalculator; + + if (Number.isNaN(firstValue) || Number.isNaN(secondValue)) { + document.getElementById('result').textContent = 'Please, enter the number'; + return; + } + + let operationText; + if (operation === '+') { + operationText = '+'; + } else if (operation === '-') { + operationText = '-'; + } else if (operation === '*') { + operationText = '*'; + } else if (operation === '/') { + operationText = '/'; + } else { + operationText = '?'; + } + + const inputText = `${firstValue} ${operationText} ${secondValue}`; + + if (secondValue === 0 && operation === '/') { + document.getElementById('result').textContent = 'Error'; + inputHistory.textContent = inputText; + outputHistory.textContent = '= Error'; + return; + } + + switch (operation) { + case '+': + result = firstValue + secondValue; + break; + case '-': + result = firstValue - secondValue; + break; + case '*': + result = firstValue * secondValue; + break; + case '/': + result = firstValue / secondValue; + break; + case '%': + result = 'Choose a valid operation'; + break; + case '**': + result = 'Choose a valid operation'; + break; + default: + result = 'Please, try again'; + } + if (result > 100) { + result = 'Too many pokemons'; + resultCalculator = 'Result is too big'; + } else if (result < 0) { + result = 'Negative quantity of pokemons'; + resultCalculator = 'Please, try again'; + } + + inputHistory.textContent = inputText; + outputHistory.textContent = typeof result === 'number' ? `= ${result} pokemons` : `= ${result}`; + + document.getElementById('result').textContent = `${resultCalculator || result}`; +} + +document.getElementById('calculate').addEventListener('click', calculate); diff --git a/docs/rogerosha/5-logic/index.html b/docs/rogerosha/5-logic/index.html new file mode 100644 index 00000000..3aa722e1 --- /dev/null +++ b/docs/rogerosha/5-logic/index.html @@ -0,0 +1,71 @@ + + + + + JS Logic + + + +
+ + +
+

Calculate Pokemons

+
+ + + + + +
+
+
+
+
+
+
+
+
+ + + + + diff --git a/docs/rogerosha/5-logic/script.js b/docs/rogerosha/5-logic/script.js new file mode 100644 index 00000000..f82b338b --- /dev/null +++ b/docs/rogerosha/5-logic/script.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/rogerosha/5-logic/style.css b/docs/rogerosha/5-logic/style.css new file mode 100644 index 00000000..87e27212 --- /dev/null +++ b/docs/rogerosha/5-logic/style.css @@ -0,0 +1,149 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + +.upper-header { + background-color: #333; + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + padding: 10px; + color: #333; + gap: 50px; + width: 100%; + justify-content: space-between; +} + +.ma-logo { + display: flex; + align-items: center; +} + +.MAlogo { + margin-left: 53px; +} + +.navigation { + text-align: right; + display: flex; + align-items: center; +} + +.navigation ul { + list-style: none; + padding: 0; + margin: 0; +} + +.navigation-item { + font-style: normal; + font-weight: 500; + font-size: 16px; + color: #FFF; + line-height: 19px; + margin-right: 50px; +} + +.pokemons, .about, .login { + text-decoration: none; +} + +.headline { + color: #221F1F; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 32px; + margin-top: 80px; + margin-bottom: 60px; +} + +.field { + display: flex; + gap: 16px; +} + +.firstValue, .secondValue { + padding: 13px; + border-radius: 6px; + display: flex; + text-align: center; +} + +.operation { + border-radius: 6px; + background-color: #FFF; + font-style: normal; + font-weight: 400; + font-size: 14px; + border: 1px solid #333; + padding-block: 13px; + padding-left: 12px; + padding-right: 95px; +} + +.button { + background-color: #EF4934; + color: #FFF; + border-radius: 6px; + border: 1px solid #EF4934; + display: inline-flex; + padding: 13px 57px; + justify-content: center; + align-items: center; +} + +.result { + display: flex; + align-items: center; + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 32px; +} + +.result-display { + display: flex; + flex-direction: row; + margin-top: 20px; + color: #EF4934; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 32px; + gap: 16px; + padding-bottom: 52px; +} + +footer { + background-color: #EF4934; + color: #FFF; + padding: 20px; + text-align: center; + width: 100%; + bottom: 0; +} + +.footer-text { + font-weight: 400; + font-size: 22px; + line-height: 32px; +} + +.link { + color: #FFF; + text-decoration: none; +} + +.social-networks { + margin-block: 30px; +} diff --git a/docs/rogerosha/PokemonProject/css/login.css b/docs/rogerosha/PokemonProject/css/login.css new file mode 100644 index 00000000..e9721421 --- /dev/null +++ b/docs/rogerosha/PokemonProject/css/login.css @@ -0,0 +1,179 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; + align-items: center; +} + +.upper-header { + background-color: #333; + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + padding: 10px; + color: #333; + gap: 50px; + width: 100%; + justify-content: space-between; +} + +.ma-logo { + display: flex; + align-items: center; +} + +.MAlogo { + margin-left: 53px; +} + +.navigation { + text-align: right; + display: flex; + align-items: center; +} + +.navigation ul { + list-style: none; + padding: 0; + margin: 0; +} + +.navigation-item { + font-style: normal; + font-weight: 500; + font-size: 16px; + color: #FFF; + line-height: 19px; + margin-right: 50px; +} + +.pokemons, .about, .calculator { + text-decoration: none; +} + +.content { + max-width: 1280px; + padding-inline: 352px; +} + +.headline { + color: #221F1F; + font-weight: 700; + font-size: 48px; + line-height: 32px; + margin-top: 80px; + text-align: center; +} + +.enter-content { + align-items: center; + padding-bottom: 52px; +} + +.email { + font-size: 22px; + font-weight: 600; +} + +.email-check { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 22px; + margin-top: 60px; + margin-bottom: 20px; + font-weight: 600; +} + +.input-email { + width: 100%; + border-radius: 6px; + border: 1px solid #A9A9A9; + padding-block: 30px; + padding-inline: 20px; +} + +.password { + font-size: 22px; +} + +.password-check { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 22px; + margin-block: 20px; + font-weight: 600; +} + +.input-password { + width: 100%; + border-radius: 6px; + border: 1px solid #A9A9A9; + padding-block: 30px; + padding-inline: 20px; +} + +.robot-check { + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + margin-block: 40px; +} + +.label-checkbox { + cursor: pointer; +} + +.error { + color: #EF4934; +} + +.button-login { + font-size: 22px; + font-weight: 600; +} + +button { + background-color: #EF4934; + color: #FFF; + text-decoration: none; + cursor: pointer; + display: flex; + width: 575px; + padding: 27px 258px; + justify-content: center; + border: 2px solid #EF4934; + align-items: center; + border-radius: 6px; + gap: 10px; +} + +footer { + background-color: #EF4934; + color: #FFF; + padding: 20px; + text-align: center; + width: 100%; + margin-bottom: 0; +} + +.footer-text { + font-weight: 400; + font-size: 22px; + line-height: 32px; +} + +.link { + color: #FFF; + text-decoration: none; +} + +.social-networks { + margin-block: 30px; +} diff --git a/docs/rogerosha/PokemonProject/css/pokemons.css b/docs/rogerosha/PokemonProject/css/pokemons.css new file mode 100644 index 00000000..d8a3c7e2 --- /dev/null +++ b/docs/rogerosha/PokemonProject/css/pokemons.css @@ -0,0 +1,295 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; + align-items: center; +} + +.upper-header { + background-color: #333; + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + padding: 10px; + color: #333; + gap: 50px; + width: 100%; + justify-content: space-between; +} + +.second-header { + width: 100%; + padding-block: 12px; + background-color: #221F1F; + display: flex; + color: #FFF; + justify-content: space-around; +} + +.form { + display: flex; + align-items: center; + gap: 10px; +} + +.dropdown { + padding: 0 12px; + border-radius: 6px; + background-color: #333; + color: #FFF; + font-style: normal; + font-weight: 400; + line-height: 150%; + font-size: 14px; + border: 1px solid #333; +} + +.only-new { + display: flex; +} + +.radio-buttons, .checkboxes { + display: flex; + flex-direction: row-reverse; + align-items: center; + gap: 5px; +} + +.search-field { + display: flex; +} + +.image-search { + background-color: #FFF; + border-radius: 6px 0 0 6px; + display: flex; + align-items: center; +} + +.input-search { + border: 1px solid #FFF; + width: 100%; + background-image: url("../images/search.svg"); + background-repeat: no-repeat; + background-position: 5px center; + padding: 13px 20px 13px 30px; +} + +.radio-buttons input, .checkboxes input { + background-color: #FFF; + border: 1px solid #FFF; + border-radius: 6px 0 0 6px; + display: inline-flex; + padding: 13px 20px; + justify-content: center; + align-items: center; + gap: 10px; +} + +.button-apply { + background-color: #EF4934; + color: #FFF; + border-radius: 0 6px 6px 0; + border: 1px solid #EF4934; + display: inline-flex; + padding: 13px 20px; + justify-content: center; + align-items: center; + gap: 10px; +} + +.ma-logo { + display: flex; + align-items: center; +} + +.MAlogo { + margin-left: 53px; +} + +.navigation { + text-align: right; + display: flex; + align-items: center; +} + +.navigation ul { + list-style: none; + padding: 0; + margin: 0; +} + +.navigation-item { + font-style: normal; + font-weight: 500; + font-size: 16px; + color: #FFF; + line-height: 19px; + margin-right: 50px; +} + +.about, .login, .calculator { + text-decoration: none; +} + +.content { + max-width: 1280px; + padding-inline: 52px; + padding-bottom: 52px; +} + +.headline { + color: #221F1F; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 32px; + margin-block: 40px; +} + +.card-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-auto-rows: auto; + gap: 22px; + justify-content: flex-start; +} + +.card { + background-color: #ECECEC; + width: 100%; + border-radius: 12px; + padding: 12px; + display: flex; + flex-direction: column; + font-size: 14px; + gap: 22px; +} + +.card-header { + display: flex; + gap: 12px; + align-items: normal; +} + +.card-image { + width: 90px; + height: 90px; + border-radius: 12px; +} + +.card-title { + font-size: 18px; + font-weight: 700; +} + +.card-content { + display: flex; + gap: 16px; + flex-direction: column; +} + +.card-text { + margin: 0; +} + +.card-text-bold { + font-weight: 600; +} + +.card-property { + display: flex; + gap: 12px; +} + +.card-property-name { + margin-top: 6px; +} + +.card-property-tags { + display: flex; + gap: 6px; + flex-wrap: wrap; +} + +.card-property-tag { + padding: 7px 9px; + background: #000; + color: #FFF; + border-radius: 3px; +} + +.group-yellow { + background-color: #FDB714; +} + +.group-red { + background-color: #EF4934; +} + +.group-blue { + background-color: #3447EF; +} + +.group-pink { + background-color: #FF87F3; +} + +footer { + background-color: #EF4934; + color: #FFF; + padding: 20px; + text-align: center; + width: 100%; + bottom: 0; +} + +.footer-text { + font-weight: 400; + font-size: 22px; + line-height: 32px; +} + +.link { + color: #FFF; + text-decoration: none; +} + +.social-networks { + margin-block: 30px; +} + +.loading { + display: inline-block; + width: 50px; + height: 50px; + border: 3px solid rgb(239 73 52); + border-radius: 50%; + border-top-color: #FFF; + animation: spin 1s ease-in-out infinite; + -webkit-animation: spin 1s ease-in-out infinite; +} + +@keyframes spin { + to { -webkit-transform: rotate(360deg); } +} + +@-webkit-keyframes spin { + to { -webkit-transform: rotate(360deg); } +} + +.loading-container { + width: 100%; + display: flex; + justify-content: center; + padding: 60px; +} + +.hide { + display: none; +} diff --git a/docs/rogerosha/PokemonProject/css/result.css b/docs/rogerosha/PokemonProject/css/result.css new file mode 100644 index 00000000..eeffa068 --- /dev/null +++ b/docs/rogerosha/PokemonProject/css/result.css @@ -0,0 +1,62 @@ +* { + box-sizing: border-box; +} + +body { + font-family: Roboto, sans-serif; + display: flex; + flex-direction: column; + align-items: center; +} + +.headline-result { + font-family: Roboto, sans-serif; + display: flex; + justify-content: center; + align-items: center; + margin: 60px; +} + +.button-return { + font-size: 22px; + font-weight: 600; +} + +button { + background-color: #EF4934; + color: #FFF; + text-decoration: none; + cursor: pointer; + display: flex; + padding: 27px 258px; + justify-content: center; + align-items: center; + border-radius: 6px; + gap: 10px; + border: 1px solid #EF4934; +} + +footer { + background-color: #EF4934; + color: #FFF; + padding: 20px; + text-align: center; + width: 100%; + bottom: 0; + position: fixed; +} + +.footer-text { + font-weight: 400; + font-size: 22px; + line-height: 32px; +} + +.link { + color: #FFF; + text-decoration: none; +} + +.social-networks { + margin-block: 30px; +} diff --git a/docs/rogerosha/PokemonProject/css/style.css b/docs/rogerosha/PokemonProject/css/style.css new file mode 100644 index 00000000..e3fdb4cf --- /dev/null +++ b/docs/rogerosha/PokemonProject/css/style.css @@ -0,0 +1,130 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Roboto, sans-serif; +} + +.upper-header { + background-color: #333; + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + padding: 10px; + color: #333; + gap: 50px; + width: 100%; + justify-content: space-between; +} + +.ma-logo { + display: flex; + align-items: center; +} + +.MAlogo { + margin-left: 53px; +} + +.navigation { + text-align: right; + display: flex; + align-items: center; +} + +.navigation ul { + list-style: none; + padding: 0; + margin: 0; +} + +.navigation-item { + font-style: normal; + font-weight: 500; + font-size: 16px; + color: #FFF; + line-height: 19px; + margin-right: 50px; +} + +.pokemons, .login, .calculator { + text-decoration: none; +} + +.content { + display: flex; +} + +.white-rectangle { + height: 479px; + background-color: #FFF; + margin-left: 53px; + margin-top: 60px; + display: flex; + flex-direction: column; + padding-bottom: 52px; +} + +.pokemon { + width: 532px; + height: 275px; + border-radius: 22px; + padding-top: 60px; + padding-left: 53px; +} + +.headline { + color: #221F1F; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 32px; + margin-top: 0; + margin-left: 25px; +} + +.text-about { + color: #221F1F; + font-style: normal; + font-weight: 400; + font-size: 22px; + line-height: 32px; + margin-left: 25px; + margin-top: auto; + height: 409px; +} + +.link { + color: #EF4934; + font-style: normal; + font-weight: 400; + font-size: 22px; + line-height: 32px; +} + +footer { + background-color: #EF4934; + color: #FFF; + padding: 20px; + text-align: center; + width: 100%; + bottom: 0; +} + +.footer-text { + font-weight: 400; + font-size: 22px; + line-height: 32px; + color: #FFF; +} + +.footer-link { + color: #FFF; + text-decoration: none; +} + +.social-networks { + margin-block: 30px; +} diff --git a/docs/rogerosha/PokemonProject/images/MA-logo.svg b/docs/rogerosha/PokemonProject/images/MA-logo.svg new file mode 100644 index 00000000..0a3ef71d --- /dev/null +++ b/docs/rogerosha/PokemonProject/images/MA-logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/docs/rogerosha/PokemonProject/images/Urshifu.svg b/docs/rogerosha/PokemonProject/images/Urshifu.svg new file mode 100644 index 00000000..0f306573 --- /dev/null +++ b/docs/rogerosha/PokemonProject/images/Urshifu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/docs/rogerosha/PokemonProject/images/checkmark.png b/docs/rogerosha/PokemonProject/images/checkmark.png new file mode 100644 index 0000000000000000000000000000000000000000..61f9f9dc90aa57b71132dcadfb82d521908ffb24 GIT binary patch literal 305 zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa&H|6fVg?3oVGw3ym^DWND9BhG zelF{r5}E+t#&=u* literal 0 HcmV?d00001 diff --git a/docs/rogerosha/PokemonProject/images/networks.svg b/docs/rogerosha/PokemonProject/images/networks.svg new file mode 100644 index 00000000..eecf1b24 --- /dev/null +++ b/docs/rogerosha/PokemonProject/images/networks.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/docs/rogerosha/PokemonProject/images/pokemon.svg b/docs/rogerosha/PokemonProject/images/pokemon.svg new file mode 100644 index 00000000..25ecfd77 --- /dev/null +++ b/docs/rogerosha/PokemonProject/images/pokemon.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/docs/rogerosha/PokemonProject/images/search.svg b/docs/rogerosha/PokemonProject/images/search.svg new file mode 100644 index 00000000..4c0cb330 --- /dev/null +++ b/docs/rogerosha/PokemonProject/images/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/rogerosha/PokemonProject/index.html b/docs/rogerosha/PokemonProject/index.html new file mode 100644 index 00000000..371fc701 --- /dev/null +++ b/docs/rogerosha/PokemonProject/index.html @@ -0,0 +1,64 @@ + + + + + + + PokemonProject: About + + + +
+ + +
+
+ Pokemon +
+

About me

+

+ Hi! My name is Katya 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 telegram + and/or check out my GitHub. +

+
+
+ + + diff --git a/docs/rogerosha/PokemonProject/login.html b/docs/rogerosha/PokemonProject/login.html new file mode 100644 index 00000000..f00f8acf --- /dev/null +++ b/docs/rogerosha/PokemonProject/login.html @@ -0,0 +1,70 @@ + + + + + + + PokemonProject: Login + + + +
+ + +
+
+

Login page

+
+
+ +
+ + +
+
+
+ +
+
+
+ +
+
+
+ + + + diff --git a/docs/rogerosha/PokemonProject/pokemons.html b/docs/rogerosha/PokemonProject/pokemons.html new file mode 100644 index 00000000..4b23cfe1 --- /dev/null +++ b/docs/rogerosha/PokemonProject/pokemons.html @@ -0,0 +1,118 @@ + + + + + + + PokemonProject: Pokemons + + + +
+ + +
+
+ +
+ + + + +
+
+ + + + +
+
+
+ +
+ +
+
+
+

Study Project "Pokemons"

+ +
+
+
+ +
+
+ + + + + + + + + + + diff --git a/docs/rogerosha/PokemonProject/result.html b/docs/rogerosha/PokemonProject/result.html new file mode 100644 index 00000000..501bd356 --- /dev/null +++ b/docs/rogerosha/PokemonProject/result.html @@ -0,0 +1,26 @@ + + + + + + PokemonProject + + + +

Success!

+
+ +
+ + + diff --git a/docs/rogerosha/PokemonProject/scripts/pokemons.js b/docs/rogerosha/PokemonProject/scripts/pokemons.js new file mode 100644 index 00000000..86749a0e --- /dev/null +++ b/docs/rogerosha/PokemonProject/scripts/pokemons.js @@ -0,0 +1,96 @@ +function createCardElement(pokemon) { + /** + * @type {HTMLTemplateElement} + * */ + const cardTemplateElement = document.querySelector('[data-type="card-template"]').content.cloneNode(true); + + const cardTitleElement = cardTemplateElement.querySelector('[data-card-title]'); + const cardImageElement = cardTemplateElement.querySelector('[data-card-image]'); + const cardHeightElement = cardTemplateElement.querySelector('[data-card-height]'); + const cardWeightElement = cardTemplateElement.querySelector('[data-card-weight]'); + const cardNumberElement = cardTemplateElement.querySelector('[data-card-number]'); + const cardTypesElement = cardTemplateElement.querySelector('[data-card-types]'); + const cardWeaknessesElement = cardTemplateElement.querySelector('[data-card-weaknesses]'); + + cardTitleElement.innerText = pokemon.name; + + cardImageElement.src = pokemon.ThumbnailImage; + cardImageElement.alt = pokemon.ThumbnailAltText; + + cardHeightElement.innerText = pokemon.height; + cardWeightElement.innerText = pokemon.weight; + cardNumberElement.innerText = pokemon.number; + + pokemon.type.forEach((type) => { + const cardTypeTemplateElement = document.querySelector('[data-type="card-type-template"]').content.cloneNode(true); + const cardTypeElement = cardTypeTemplateElement.querySelector('[data-card-type]'); + cardTypeElement.innerText = type; + + cardTypesElement.append(cardTypeTemplateElement); + }); + + pokemon.weakness.forEach((weakness) => { + const cardWeaknessTemplateElement = document.querySelector('[data-type="card-weakness-template"]').content.cloneNode(true); + const cardWeaknessElement = cardWeaknessTemplateElement.querySelector('[data-card-weakness]'); + cardWeaknessElement.innerText = weakness; + + cardWeaknessesElement.append(cardWeaknessTemplateElement); + }); + + return cardTemplateElement; +} + +function renderCards(container, pokemons) { + container.innerHTML = ''; + const fragment = new DocumentFragment(); + + pokemons.forEach((pokemon) => { + fragment.append(createCardElement(pokemon)); + }); + + container.append(fragment); +} + +function getPokemons() { + const loadingElement = document.querySelector('[data-card-loading]'); + loadingElement.classList.remove('hide'); + + return fetch('https://my-json-server.typicode.com/electrovladyslav/pokemon-json-server/pokemons') + .then((response) => { + loadingElement.classList.add('hide'); + return response.json(); + }) + .then((pokemons) => pokemons.slice(0, 50)); +} + +async function init() { + const cardListElement = document.querySelector('[data-card-list]'); + const sizeFormElement = document.querySelector('[data-size-form]'); + + const pokemons = await getPokemons(); + + renderCards(cardListElement, pokemons); + + sizeFormElement.addEventListener('change', () => { + const selectedSizes = Array.from(sizeFormElement.size) + .filter((element) => element.checked) + .map((element) => ({ value: element.value, type: element.id })); + + const filteredPokemons = selectedSizes.length === 0 ? pokemons : pokemons + .filter((pokemon) => selectedSizes.some((size) => { + if (size.type === 'big') { + return pokemon.height > size.value; + } + + if (size.type === 'small') { + return pokemon.height < size.value; + } + + return true; + })); + + renderCards(cardListElement, filteredPokemons); + }); +} + +init(); diff --git a/docs/rogerosha/PokemonProject/scripts/script.js b/docs/rogerosha/PokemonProject/scripts/script.js new file mode 100644 index 00000000..9faca7f8 --- /dev/null +++ b/docs/rogerosha/PokemonProject/scripts/script.js @@ -0,0 +1,70 @@ +const EMAIL_INPUT_ID = 'email'; +const PASSWORD_INPUT_ID = 'password'; +const NOT_A_ROBOT_CHECKBOX_ID = 'checkbox'; +const SUBMIT_BUTTON_ID = 'button-login'; +// const ERRORS_CONTAINER_ID = 'errors-container'; +const RESULT_PAGE_PATH = 'result.html'; + +const submitButton = document.getElementById(SUBMIT_BUTTON_ID); + +function getValueById(elementId) { + const element = document.getElementById(elementId); + const type = element.getAttribute('type'); + return type === 'checkbox' ? element.checked : element.value; +} + +function deleteErrors() { + const errorElements = document.querySelectorAll('.error'); + errorElements.forEach((element) => element.remove()); +} + +function setErrors(inputData) { + deleteErrors(); + + Object.entries(inputData).forEach(([elementId, errorText]) => { + const errorElement = document.createElement('p'); + errorElement.classList.add('error'); + errorElement.textContent = errorText; + + const inputContainer = document.getElementById(elementId).parentElement; + inputContainer.appendChild(errorElement); + }); +} + +function navigateToResultPage() { + window.location.href = RESULT_PAGE_PATH; +} + +function isEmail(email) { + return /\S+@\S+\.\S+/.test(email); +} + +function validateForm() { + deleteErrors(); + + const email = getValueById(EMAIL_INPUT_ID).trim(); + const password = getValueById(PASSWORD_INPUT_ID); + const notARobotChecked = getValueById(NOT_A_ROBOT_CHECKBOX_ID); + + const inputData = {}; + + if (!isEmail(email)) { + inputData[EMAIL_INPUT_ID] = 'Incorrect email'; + } + + if (password.length < 8 || password.length > 12) { + inputData[PASSWORD_INPUT_ID] = 'Password must have 8-12 characters'; + } + + if (!notARobotChecked) { + inputData[NOT_A_ROBOT_CHECKBOX_ID] = 'Please, confirm you are not a robot'; + } + + if (Object.keys(inputData).length === 0) { + navigateToResultPage(); + } else { + setErrors(inputData); + } +} + +submitButton.onclick = validateForm; From e107dc63ea0d16944cd4c007f67107a11d85f2eb Mon Sep 17 00:00:00 2001 From: Katya Vakulenko Date: Sat, 6 Jan 2024 19:29:07 +0100 Subject: [PATCH 02/14] add project to the new folder according to the logic --- .../{PokemonProject/index.html => about.html} | 6 +++--- .../{5-logic/index.html => calculator.html} | 16 ++++++++-------- .../{5-logic/style.css => css/calculator.css} | 0 .../{PokemonProject => }/css/login.css | 0 .../{PokemonProject => }/css/pokemons.css | 0 .../{PokemonProject => }/css/result.css | 0 .../{PokemonProject => }/css/style.css | 0 .../{PokemonProject => }/images/MA-logo.svg | 0 .../{PokemonProject => }/images/Urshifu.svg | 0 .../{PokemonProject => }/images/checkmark.png | Bin .../{PokemonProject => }/images/networks.svg | 0 .../{PokemonProject => }/images/pokemon.svg | 0 .../{PokemonProject => }/images/search.svg | 0 docs/rogerosha/{PokemonProject => }/login.html | 10 +++++----- .../{PokemonProject => }/pokemons.html | 8 ++++---- docs/rogerosha/{PokemonProject => }/result.html | 2 +- .../script.js => scripts/calculator-script.js} | 0 docs/rogerosha/{5-logic => scripts}/homework.js | 0 .../{PokemonProject => }/scripts/pokemons.js | 0 .../{PokemonProject => }/scripts/script.js | 0 .../4-js_basics/basics.js | 2 +- .../4-js_basics/style.css | 2 +- .../GamesProject/success.html | 2 +- 23 files changed, 24 insertions(+), 24 deletions(-) rename docs/rogerosha/{PokemonProject/index.html => about.html} (90%) rename docs/rogerosha/{5-logic/index.html => calculator.html} (77%) rename docs/rogerosha/{5-logic/style.css => css/calculator.css} (100%) rename docs/rogerosha/{PokemonProject => }/css/login.css (100%) rename docs/rogerosha/{PokemonProject => }/css/pokemons.css (100%) rename docs/rogerosha/{PokemonProject => }/css/result.css (100%) rename docs/rogerosha/{PokemonProject => }/css/style.css (100%) rename docs/rogerosha/{PokemonProject => }/images/MA-logo.svg (100%) rename docs/rogerosha/{PokemonProject => }/images/Urshifu.svg (100%) rename docs/rogerosha/{PokemonProject => }/images/checkmark.png (100%) rename docs/rogerosha/{PokemonProject => }/images/networks.svg (100%) rename docs/rogerosha/{PokemonProject => }/images/pokemon.svg (100%) rename docs/rogerosha/{PokemonProject => }/images/search.svg (100%) rename docs/rogerosha/{PokemonProject => }/login.html (88%) rename docs/rogerosha/{PokemonProject => }/pokemons.html (93%) rename docs/rogerosha/{PokemonProject => }/result.html (96%) rename docs/rogerosha/{5-logic/script.js => scripts/calculator-script.js} (100%) rename docs/rogerosha/{5-logic => scripts}/homework.js (100%) rename docs/rogerosha/{PokemonProject => }/scripts/pokemons.js (100%) rename docs/rogerosha/{PokemonProject => }/scripts/script.js (100%) diff --git a/docs/rogerosha/PokemonProject/index.html b/docs/rogerosha/about.html similarity index 90% rename from docs/rogerosha/PokemonProject/index.html rename to docs/rogerosha/about.html index 371fc701..51926255 100644 --- a/docs/rogerosha/PokemonProject/index.html +++ b/docs/rogerosha/about.html @@ -18,16 +18,16 @@ diff --git a/docs/rogerosha/5-logic/index.html b/docs/rogerosha/calculator.html similarity index 77% rename from docs/rogerosha/5-logic/index.html rename to docs/rogerosha/calculator.html index 3aa722e1..797f1051 100644 --- a/docs/rogerosha/5-logic/index.html +++ b/docs/rogerosha/calculator.html @@ -4,27 +4,27 @@ JS Logic
@@ -57,11 +57,11 @@

Calculate Pokemons

- - + +

Made with 🤍 on course 'Frontend for beginners' from Masters Academy in 2023, by Katya Sharova diff --git a/docs/rogerosha/5-logic/style.css b/docs/rogerosha/css/calculator.css similarity index 100% rename from docs/rogerosha/5-logic/style.css rename to docs/rogerosha/css/calculator.css diff --git a/docs/rogerosha/PokemonProject/css/login.css b/docs/rogerosha/css/login.css similarity index 100% rename from docs/rogerosha/PokemonProject/css/login.css rename to docs/rogerosha/css/login.css diff --git a/docs/rogerosha/PokemonProject/css/pokemons.css b/docs/rogerosha/css/pokemons.css similarity index 100% rename from docs/rogerosha/PokemonProject/css/pokemons.css rename to docs/rogerosha/css/pokemons.css diff --git a/docs/rogerosha/PokemonProject/css/result.css b/docs/rogerosha/css/result.css similarity index 100% rename from docs/rogerosha/PokemonProject/css/result.css rename to docs/rogerosha/css/result.css diff --git a/docs/rogerosha/PokemonProject/css/style.css b/docs/rogerosha/css/style.css similarity index 100% rename from docs/rogerosha/PokemonProject/css/style.css rename to docs/rogerosha/css/style.css diff --git a/docs/rogerosha/PokemonProject/images/MA-logo.svg b/docs/rogerosha/images/MA-logo.svg similarity index 100% rename from docs/rogerosha/PokemonProject/images/MA-logo.svg rename to docs/rogerosha/images/MA-logo.svg diff --git a/docs/rogerosha/PokemonProject/images/Urshifu.svg b/docs/rogerosha/images/Urshifu.svg similarity index 100% rename from docs/rogerosha/PokemonProject/images/Urshifu.svg rename to docs/rogerosha/images/Urshifu.svg diff --git a/docs/rogerosha/PokemonProject/images/checkmark.png b/docs/rogerosha/images/checkmark.png similarity index 100% rename from docs/rogerosha/PokemonProject/images/checkmark.png rename to docs/rogerosha/images/checkmark.png diff --git a/docs/rogerosha/PokemonProject/images/networks.svg b/docs/rogerosha/images/networks.svg similarity index 100% rename from docs/rogerosha/PokemonProject/images/networks.svg rename to docs/rogerosha/images/networks.svg diff --git a/docs/rogerosha/PokemonProject/images/pokemon.svg b/docs/rogerosha/images/pokemon.svg similarity index 100% rename from docs/rogerosha/PokemonProject/images/pokemon.svg rename to docs/rogerosha/images/pokemon.svg diff --git a/docs/rogerosha/PokemonProject/images/search.svg b/docs/rogerosha/images/search.svg similarity index 100% rename from docs/rogerosha/PokemonProject/images/search.svg rename to docs/rogerosha/images/search.svg diff --git a/docs/rogerosha/PokemonProject/login.html b/docs/rogerosha/login.html similarity index 88% rename from docs/rogerosha/PokemonProject/login.html rename to docs/rogerosha/login.html index f00f8acf..f670c273 100644 --- a/docs/rogerosha/PokemonProject/login.html +++ b/docs/rogerosha/login.html @@ -18,13 +18,13 @@

- + diff --git a/docs/rogerosha/PokemonProject/pokemons.html b/docs/rogerosha/pokemons.html similarity index 93% rename from docs/rogerosha/PokemonProject/pokemons.html rename to docs/rogerosha/pokemons.html index 4b23cfe1..4756f56c 100644 --- a/docs/rogerosha/PokemonProject/pokemons.html +++ b/docs/rogerosha/pokemons.html @@ -18,16 +18,16 @@ @@ -113,6 +113,6 @@
- + diff --git a/docs/rogerosha/PokemonProject/result.html b/docs/rogerosha/result.html similarity index 96% rename from docs/rogerosha/PokemonProject/result.html rename to docs/rogerosha/result.html index 501bd356..7fa58ada 100644 --- a/docs/rogerosha/PokemonProject/result.html +++ b/docs/rogerosha/result.html @@ -11,7 +11,7 @@

Success!

- +