Octavia/odin-rock-paper-scissors
Watch
1
0
Fork
You've already forked odin-rock-paper-scissors
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add classes and styles; fix working in player win case

Browse source
This commit is contained in:
lolabird 2023-11-07 23:01:07 -07:00
commit c95509a187
3 changed files with 40 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

10
index.html
View file

@ -11,15 +11,15 @@
<div class = "buttons"> <div class = "buttons">
<button id = "rock">Rock</button> <button class = "button" id = "rock">Rock</button>
<button id = "paper">Paper</button> <button class = "button" id = "paper">Paper</button>
<button id = "scissors">Scissors</button> <button class = "button" id = "scissors">Scissors</button>
</div> </div>
<div class = "score"> <div class = "score">
<div> You: <span id = "player">0</span></div> <div class = "score-text"> You: <span id = "player">0</span></div>
<div>Compy: <span id = "computer">0</span></div> <div class = "score-text">Compy: <span id = "computer">0</span></div>
</div> </div>
<div id = "msg"></div> <div id = "msg"></div>

2
script.js
View file

@ -73,7 +73,7 @@ function game() {
case "player wins": case "player wins":
pScore += 1; pScore += 1;
player.textContent = pScore; player.textContent = pScore;
msg.textContent = "You lose! " + ps + " beats " + cs; msg.textContent = "You win! " + ps + " beats " + cs;
break; break;
default: default:
msg.textContent = "It's a tie!"; msg.textContent = "It's a tie!";

34
style.css
View file

@ -0,0 +1,34 @@
*{
outline: 2px, solid, yellow;
}
body {
background: rgb(99, 80, 99);
color: #eee;
text-align: center;
}
.buttons {
display: flex;
justify-content: center;
}
.button {
width: 200px;
margin: 5px;
font-size: 30px;
}
.score {
display: flex;
justify-content: center;
}
.score-text {
margin: 5px;
font-size: 25px;
}
#msg {
font-size: 20px;
}