rockPaperScissors/index.html at main · AhmedMikkawe/rockPaperScissors · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
</head>
<body>
    <div id='buttons'>
        <button value="rock">Rock</button>
        <button value="paper">Paper</button>
        <button value="scissors">Scissors</button>
    </div>
    <div id="result"></div>
    <div id="finalResult">
        <h1></h1>
    </div>
    <script>
        /*add event listener for every button to get user input and check Score*/
        const rock = document.querySelector('button[value="rock"]');
        const paper = document.querySelector('button[value="paper"]');
        const scissors = document.querySelector('button[value="scissors"]');
        const showResult = document.querySelector('#result');
        const finalResult = document.querySelector('h1');
        let playerScore = 0;
        let computerScore = 0;
        rock.addEventListener('click',function(){
            getUserInput(`${rock.value}`);
            checkScore();
        });
        paper.addEventListener('click',function(){
            getUserInput(`${paper.value}`);
            checkScore();
        });
        scissors.addEventListener('click',function(){
            getUserInput(`${scissors.value}`);
            checkScore();
        });
        function getUserInput(input) {
            let userInput = playRound(input);
            return userInput;
        }
        function checkScore() {
            finalResult.textContent = `The Match Result is ${playerScore} : ${computerScore}`;
            if (playerScore === 5) {
                rock.setAttribute('disabled', 'true');
                paper.setAttribute('disabled', 'true');
                scissors.setAttribute('disabled', 'true');
                return finalResult.textContent = `You Won The whole game ${playerScore} : ${computerScore}`;
            } else if(computerScore === 5){
                rock.setAttribute('disabled', 'true');
                paper.setAttribute('disabled', 'true');
                scissors.setAttribute('disabled', 'true');
                return finalResult.textContent = `You Lose The whole game ${playerScore} : ${computerScore}`;
            }
        }
        /*
        computerPlay function randomly return Rock, Paper, or Scissors
        Because We Have only three Choice I used Math.random() to randomly retrun from 1 to 3 number
        and Math.floor() for convert the number to integer
        */
        function computerPLay() {
            let computerChoice = Math.floor(Math.random() * 3) + 1;
            switch (computerChoice) {
                case 1:
                    return "Rock";
                    break;
                case 2:
                    return "Paper";
                    break;
                case 3:
                    return "Scissors";
                default:
                    return "Something Wrong in Computer Play Function";
                    break;
            }
        }
        /*PlayRound function plays a single round the function takes two parameters and return
        a string that declares the winner
        the first parameter the player inputs it and the second parameter has a default value
        and takes it from computerPlay function
        */
        function playRound(playerSelection, computerSelection = computerPLay()) {
            let playerChoice = playerSelection.toLowerCase();
            let computerChoice = computerSelection.toLowerCase();
            if (playerChoice === 'paper' && computerChoice === 'rock') {
                //console.log();
                playerScore++;
                return showResult.textContent = 'You Win! Paper beats Rock';
            } else if(playerChoice === 'scissors' && computerChoice === 'paper'){
                //return 'You Win! Scissors beats Paper';
                playerScore++;
                return showResult.textContent = 'You Win! Scissors beats Paper';
            } else if (playerChoice === 'rock' && computerChoice === 'scissors') {
                //return 'You Win! Rock beats Scissors';
                playerScore++;
                return showResult.textContent = 'You Win! Rock beats Scissors';
            } else if(playerChoice === computerChoice){
                //return "It's a tie";
                return showResult.textContent = "It's a tie";
            } else{
                //return `You Lose! ${computerChoice} beats ${playerChoice}`;
                computerScore++;
                return showResult.textContent = `You Lose! ${computerChoice} beats ${playerChoice}`;
            }
        }

    </script>
</body>
</html>