Skip to content

Commit b0c372d

Browse files
reitenthreitenth
authored
Add files via upload
1 parent 9b782b7 commit b0c372d

4 files changed

Lines changed: 145 additions & 0 deletions

File tree

‎foundations/03-rock-paper-scissors/README.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# odin-rock-paper-scissors
2+
3+
**Time Spent:** 8 hrs coding and 8 hrs studying concepts
4+
5+
**What I Learned:** The basics of javascript. The DOM was scary at first but not as bad as I thought to grasp.
6+
7+
**What Was Difficult:** Following the syntax of javascript without errors. It took time to get things formatted to actually run correctly despite the code being okay.

‎foundations/03-rock-paper-scissors/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Rock, Paper, Scissors</title>
6+
<link rel="stylesheet" href="./style.css" />
7+
</head>
8+
<body>
9+
<div class="container">
10+
<h1>Rock, Paper, Scissors</h1>
11+
<p>Choose!</p>
12+
<div class="choices">
13+
<button onclick="playRound('Rock')">🪨</button>
14+
<button onclick="playRound('Paper')">📜</button>
15+
<button onclick="playRound('Scissors')">✂️</button>
16+
</div>
17+
<div class="player-choice">USER:</div>
18+
<div class="computer-choice">COMP:</div>
19+
<div class="result-row"></div>
20+
<div class="result-display">RESULT</div>
21+
</div>
22+
<script src="./index.js"></script>
23+
</body>
24+
</html>

‎foundations/03-rock-paper-scissors/index.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const playerDisplay = document.querySelector('.player-choice');
2+
const computerDisplay = document.querySelector('.computer-choice');
3+
const resultDisplay = document.querySelector('.result-display');
4+
const resultRow = document.querySelector('.result-row');
5+
const choices = ['Rock', 'Paper', 'Scissors'];
6+
let humanScore = 0;
7+
let computerScore = 0;
8+
9+
// Get computer choice
10+
11+
function getComputerChoice() {
12+
const computerSelection = choices[Math.floor(Math.random() * choices.length)];
13+
return computerSelection;
14+
}
15+
16+
// Play round
17+
18+
function playRound(humanSelection) {
19+
const computerSelection = getComputerChoice();
20+
21+
if (humanSelection === computerSelection) {
22+
resultRow.textContent = `${humanSelection + ' draws ' + computerSelection}`;
23+
resultDisplay.textContent = "It's a tie!";
24+
} else if (
25+
(humanSelection === 'Rock' && computerSelection === 'Scissors') ||
26+
(humanSelection === 'Paper' && computerSelection === 'Rock') ||
27+
(humanSelection === 'Scissors' && computerSelection === 'Paper')
28+
) {
29+
humanScore++;
30+
playerDisplay.textContent = `USER: ${humanScore}`;
31+
resultRow.textContent = `${humanSelection + ' beats ' + computerSelection}`;
32+
resultDisplay.textContent = 'You win!';
33+
} else {
34+
computerScore++;
35+
computerDisplay.textContent = `COMP: ${computerScore}`;
36+
resultRow.textContent = `${computerSelection + ' beats ' + humanSelection}`;
37+
resultDisplay.textContent = 'You lose!';
38+
}
39+
if (humanScore === 5 || computerScore === 5)
40+
resultDisplay.textContent = 'Game Over!';
41+
42+
changeColor(resultDisplay);
43+
}
44+
45+
// Change color of result
46+
47+
function changeColor(element) {
48+
if (element.textContent === "It's a tie!") {
49+
element.style.backgroundColor = '#5E81AC';
50+
} else if (element.textContent === 'You win!') {
51+
element.style.backgroundColor = '#A3BE8C';
52+
} else if (element.textContent === 'You lose!') {
53+
element.style.backgroundColor = '#BF616A';
54+
} else {
55+
element.style.backgroundColor = '#2e3440';
56+
}
57+
}

‎foundations/03-rock-paper-scissors/style.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
* {
2+
color: #eceff4;
3+
}
4+
5+
body {
6+
background-color: #2e3440;
7+
justify-content: center;
8+
display: flex;
9+
}
10+
11+
.container {
12+
background-color: #434c5e;
13+
display: flex;
14+
margin: 100px;
15+
align-items: center;
16+
flex-direction: column;
17+
border-radius: 20px;
18+
width: 500px;
19+
}
20+
21+
.container p {
22+
font-size: 2rem;
23+
font-weight: bold;
24+
}
25+
26+
.choices {
27+
display: flex;
28+
gap: 10px;
29+
}
30+
31+
.choices button {
32+
font-size: 3rem;
33+
background-color: #d8dee9;
34+
border-radius: 10px;
35+
padding: 25px;
36+
}
37+
38+
.choices button:hover {
39+
background-color: #eceff4;
40+
transform: scale(1.1);
41+
cursor: pointer;
42+
}
43+
44+
.player-choice,
45+
.result-row,
46+
.computer-choice {
47+
margin: 20px;
48+
font-size: 2rem;
49+
}
50+
51+
.result-display {
52+
margin: 10px;
53+
border-radius: 5px;
54+
border: 3px solid #eceff4;
55+
padding: 25px;
56+
font-size: 3rem;
57+
}

0 commit comments

Comments
 (0)