Skip to content

Commit 172bfe7

Browse files
quintincodesquintincodes
committed
Add files to code base
0 parents  commit 172bfe7

File tree

4 files changed

+229
-0
lines changed

4 files changed

+229
-0
lines changed

‎README.md‎

Whitespace-only changes.

‎index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Rock, Paper, Scissors game</title>
7+
<link rel="stylesheet" href="./styles.css" />
8+
</head>
9+
<body>
10+
<h1>Let's play Rock, Paper, Scissors!</h1>
11+
<main>
12+
<details class="rules-container">
13+
<summary>Rules to the game</summary>
14+
15+
<p>You will be playing against the computer.</p>
16+
<p>You can choose between Rock, Paper, and Scissors.</p>
17+
<p>The first one to three points wins.</p>
18+
19+
<p>Here are the rules to getting a point in the game:</p>
20+
<ul>
21+
<li>Rock beats Scissors</li>
22+
<li>Scissors beats Paper</li>
23+
<li>Paper beats Rock</li>
24+
</ul>
25+
<p>
26+
If the player and computer choose the same option (Ex. Paper
27+
and Paper), then no one gets the point.
28+
</p>
29+
</details>
30+
31+
<div class="score-container">
32+
<strong
33+
>Player Score:
34+
<span class="score" id="player-score">0</span></strong
35+
>
36+
<strong
37+
>Computer Score:
38+
<span class="score" id="computer-score">0</span></strong
39+
>
40+
</div>
41+
42+
<section class="options-container">
43+
<h2>Choose an option:</h2>
44+
<div class="btn-container">
45+
<button id="rock-btn" class="btn">Rock</button>
46+
<button id="paper-btn" class="btn">Paper</button>
47+
<button id="scissors-btn" class="btn">Scissors</button>
48+
</div>
49+
</section>
50+
51+
<div class="results-container">
52+
<p id="results-msg"></p>
53+
<p id="winner-msg"></p>
54+
<button class="btn" id="reset-game-btn">Play again?</button>
55+
</div>
56+
</main>
57+
<script src="./script.js"></script>
58+
</body>
59+
</html>

‎script.js‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
function getRandomComputerResult() {
2+
const options = ['Rock', 'Paper', 'Scissors'];
3+
const randomIndex = Math.floor(Math.random() * options.length);
4+
return options[randomIndex];
5+
}
6+
7+
function hasPlayerWonTheRound(player, computer) {
8+
return (
9+
(player === 'Rock' && computer === 'Scissors') ||
10+
(player === 'Scissors' && computer === 'Paper') ||
11+
(player === 'Paper' && computer === 'Rock')
12+
);
13+
}
14+
15+
let playerScore = 0;
16+
let computerScore = 0;
17+
18+
function getRoundResults(userOption) {
19+
const computerResult = getRandomComputerResult();
20+
21+
if (hasPlayerWonTheRound(userOption, computerResult)) {
22+
playerScore++;
23+
return `Player wins! ${userOption} beats ${computerResult}`;
24+
} else if (computerResult === userOption) {
25+
return `It's a tie! Both chose ${userOption}`;
26+
} else {
27+
computerScore++;
28+
return `Computer wins! ${computerResult} beats ${userOption}`;
29+
}
30+
}
31+
32+
const playerScoreSpanElement = document.getElementById('player-score');
33+
const computerScoreSpanElement = document.getElementById('computer-score');
34+
const roundResultsMsg = document.getElementById('results-msg');
35+
const winnerMsgElement = document.getElementById('winner-msg');
36+
const optionsContainer = document.querySelector('.options-container');
37+
const resetGameBtn = document.getElementById('reset-game-btn');
38+
39+
function showResults(userOption) {
40+
roundResultsMsg.innerText = getRoundResults(userOption);
41+
computerScoreSpanElement.innerText = computerScore;
42+
playerScoreSpanElement.innerText = playerScore;
43+
44+
if (playerScore === 3 || computerScore === 3) {
45+
winnerMsgElement.innerText = `${
46+
playerScore === 3 ? 'Player' : 'Computer'
47+
} has won the game!`;
48+
49+
resetGameBtn.style.display = 'block';
50+
optionsContainer.style.display = 'none';
51+
}
52+
}
53+
function resetGame() {
54+
playerScore = 0;
55+
computerScore = 0;
56+
57+
playerScoreSpanElement.innerText = playerScore;
58+
computerScoreSpanElement.innerText = computerScore;
59+
60+
winnerMsgElement.innerText = '';
61+
roundResultsMsg.innerText = '';
62+
63+
optionsContainer.style.display = 'block';
64+
resetGameBtn.style.display = 'none';
65+
}
66+
67+
resetGameBtn.addEventListener('click', resetGame);
68+
69+
const rockBtn = document.getElementById('rock-btn');
70+
const paperBtn = document.getElementById('paper-btn');
71+
const scissorsBtn = document.getElementById('scissors-btn');
72+
73+
rockBtn.addEventListener('click', function () {
74+
showResults('Rock');
75+
});
76+
77+
paperBtn.addEventListener('click', function () {
78+
showResults('Paper');
79+
});
80+
81+
scissorsBtn.addEventListener('click', function () {
82+
showResults('Scissors');
83+
});

‎styles.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
*,
2+
*::before,
3+
*::after {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
:root {
10+
--very-dark-blue: #0a0a23;
11+
--white: #ffffff;
12+
--yellow: #f1be32;
13+
--golden-yellow: #feac32;
14+
}
15+
16+
body {
17+
background-color: var(--very-dark-blue);
18+
text-align: center;
19+
color: var(--white);
20+
}
21+
22+
h1 {
23+
margin: 15px 0 20px;
24+
}
25+
26+
.btn {
27+
cursor: pointer;
28+
width: 100px;
29+
margin: 10px;
30+
color: var(--very-dark-blue);
31+
background-color: var(--golden-yellow);
32+
background-image: linear-gradient(#fecc4c, #ffac33);
33+
border-color: var(--golden-yellow);
34+
border-width: 3px;
35+
}
36+
37+
.btn:hover {
38+
background-image: linear-gradient(#ffcc4c, #f89808);
39+
}
40+
41+
.rules-container {
42+
padding: 10px 0;
43+
margin: auto;
44+
border-radius: 15px;
45+
border: 5px solid var(--yellow);
46+
background-color: var(--white);
47+
color: var(--very-dark-blue);
48+
}
49+
50+
.rules-container ul {
51+
list-style-type: none;
52+
}
53+
54+
.rules-container p {
55+
margin: 10px 0;
56+
}
57+
58+
@media (min-width: 760px) {
59+
.rules-container {
60+
width: 60%;
61+
}
62+
}
63+
64+
.score-container {
65+
display: flex;
66+
justify-content: space-around;
67+
margin: 30px 0;
68+
font-size: 1.2rem;
69+
}
70+
71+
.score {
72+
font-weight: 500;
73+
}
74+
75+
.results-container {
76+
font-size: 1.3rem;
77+
margin: 15px 0;
78+
}
79+
80+
#winner-msg {
81+
margin-top: 25px;
82+
}
83+
84+
#reset-game-btn {
85+
display: none;
86+
margin: 20px auto;
87+
}

0 commit comments

Comments
 (0)