1+ /*
2+ Rock Paper Scissors 🚀🔥
3+ Concepts covered in this project
4+ 👉 For loops
5+ 👉 Dom Manipulation
6+ 👉 Variables
7+ 👉 Conditionals (if else if)
8+ 👉 Template Literals
9+ 👉 Event Listeners
10+ 👉 Higher order Function (Math.random())
11+ */
12+
13+ const totalScore = { computerScore : 0 , playerScore : 0 }
14+
15+ // ** getComputerChoice randomly selects between `rock` `paper` `scissors` and returns that string **
16+ // getComputerChoice() 👉 'Rock'
17+ // getComputerChoice() 👉 'Scissors'
18+ function getComputerChoice ( ) {
19+ const rpsChoice = [ "Rock" , "Paper" , "Scissors" ]
20+ const randomNumber = Math . floor ( Math . random ( ) * 3 )
21+ return rpsChoice [ randomNumber ] ;
22+ // console.log(rpsChoice[randomNumber])
23+
24+ }
25+
26+ // ** getResult compares playerChoice & computerChoice and returns the score accordingly **
27+ // human wins - getResult('Rock', 'Scissors') 👉 1
28+ // human loses - getResult('Scissors', 'Rock') 👉 -1
29+ // human draws - getResult('Rock', 'Rock') 👉 0
30+ function getResult ( playerChoice , computerChoice ) {
31+ // return the result of score based on if you won, drew, or lost
32+ let score ;
33+
34+
35+ // All situations where human draws, set `score` to 0
36+ if ( playerChoice == computerChoice ) {
37+ score = 0 ;
38+ }
39+ else if ( playerChoice == "Paper" && computerChoice == "Rock" ) {
40+ score = 1 ;
41+ }
42+ else if ( playerChoice == "Scissors" && computerChoice == "Paper" ) {
43+ score = 1 ;
44+ }
45+ else if ( playerChoice == "Rock" && computerChoice == "Scissors" ) {
46+ score = 1 ;
47+ }
48+ else {
49+ score = - 1 ;
50+ }
51+
52+
53+
54+ // All situations where human wins, set `score` to 1
55+ // make sure to use else ifs here
56+
57+
58+ // Otherwise human loses (aka set score to -1)
59+
60+
61+ // return score
62+ return score
63+ }
64+
65+ // ** showResult updates the DOM to `You Win!` or `You Lose!` or `It's a Draw!` based on the score. Also shows Player Choice vs. Computer Choice**
66+ function showResult ( score , playerChoice , computerChoice ) {
67+ // Hint: on a score of -1
68+ // You should do result.innerText = 'You Lose!'
69+ // Don't forget to grab the div with the 'result' id!
70+ const resultDiv = document . getElementById ( 'result' )
71+ const handsDiv = document . getElementById ( 'hands' )
72+ const playerScoreDiv = document . getElementById ( 'player-score' )
73+
74+
75+ if ( score == - 1 ) {
76+ resultDiv . innerText = "You Lose"
77+
78+ }
79+ else if ( score == 0 ) {
80+ resultDiv . innerText = "That a Tie"
81+
82+
83+ }
84+ else {
85+ resultDiv . innerText = "You Win"
86+
87+
88+ }
89+
90+ handsDiv . innerText = `${ playerChoice } ${ computerChoice }
91+
92+ playerScoreDiv . innerText = `Your Score ${ totalScore . playerScore }
93+
94+
95+ }
96+
97+ // ** Calculate who won and show it on the screen **
98+ function onClickRPS ( playerChoice ) {
99+ console . log ( playerChoice )
100+ const computerChoice = getComputerChoice ( )
101+ console . log ( computerChoice )
102+ const score = getResult ( playerChoice , computerChoice )
103+ totalScore . playerScore += score
104+ totalScore . computerScore == score
105+
106+ console . log ( { score} )
107+ console . log ( totalScore )
108+ showResult ( score , playerChoice , computerChoice )
109+ }
110+
111+
112+ // ** Make the RPS buttons actively listen for a click and do something once a click is detected **
113+ function playGame ( ) {
114+ // use querySelector to select all RPS Buttons
115+ const rpsButtons = document . querySelectorAll ( '.rpsButton' )
116+ console . log ( rpsButtons )
117+
118+ rpsButtons . forEach ( rpsButtons => {
119+ rpsButtons . onclick = ( ) => onClickRPS ( rpsButtons . value )
120+ } )
121+
122+
123+
124+ // Add a click listener to the end game button that runs the endGame() function on click
125+ const endGameButton = document . getElementById ( "endGameButton" )
126+ endGameButton . onclick = ( ) => endGame ( totalScore )
127+ }
128+
129+ // ** endGame function clears all the text on the DOM **
130+ function endGame ( totalScore ) {
131+ totalScore . playerScore = 0
132+ totalScore . computerScore = 0
133+
134+ const resultDiv = document . getElementById ( 'result' )
135+ const handsDiv = document . getElementById ( 'hands' )
136+ const playerScoreDiv = document . getElementById ( 'player-score' )
137+
138+ playerScoreDiv . innerText = ''
139+ handsDiv . innerText = ''
140+ resultDiv . innerText = ''
141+
142+ }
143+
144+ playGame ( )
0 commit comments