diff --git a/bjs/07_Number_and_string/index.html b/bjs/07_Number_and_string/index.html index 645e1c0f..7d556db0 100644 --- a/bjs/07_Number_and_string/index.html +++ b/bjs/07_Number_and_string/index.html @@ -4,11 +4,12 @@ Калькулятор + integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> +
@@ -17,11 +18,93 @@
-
- + +
+
-
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + +
+ + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
diff --git a/bjs/07_Number_and_string/script.js b/bjs/07_Number_and_string/script.js index 4085abce..9a4ed23a 100644 --- a/bjs/07_Number_and_string/script.js +++ b/bjs/07_Number_and_string/script.js @@ -1,12 +1,127 @@ -let lastOperand = 0; -let operation = null; +let lastOperand = 0; //последний операнд +let operation = null;//выбранная операция -const inputWindow = document.getElementById('inputWindow'); +const inputWindow = document.getElementById('inputWindow'); //окно, где отображается число +// Кнопка 1. Добовляет к inputWindow 1 по клику +document.getElementById('btn_1').addEventListener('click', function () { + inputWindow.value += '1'; +}) +// Кнопка 2. Добовляет к inputWindow 1 по клику +document.getElementById('btn_2').addEventListener('click', function () { + inputWindow.value += '2'; +}) +// Кнопка 3. Добовляет к inputWindow 1 по клику +document.getElementById('btn_3').addEventListener('click', function () { + inputWindow.value += '3'; +}) +// Кнопка 4. Добовляет к inputWindow 1 по клику +document.getElementById('btn_4').addEventListener('click', function () { + inputWindow.value += '4'; +}) +// Кнопка 5. Добовляет к inputWindow 1 по клику +document.getElementById('btn_5').addEventListener('click', function () { + inputWindow.value += '5'; +}) +// Кнопка 6. Добовляет к inputWindow 1 по клику +document.getElementById('btn_6').addEventListener('click', function () { + inputWindow.value += '6'; +}) +// Кнопка 7. Добовляет к inputWindow 1 по клику +document.getElementById('btn_7').addEventListener('click', function () { + inputWindow.value += '7'; +}) +// Кнопка 8. Добовляет к inputWindow 1 по клику +document.getElementById('btn_8').addEventListener('click', function () { + inputWindow.value += '8'; +}) +// Кнопка 9. Добовляет к inputWindow 1 по клику +document.getElementById('btn_9').addEventListener('click', function () { + inputWindow.value += '9'; +}) +// Кнопка 0. Добовляет к inputWindow 1 по клику +document.getElementById('btn_0').addEventListener('click', function () { + inputWindow.value += '0'; +}) + + +// Кнопка суммы запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода +document.getElementById('btn_sum').addEventListener('click', function () { + lastOperand = parseInt(inputWindow.value); //чтобы исключить конкотенацию операнды переводим в числовой вид с помощью parseInt(); + operation = 'sum'; + inputWindow.value = ''; +}) + +// Кнопка разности запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода +document.getElementById('btn_def').addEventListener('click', function () { + lastOperand = parseInt(inputWindow.value); + operation = 'def'; + inputWindow.value = ''; +}) + + +// Кнопка умножения запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода +document.getElementById('btn_multiply').addEventListener('click', function () { + lastOperand = parseInt(inputWindow.value); + operation = 'btn_multiply'; + inputWindow.value = ''; +}) + +// Кнопка деления запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода +document.getElementById('btn_divide').addEventListener('click', function () { + lastOperand = parseInt(inputWindow.value); + operation = 'btn_divide'; + inputWindow.value = ''; +}) + +// Кнопка квадратного корня запоминает введенное число lastOperand, запоминается операция operation, очищается поле ввода +document.getElementById('btn_sqrt').addEventListener('click', function () { + lastOperand = parseInt(inputWindow.value); + operation = 'btn_sqrt'; + inputWindow.value = ''; +}) + +// Находим элемент по ID слушаем по клику если действие соответствует необходимому, а затем(ниже) применяем операцию к числу которое в памяти от числа котороое введено. Затем все очищаем и выводим результат +document.getElementById('btn_calc').addEventListener('click', function () { + if(operation==='sum'){ + const result = lastOperand + parseInt(inputWindow.value); + operation = null; + lastOperand = 0; + inputWindow.value = result; + } + if(operation==='def'){ + const result = lastOperand - parseInt(inputWindow.value); + operation = null; + lastOperand = 0; + inputWindow.value = result; + } + if(operation==='btn_multiply'){ + const result = lastOperand * parseInt(inputWindow.value); + operation = null; + lastOperand = 0; + inputWindow.value = result; + } + if(operation==='btn_divide'){ + const result = lastOperand / parseInt(inputWindow.value); + operation = null; + lastOperand = 0; + inputWindow.value = result; + } + if(operation==='btn_sqrt'){ + const result = Math.sqrt(parseInt(inputWindow.value)); + operation = null; + lastOperand = 0; + inputWindow.value = result; + } + + +}) +// Очистка экрана с навесом на кнопку клик события document.getElementById('btn_clr').addEventListener('click', function () { lastOperand = 0; operation = null; + // Ниже очищение поля inputWindow.value = ''; }) diff --git a/bjs/07_Number_and_string/style.css b/bjs/07_Number_and_string/style.css index 5257d402..f4593456 100644 --- a/bjs/07_Number_and_string/style.css +++ b/bjs/07_Number_and_string/style.css @@ -1,9 +1,17 @@ + .calc-row { height: 100vh; font-family: 'Share Tech Mono', monospace; } +.card{ + background: black; +} + .input-window { text-align: end; font-size: x-large; } +#col{ + border: 1px solid; +} diff --git a/bjs/08_if_else/index.html b/bjs/08_if_else/index.html index ff5d71f1..4548595b 100644 --- a/bjs/08_if_else/index.html +++ b/bjs/08_if_else/index.html @@ -1,42 +1,112 @@ - - - Угадайка - - - - - -
-
-
-
-
-

