├── index.html ├── script.js └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 |
17 |
18 |
19 | You 20 | 0 21 |
22 |
23 | Computer 24 | 0 25 |
26 | 28 |
29 | 30 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const selectionButtons = document.querySelectorAll('[data-selection]') 2 | const finalColumn = document.querySelector('[data-final-column]') 3 | const computerScoreSpan = document.querySelector('[data-computer-score]') 4 | const yourScoreSpan = document.querySelector('[data-your-score]') 5 | const SELECTIONS = [ 6 | { 7 | name: 'rock', 8 | emoji: '✊', 9 | beats: 'scissors' 10 | }, 11 | { 12 | name: 'paper', 13 | emoji: '✋', 14 | beats: 'rock' 15 | }, 16 | { 17 | name: 'scissors', 18 | emoji: '✌', 19 | beats: 'paper' 20 | } 21 | ] 22 | 23 | selectionButtons.forEach(selectionButton => { 24 | selectionButton.addEventListener('click', e => { 25 | const selectionName = selectionButton.dataset.selection 26 | const selection = SELECTIONS.find(selection => selection.name === selectionName) 27 | makeSelection(selection) 28 | }) 29 | }) 30 | 31 | function makeSelection(selection) { 32 | const computerSelection = randomSelection() 33 | const yourWinner = isWinner(selection, computerSelection) 34 | const computerWinner = isWinner(computerSelection, selection) 35 | 36 | addSelectionResult(computerSelection, computerWinner) 37 | addSelectionResult(selection, yourWinner) 38 | 39 | if (yourWinner) incrementScore(yourScoreSpan) 40 | if (computerWinner) incrementScore(computerScoreSpan) 41 | } 42 | 43 | function incrementScore(scoreSpan) { 44 | scoreSpan.innerText = parseInt(scoreSpan.innerText) + 1 45 | } 46 | 47 | function addSelectionResult(selection, winner) { 48 | const div = document.createElement('div') 49 | div.innerText = selection.emoji 50 | div.classList.add('result-selection') 51 | if (winner) div.classList.add('winner') 52 | finalColumn.after(div) 53 | } 54 | 55 | function isWinner(selection, opponentSelection) { 56 | return selection.beats === opponentSelection.name 57 | } 58 | 59 | function randomSelection() { 60 | const randomIndex = Math.floor(Math.random() * SELECTIONS.length) 61 | return SELECTIONS[randomIndex] 62 | } -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #CCC; 3 | } 4 | 5 | .selections { 6 | display: flex; 7 | justify-content: center; 8 | } 9 | 10 | .selection { 11 | background: none; 12 | border: none; 13 | outline: none; 14 | cursor: pointer; 15 | font-size: 2rem; 16 | transition: 100ms; 17 | } 18 | 19 | .selection:hover { 20 | transform: scale(1.2); 21 | } 22 | 23 | .results { 24 | margin-top: 1rem; 25 | display: grid; 26 | justify-content: center; 27 | grid-template-columns: repeat(2, 1fr); 28 | justify-items: center; 29 | align-items: center; 30 | } 31 | 32 | .result-score { 33 | margin-left: .1rem; 34 | font-size: .5rem; 35 | color: #333; 36 | } 37 | 38 | .result-selection { 39 | opacity: .5; 40 | } 41 | 42 | .result-selection.winner { 43 | opacity: 1; 44 | font-size: 1.5rem; 45 | } --------------------------------------------------------------------------------