├── .gitignore ├── README.md ├── _config.yml ├── index.html ├── javascript.js └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is The Odin Projects Rock Paper Scissors project! 2 | 3 | https://www.theodinproject.com/courses/web-development-101/lessons/rock-paper-scissors 4 | 5 | I learned alot about paramaters/calling functions/defining variables. It took roughly 8.5 hours to write the JavaScript code for this. 6 | 7 | 8 | 9 | It took me another 18 hours to add the HTML/CSS/Edit DOM and add events 10 | 11 | View complete project in browser. 12 | 13 | 14 | https://catqueencodes.github.io/Project-Rock-Paper-Scissors/ 15 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Rock Paper Scissors 6 | 7 | 8 | 9 | 10 |

11 |

Rock Paper Scissors

12 |

Choose Your Weapon

13 |

First To 5 Wins!

14 | 15 | 16 |

17 | 18 | 19 | 20 |

21 | 22 |

23 | Player scores 24 | Computer scores 25 |

26 | 27 | 28 |

29 |

30 |

31 |

32 | 33 |

Results

34 | 35 | 36 |

37 | 38 |

39 | 40 |

41 | 42 |

43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /javascript.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const optionBtn = document.querySelectorAll('div.optionBtn button'); 4 | const roundResults = document.querySelector('#roundResults'); 5 | const playerPoints = document.querySelector('#playerScore'); 6 | const computerPoints = document.querySelector('#computerScore'); 7 | const resetBtn = document.querySelector('#reset'); 8 | 9 | //refresh page for new game 10 | resetBtn.addEventListener('click',() => location.reload()); 11 | 12 | optionBtn.forEach(button => { button.addEventListener('click', getPlayerChoice) }); 13 | 14 | let computerChoices = [{choice: 'Rock', value: 0}, {choice: 'Paper', value: 1}, {choice: 'Scissors', value: 2}]; 15 | let playerScore = 0; 16 | let compScore = 0; 17 | let playerChoice; 18 | 19 | function computerPlay () { 20 | let result = computerChoices[Math.floor(Math.random() * computerChoices.length)]; 21 | return result; 22 | } 23 | 24 | function playRound (playerSelection, computerSelection) { 25 | let roundWinCombo = `${playerSelection}-${computerSelection.value}`; 26 | let playerWinCombo = ['1-0', '0-2', '2-1']; 27 | 28 | if (Number(playerSelection) === computerSelection.value) { 29 | playerPoints.textContent = ++playerScore 30 | computerPoints.textContent = ++compScore 31 | roundResults.textContent = "Tie!" 32 | }else if (playerWinCombo.includes(roundWinCombo)) { 33 | playerPoints.textContent = ++playerScore 34 | roundResults.textContent = `You win! ${playerChoice} beats ${computerSelection.choice}`; 35 | }else { 36 | computerPoints.textContent = ++compScore 37 | roundResults.textContent = `You lose! ${computerSelection.choice} beats ${playerChoice}`; 38 | } 39 | checkWinner(); 40 | } 41 | 42 | const winnerResults ={ 43 | computer: ["You Lost the game to a computer!", 'red'], 44 | player: ["You Win the game!!!!", 'green'], 45 | tie: ["The game is a Tie!", 'blue'] 46 | } 47 | 48 | function checkWinner() { 49 | if (compScore === 5 || playerScore === 5) { 50 | if (compScore === playerScore){ 51 | updateWinner('tie') 52 | }else{ 53 | let win = `${(compScore > playerScore) ? 'computer' : 'player'}`; 54 | updateWinner(win); 55 | } 56 | } 57 | } 58 | 59 | function updateWinner(winner){ 60 | roundResults.textContent = winnerResults[winner][0]; 61 | roundResults.style.color = winnerResults[winner][1]; 62 | 63 | optionBtn.forEach(button => { 64 | button.removeEventListener('click', getPlayerChoice); 65 | }); 66 | } 67 | 68 | function getPlayerChoice(e) { 69 | let playerSelection= (e.target.id); 70 | playerChoice = e.target.textContent; 71 | playRound(playerSelection, computerPlay()); 72 | } 73 | 74 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | 2 | html { 3 | background: #a8a0e259; 4 | 5 | } 6 | 7 | /* make it all fit to page*/ 8 | 9 | .flex { 10 | display: flex; 11 | height: 100%; 12 | width: 100%; 13 | flex-direction: column; 14 | flex-wrap: nowrap; 15 | align-items: center; 16 | padding-top: 20px; 17 | } 18 | 19 | 20 | 21 | /* heading */ 22 | 23 | h1 { 24 | color: rgb(70, 13, 9); 25 | font-family: Impact, Charcoal, sans-serif; 26 | font-size: 75px; 27 | margin: 20px; 28 | 29 | } 30 | 31 | h2{ 32 | font-family: Arial, Helvetica, sans-serif; 33 | font-size: 50px; 34 | color: #86273c; 35 | margin: 20px; 36 | } 37 | 38 | h3 { 39 | font-family: "Comic Sans MS", cursive, sans-serif; 40 | font-size: 40px; 41 | color: #af3636; 42 | margin-top: 20px; 43 | margin-bottom: 20px; 44 | } 45 | 46 | /* Outputs: playerScore, computerScore, final round results */ 47 | 48 | #roundResults { 49 | display: flex; 50 | justify-content: center; 51 | align-items: center; 52 | width: 300px; 53 | height: 100px; 54 | border: 5px solid rgb(27, 27, 31); 55 | text-align: center; 56 | font-weight: bolder; 57 | font-size: 20px; 58 | } 59 | 60 | .scores { 61 | display: flex; 62 | flex-direction: row; 63 | } 64 | .scores div { 65 | display: flex; 66 | justify-content: center; 67 | align-items: center; 68 | width: 150px; 69 | height: 50px; 70 | border: 5px solid rgb(27, 27, 31); 71 | margin-top: 3px; 72 | margin-bottom: 20px; 73 | margin-right: 5px; 74 | font-weight: bolder; 75 | font-size: 20px; 76 | 77 | } 78 | 79 | /* buttons */ 80 | 81 | .optionBtn button { 82 | background-color: #d45069; 83 | border: 4px solid #5f0b3d; 84 | width: 150px; 85 | height: 50px; 86 | font-size: 30px; 87 | font-weight: bold; 88 | color: rgb(23, 23, 27); 89 | margin-bottom: 30px; 90 | } 91 | 92 | 93 | #reset { 94 | width: 120px; 95 | height: 40px; 96 | margin-top: 20px; 97 | background-color: #5f0b3d; 98 | color: #d45069; 99 | font-size: 20px; 100 | 101 | 102 | } 103 | 104 | /* label */ 105 | 106 | #resultsLabel { 107 | font-size: 20px; 108 | text-align: center; 109 | font-weight: bold; 110 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 111 | color: #5f0b3d; 112 | } 113 | 114 | #playerLabel{ 115 | font-size: 20px; 116 | font-weight: bold; 117 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 118 | color: #5f0b3d; 119 | padding-left: 15px; 120 | } 121 | 122 | #compLabel{ 123 | font-size: 19px; 124 | text-align: center; 125 | font-weight: bold; 126 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 127 | color: #5f0b3d; 128 | padding-left: 18px; 129 | padding-right: 3px; 130 | } --------------------------------------------------------------------------------