Вопрос №5

-
-
-
-
-

Вы загадали число 5?

-
-
+ + + Guessing Game / Угадайка + + + + + +
+
+
+
+
+

Игра УГАДАЙКА

+ + + + + + +
+ +
+ + + + + +
+
-
- - + + diff --git a/bjs/08_if_else/script.js b/bjs/08_if_else/script.js index d5a2e4a5..943dcf1f 100644 --- a/bjs/08_if_else/script.js +++ b/bjs/08_if_else/script.js @@ -1,46 +1,358 @@ -let minValue = parseInt(prompt('Минимальное знание числа для игры','0')); -let maxValue = parseInt(prompt('Максимальное знание числа для игры','100')); -alert(`Загадайте любое целое число от ${minValue} до ${maxValue}, а я его угадаю`); -let answerNumber = Math.floor((minValue + maxValue) / 2); -let orderNumber = 1; -let gameRun = true; +document.getElementById("btnTobegin").addEventListener("click", function () { + document.querySelector(".title-page").classList.add("hidden"); + document.querySelector(".value-range").classList.remove("hidden"); + document.querySelector(".valueRange").classList.remove("hidden"); + document.querySelector(".form-inline").classList.remove("hidden"); + document.querySelector("#btnTobegin").classList.add("hidden"); + document.querySelector("#btnProceed").classList.remove("hidden"); +}); -const orderNumberField = document.getElementById('orderNumberField'); -const answerField = document.getElementById('answerField'); - -orderNumberField.innerText = orderNumber; -answerField.innerText = `Вы загадали число ${answerNumber }?`; - -document.getElementById('btnRetry').addEventListener('click', function () { +document.getElementById("btnProceed").addEventListener("click", function () { + document.querySelector(".value-range").classList.add("hidden"); + document.querySelector(".terms").classList.remove("hidden"); + document.querySelector(".valueRange").classList.add("hidden"); + document.querySelector(".form-inline").classList.add("hidden"); + document.querySelector(".guessNumber").classList.remove("hidden"); + document.querySelector("#btnProceed").classList.add("hidden"); + document.querySelector("#btnPlay").classList.remove("hidden"); + minValue = parseInt(document.querySelector("#formInputMin").value); + maxValue = parseInt(document.querySelector("#formInputMax").value); + minValue = + minValue < -999 + ? (minValue = -999) + : minValue > 999 + ? (minValue = 999) + : minValue; + maxValue = + maxValue > 999 + ? (maxValue = 999) + : maxValue < -999 + ? (maxValue = -999) + : maxValue; + if (maxValue < minValue) { + [maxValue, minValue] = [minValue, maxValue]; + } + if (Number.isNaN(maxValue) || Number.isNaN(minValue)) { minValue = 0; maxValue = 100; - orderNumber = 0; -}) - -document.getElementById('btnOver').addEventListener('click', function () { - if (gameRun){ - if (minValue === maxValue){ - const phraseRandom = Math.round( Math.random()); - const answerPhrase = (phraseRandom === 1) ? - `Вы загадали неправильное число!\n\u{1F914}` : - `Я сдаюсь..\n\u{1F92F}`; - - answerField.innerText = answerPhrase; - gameRun = false; - } else { - minValue = answerNumber + 1; - answerNumber = Math.floor((minValue + maxValue) / 2); - orderNumber++; - orderNumberField.innerText = orderNumber; - answerField.innerText = `Вы загадали число ${answerNumber }?`; + } + guessNumber.innerText = `Загадайте любое целое число от ${minValue} до ${maxValue}, а я его угадаю`; +}); + +document.getElementById("btnPlay").addEventListener("click", function () { + document.querySelector(".terms").classList.add("hidden"); + document.querySelector(".question").classList.remove("hidden"); + document.querySelector(".guessNumber").classList.add("hidden"); + document.querySelector(".no-gutters").classList.remove("hidden"); + document.querySelector("#btnPlay").classList.add("hidden"); + document.querySelector("#btnLess").classList.remove("hidden"); + document.querySelector("#btnEqual").classList.remove("hidden"); + document.querySelector("#btnOver").classList.remove("hidden"); + document.querySelector(".btn-link").classList.remove("hidden"); + + let answerNumber = Math.floor((minValue + maxValue) / 2); + let orderNumber = 1; + let gameRun = true; + + const orderNumberField = document.getElementById("orderNumberField"); + const answerField = document.getElementById("answerField"); + + let units = [ + "", + "один", + "два", + "три", + "четыре", + "пять", + "шесть", + "семь", + "восемь", + "девять", + ]; + let teens = [ + "", + "десять", + "одинадцать", + "двенадцать", + "тринадцать", + "четырнадцать", + "пятнадцать", + "шестнадцать", + "семнадцать", + "восемнадцать", + "девятнадцать", + ]; + let dozens = [ + "", + "двадцать", + "тридцать", + "сорок", + "пятьдесят", + "шестьдесят", + "семьдесят", + "восемьдесят", + "девяносто", + ]; + let hundreds = [ + "", + "сто", + "двести", + "триста", + "четыреста", + "пятьсот", + "шестьсот", + "семьсот", + "восемьсот", + "девятьсот", + ]; + + function numberToText() { + let number = Math.abs(answerNumber); + let text = ""; + + if (number == 0) { + text = "ноль"; + return text; + } + + if (number <= 9) { + return units[Math.floor(Math.abs(number) / 1)]; + } + + if (number > 9 && number < 20) { + return teens[Math.floor(number / 10 + (number % 10))]; + } + + if (number >= 20 && number <= 99) { + return ( + dozens[Math.floor(number / 10) - 1] + + " " + + units[Math.floor(number % 10)] + ); + } + + if (number >= 100 && number <= 999) { + return hundreds[Math.floor(number / 100)] + " " + numberToTextHundreds(); + } + } + + function numberToTextHundreds() { + let unitsTeensDozens = Math.abs(answerNumber) % 100; + + if (unitsTeensDozens <= 9) { + return units[Math.floor(unitsTeensDozens / 1)]; + } + + if (unitsTeensDozens > 9 && unitsTeensDozens < 20) { + return teens[Math.floor(unitsTeensDozens / 10) + (unitsTeensDozens % 10)]; + } + + if (unitsTeensDozens >= 20 && unitsTeensDozens <= 99) { + return ( + dozens[Math.floor(unitsTeensDozens / 10) - 1] + + " " + + units[Math.floor(unitsTeensDozens % 10)] + ); + } + } + + orderNumberField.innerText = orderNumber; + answerField.innerText = + answerNumber >= 0 + ? numberToText().length < 20 && answerNumber >= 0 + ? `Вы загадали число ${numberToText()}?` + : `Вы загадали число ${answerNumber}?` + : numberToText().length < 20 + ? `Вы загадали число минус ${numberToText()}?` + : `Вы загадали число ${answerNumber}?`; + + document.getElementById("btnLess").addEventListener("click", function () { + if (gameRun) { + if (minValue === maxValue || minValue == answerNumber) { + const phraseRandom = Math.round(Math.random() * 3); + switch (phraseRandom) { + case 0: + answerPhrase = `Вы загадали неправильное число!\n\u{1F914}`; + break; + + case 1: + answerPhrase = `Вы забыли, какое число загадали?\n\u{1F92A}`; + break; + + case 2: + answerPhrase = `Вы ошиблись с числом!\n\u{1F9D0}`; + break; + + case 3: + answerPhrase = `Не жульничайте!\n\u{1F620}`; + break; } + answerField.innerText = answerPhrase; + gameRun = false; + } else { + maxValue = answerNumber - 1; + answerNumber = Math.floor((minValue + maxValue) / 2); + orderNumber++; + orderNumberField.innerText = orderNumber; + const phraseRandom = Math.round(Math.random() * 4); + switch (phraseRandom) { + case 1: + answerPhrase = `Наверное, это число `; + break; + + case 2: + answerPhrase = `Возможно `; + break; + + case 3: + answerPhrase = `Это число `; + break; + + case 4: + answerPhrase = `Скорее всего это число `; + break; + } + answerField.innerText = + answerNumber >= 0 + ? numberToText().length < 20 && answerNumber >= 0 + ? `Вы загадали число ${numberToText()}?` + : `Вы загадали число ${answerNumber}?` + : numberToText().length < 20 + ? `Вы загадали число минус ${numberToText()}?` + : `Вы загадали число ${answerNumber}?`; + } } -}) + }); + + document.getElementById("btnOver").addEventListener("click", function () { + if (gameRun) { + if (minValue === maxValue) { + const phraseRandom = Math.round(Math.random() * 3); + switch (phraseRandom) { + case 0: + answerPhrase = `Вы загадали неправильное число!\n\u{1F914}`; + break; + + case 1: + answerPhrase = `Вы забыли, какое число загадали?\n\u{1F92A}`; + break; -document.getElementById('btnEqual').addEventListener('click', function () { - if (gameRun){ - answerField.innerText = `Я всегда угадываю\n\u{1F60E}` + case 2: + answerPhrase = `Вы ошиблись с числом!\n\u{1F9D0}`; + break; + + case 3: + answerPhrase = `Не жульничайте!\n\u{1F620}`; + break; + } + answerField.innerText = answerPhrase; gameRun = false; + } else { + minValue = answerNumber + 1; + answerNumber = Math.floor((minValue + maxValue) / 2); + orderNumber++; + orderNumberField.innerText = orderNumber; + const phraseRandom = Math.round(Math.random() * 4); + switch (phraseRandom) { + case 0: + answerPhrase = `Вы загадали число `; + break; + + case 1: + answerPhrase = `Наверное, это число `; + break; + + case 2: + answerPhrase = `Возможно `; + break; + + case 3: + answerPhrase = `Это число `; + break; + + case 4: + answerPhrase = `Скорее всего это число `; + break; + } + answerField.innerText = + answerNumber >= 0 + ? numberToText().length < 20 && answerNumber >= 0 + ? `Вы загадали число ${numberToText()}?` + : `Вы загадали число ${answerNumber}?` + : numberToText().length < 20 + ? `Вы загадали число минус ${numberToText()}?` + : `Вы загадали число ${answerNumber}?`; + } + } + }); + + document.getElementById("btnEqual").addEventListener("click", function () { + if (gameRun) { + const phraseRandom = Math.round(Math.random() * 3); + switch (phraseRandom) { + case 0: + answerPhrase = `Я всегда угадываю\n\u{1F60E}`; + break; + + case 1: + answerPhrase = `Yes! \n\u{1F60E}`; + break; + + case 2: + answerPhrase = `Отлично!\n\u{1F973}`; + break; + + case 3: + answerPhrase = `Я выиграл!\n\u{1F929}`; + break; + } + answerField.innerText = answerPhrase; + gameRun = false; } -}) + }); +}); + +document.getElementById("btnRetry").addEventListener("click", function () { + document.querySelector(".question").classList.toggle("hidden"); + document.querySelector(".value-range").classList.toggle("hidden"); + document.querySelector(".no-gutters").classList.toggle("hidden"); + document.querySelector(".valueRange").classList.toggle("hidden"); + document.querySelector(".form-inline").classList.toggle("hidden"); + document.querySelector("#btnLess").classList.toggle("hidden"); + document.querySelector("#btnEqual").classList.toggle("hidden"); + document.querySelector("#btnOver").classList.toggle("hidden"); + document.querySelector(".btn-link").classList.toggle("hidden"); + document.querySelector("#btnProceed").classList.toggle("hidden"); + document.querySelector("#formInputMin").value = ""; + document.querySelector("#formInputMax").value = ""; + minValue = + minValue < -999 + ? (minValue = -999) + : minValue > 999 + ? (minValue = 999) + : minValue; + maxValue = + maxValue > 999 + ? (maxValue = 999) + : maxValue < -999 + ? (maxValue = -999) + : maxValue; + if (maxValue < minValue) { + [maxValue, minValue] = [minValue, maxValue]; + } + if (Number.isNaN(maxValue) || Number.isNaN(minValue)) { + minValue = 0; + maxValue = 100; + } + guessNumber.innerText = `Загадайте любое целое число от ${minValue} до ${maxValue}, а я его угадаю`; + document.getElementById("btnProceed").addEventListener("click", function () { + document.querySelector(".value-range").classList.add("hidden"); + document.querySelector(".terms").classList.remove("hidden"); + document.querySelector(".valueRange").classList.add("hidden"); + document.querySelector(".form-inline").classList.add("hidden"); + document.querySelector(".guessNumber").classList.remove("hidden"); + document.querySelector("#btnProceed").classList.add("hidden"); + document.querySelector("#btnPlay").classList.remove("hidden"); + }); +}); diff --git a/bjs/08_if_else/style.css b/bjs/08_if_else/style.css index f8d7aec7..9f666baf 100644 --- a/bjs/08_if_else/style.css +++ b/bjs/08_if_else/style.css @@ -1,4 +1,59 @@ -.game-card { + + .card { + cursor: default; + margin-right: 20px; + transition: 1s; + } + + .card:hover { + -webkit-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); + -moz-box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); + box-shadow: 0px 0px 30px 0px rgba(232, 0, 0, 0.67); + } + + .game-card { height: 100vh; - font-family: 'Open Sans', monospace; -} + font-family: "Open Sans", monospace; + } + + .card-header { + background-color: rgba(127, 255, 212, 0.301); + } + + .card-footer { + background-color: rgba(127, 255, 212, 0.301); + } + + .card-body { + background-color: rgba(207, 221, 14, 0.151); + } + + .form-group { + margin-inline: auto; + padding: 5px; + width: auto; + } + + label { + padding: 0px 10px 0px 0px; + } + + #btnRetry { + text-decoration: none; + color: rgb(37, 2, 194); + } + + #btnRetry:hover { + color: rgb(255, 18, 1); + font-weight: bold; + } + + #btnEqual { + margin-right: 20px; + margin-left: 20px; + } + + .hidden { + display: none; + } + \ No newline at end of file