HW02 done

HW02/main.js

@@ -176,7 +176,7 @@ function runCurrencyTwoRatesIf() {
 
 }
 
-function runScissors() {
+function runScissors1() {
     const userResultScissors = prompt('Введите камень/ножницы/бумага');
     const words = ['камень', 'ножницы', 'бумага'];
     const randomResultScissors = Math.floor(Math.random() * words.length);
@@ -200,6 +200,127 @@ function runScissors() {
     }
 };
 
+function runScissors2() {
+
+    let userScore = 0;
+    let computerScore = 0;
+
+    let $wrapper = document.createElement('div');
+    $wrapper.className = 'wrapper';
+    document.body.appendChild($wrapper);
+
+    let $h1 = document.createElement('h1');
+    $h1.className = 'h1';
+    $h1.textContent = 'Камень Ножницы Бумага';
+    $wrapper.appendChild($h1);
+
+    let $allSpan = document.createElement('div');
+    $allSpan.className = 'allSpan';
+    $wrapper.appendChild($allSpan);
+
+    let $span1 = document.createElement('span');
+    $span1.className = 'span1';
+    $span1.textContent = `Игрок: ${computerScore}`;
+    $allSpan.appendChild($span1);
+
+    let $span2 = document.createElement('span');
+    $span2.className = 'span2';
+    $span2.textContent = `Компьютер: ${computerScore}`;
+    $allSpan.appendChild($span2);
+
+    let $choose = document.createElement('div');
+    $choose.textContent = 'Выберите ход';
+    $choose.className = 'choose';
+    $wrapper.appendChild($choose);
+
+    let $allButton = document.createElement('div');
+    $allButton.className = 'allButton';
+    $wrapper.appendChild($allButton);
+
+    let $button1 = document.createElement('button');
+    $button1.className = 'button1';
+    $button1.textContent = 'камень';
+    $allButton.appendChild($button1);
+
+    let $button2 = document.createElement('button');
+    $button2.className = 'button2';
+    $button2.textContent = 'ножницы';
+    $allButton.appendChild($button2);
+
+    let $button3 = document.createElement('button');
+    $button3.className = 'button3';
+    $button3.textContent = 'бумага';
+    $allButton.appendChild($button3);
+
+    $button1.onclick = function (e) {
+        startGame('камень');
+        getScore();
+    };
+
+    $button2.onclick = function (e) {
+        startGame('ножницы');
+        getScore();
+    };
+
+    $button3.onclick = function (e) {
+        startGame('бумага');
+        getScore();
+    };
+
+    function computerChoice() {
+        const computerOptions = ['камень', 'ножницы', 'бумага'];
+        const randomResultScissors = Math.floor(Math.random() * computerOptions.length);
+        return computerOptions[randomResultScissors];
+    }
+
+    let $out = document.createElement('div');
+    $out.textContent = '';
+    $wrapper.appendChild($out);
+
+    function startGame(userChoice) {
+        let resComputerChoice = computerChoice();
+
+        if (userChoice === 'камень' && resComputerChoice === 'ножницы' || userChoice === 'ножницы' && resComputerChoice === 'бумага' || userChoice === 'бумага' && resComputerChoice === 'камень') {
+            userScore++;
+            $span1.textContent = `Игрок: ${userScore}`;
+            return  $out.textContent = '+ игроку!';
+        } else if (resComputerChoice === 'камень' && userChoice === 'ножницы' || resComputerChoice === 'ножницы' && userChoice === 'бумага' || resComputerChoice === 'бумага' && userChoice === 'камень') {
+            computerScore++;
+            $span2.textContent = `Компьютер: ${computerScore}`;
+            return $out.textContent = '+ компьютеру!';
+        } else {
+            return $out.textContent = 'ничья!';
+        }
+    }
+
+    let $outResultWinner = document.createElement('div');
+    $outResultWinner.className = 'outResultWinner';
+    $allSpan.appendChild($outResultWinner);
+
+    function getScore() {
+        if (userScore >= 10) {
+            $outResultWinner.textContent = 'Поздравляю, вы победили!';
+            userScore = 0;
+            $span1.textContent = `Игрок: ${userScore}`;
+            computerScore = 0;
+            $span2.textContent = `Компьютер: ${computerScore}`;
+
+            setTimeout(() => {
+                $outResultWinner.textContent = ''}, 3000);
+
+        } else if (computerScore >= 10) {
+            $outResultWinner.textContent = 'Поражение, победил компьютер!';
+            userScore = 0;
+            $span1.textContent = `Игрок: ${userScore}`;
+            computerScore = 0;
+            $span2.textContent = `Компьютер: ${computerScore}`;
+
+            setTimeout(() => {
+                $outResultWinner.textContent = ''}, 5000);
+        }
+        }
+}
+
 function runRealData() {
 
     function getCurrency(currency) {
@@ -237,7 +358,8 @@ const tasksArr = [
     ['login and password', runLoginAndPassword],
     ['currency calc: improved', runCurrencyCalcImproved],
     ['currency calc: two rates if', runCurrencyTwoRatesIf],
-    ['scissors', runScissors],
+    ['scissors1', runScissors1],
+    ['scissors2', runScissors2],
     ['real data', runRealData]
 ];
 

HW02/style.css

@@ -16,7 +16,7 @@ body{
     align-items: center;
 }
 
-.button {
+.button{
     margin: 5px 15px;
     height: 25px;
     border: 1px solid tan;
@@ -36,4 +36,60 @@ body{
     cursor: pointer;
     background-color: darkred;
     color: white;
+}
+
+.wrapper{
+    font-family: Georgia, sans-serif;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    height: 100vh;
+}
+
+.allButton{
+    display: flex;
+    margin: 20px 0 50px 0;
+}
+
+.button1, .button2, .button3{
+    margin: 10px;
+    cursor: pointer;
+    color: white;
+    background-color: darkgreen;
+    border: none;
+    border-radius: 3px;
+    width: 140px;
+    height: 60px;
+    font-size: 20px;
+}
+
+.allSpan{
+    margin: 10px 0 100px 0;
+}
+
+.span1, .span2 {
+    margin: 0 10px;
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.button1:hover, .button2:hover, .button3:hover{
+    margin: 10px;
+    cursor: pointer;
+    color: white;
+    background-color: darkolivegreen;
+    border: none;
+    border-radius: 3px;
+    width: 140px;
+    height: 60px;
+    font-size: 20px;
+}
+
+.outResultWinner{
+    margin-top: 20px;
+    font-size: 24px;
+    font-weight: 700;
+    color: darkred;
+    min-height: 40px;
 }