<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<select id='psr'>
<option>---</option>
<option value='paper'>Paper</option>
<option value='scissors'>Scissors</option>
<option value='rock'>Rock</option>
</select>
<script src="script.js"></script>
</body>
</html>
//function to get the user's choice
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Missing parenthesis around userInput
Without parenthesis, the userChoice always
equalled the computerChoice
Added parenthesis and now userInput is the correct value
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const getUserChoice = (userInput) => {
userInput = userInput.toLowerCase();
//if stmt to make sure input is valid
if (userInput === 'rock' || 'scissors' || 'paper') {
return userInput;
} else {
console.log('Invalid selection');
}//end else
};//end getUserChoice function
//function to get computer choice
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
On each case there was a return before every break
A return statement always ends the block so break
was useless and in the process rhe switch useless.
The computerChoice was undefined.
Changed getComputerChoice into a declared function
Saved the results of switch in a variable
Returned the value as expected
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function getComputerChoice() {
let compPick = Math.floor(Math.random() * 3);
console.log('compPick: '+compPick);
var psr;
//switch case to verify & return result
switch (compPick) {
case 0:
psr = 'rock';
break;
case 1:
psr = 'paper';
break;
case 2:
psr = 'scissors';
break;
default:
console.log('Invalid');
break;
}//end switch
return psr;
}
//function to determine the winner
const determineWinner = (userChoice, computerChoice) => {
if (userChoice === computerChoice) {
return 'The game is a tie';
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Missing the else portion of conditional staement,
Whenever user threw a rock and computer threw a
scissor, the result was undefined
Added the else portion, now all 7 condition are met
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
if (userChoice === 'rock') {
if (computerChoice === 'paper') {
return 'You Lost!';
} else {
return "You Won!"
}
} // end userchoice is rock
if (userChoice === 'paper') {
if (computerChoice === 'scissors') {
return 'You Lost!';
} else {
return 'You won!';
}
} // end userchoice is paper
if (userChoice === 'scissors') {
if (computerChoice === 'rock') {
return 'You Lost!';
} else {
return 'You won!';
}
} //end userchoice is scissors
};//end winner function
//function to play the game
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Added a <select> element so testing is properly done
Changed playGame() to a declared function and the
callback function for the change event listener
Note that playGame is passing a value. This value is from
the <select>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function playGame(psr) {
const userChoice = getUserChoice(psr);
const computerChoice = getComputerChoice();
console.log('You threw: ' + userChoice);
console.log('The computer threw: ' + computerChoice);
//call funtion to determine winner
console.log(determineWinner(userChoice, computerChoice));
}//end playGame
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Reference the <select> tag
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
var sel = document.getElementById('psr');
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Register the change event on the <select> tag
When change event occurs on select#psr, playGame() is
called and it passes the value of select#psr thru
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
sel.addEventListener('change', function(e) {
playGame(this.value);
});
/* Styles go here */
select,
option {
font: inherit
}
#psr {margin:30px 0 0 30px}