Skip to content

Commit 2b6c682

Browse files
kartikktripathikartikktripathi
authored
Merge pull request #3 from kartikktripathi/css
Added required CSS
2 parents 1703c0c + 4efd679 commit 2b6c682

File tree

3 files changed

+129
-31
lines changed

3 files changed

+129
-31
lines changed

‎index.html‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,25 @@
1-
<!-- script tag ko dekh dekh ke id de dena aur css ki styling bhi -->
21
<!DOCTYPE html>
32
<html lang="en">
43
<head>
54
<meta charset="UTF-8">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
76
<title>Fate of Three</title>
8-
<!-- <link rel="stylesheet" href="styles.css"> -->
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Bitcount+Grid+Double:slnt,wght@-3,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Chokokutai&family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
11+
<link href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&family=Bitcount+Grid+Double:slnt,wght@-3,100..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Chokokutai&family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Shojumaru&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">
912
</head>
1013
<body>
1114
<h1>Fate of Three</h1>
15+
<h3>Choose One:</h3>
1216
<div class="choices">
13-
<button onclick="playGame('rock')">🪨</button>
14-
<button onclick="playGame('paper')">📃</button>
15-
<button onclick="playGame('scissors')">✂️</button>
17+
<button onclick="playGame('Rock')">🪨</button>
18+
<button onclick="playGame('Paper')">📃</button>
19+
<button onclick="playGame('Scissors')">✂️</button>
1620
</div>
17-
<div id="playerDisplay">PLAYER: </div>
18-
<div id="compDisplay">COMPUTER: </div>
21+
<div id="playerDisplay">Player : </div>
22+
<div id="compDisplay">Computer : </div>
1923
<div id="resultDisplay"></div>
2024

2125
<div class="scoreDisplay">Player Score:

‎index.js‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,59 @@
1-
const choices = ["rock", "paper", "scissors"];
2-
const playerDisplay = document.getElementById("playerDisplay"); //player choice display
3-
const compDisplay = document.getElementById("compDisplay");//comp choice display
4-
const resultDisplay = document.getElementById("resultDisplay");//result
5-
const playerScoreDisplay = document.getElementById("playerScoreDisplay");//pllayer score
6-
const compScoreDisplay = document.getElementById("compScoreDisplay");//comp score
1+
const choices = ["Rock", "Paper", "Scissors"];
2+
const playerDisplay = document.getElementById("playerDisplay");
3+
const compDisplay = document.getElementById("compDisplay");
4+
const resultDisplay = document.getElementById("resultDisplay");
5+
const playerScoreDisplay = document.getElementById("playerScoreDisplay");
6+
const compScoreDisplay = document.getElementById("compScoreDisplay");
77
let playerScore = 0;
88
let compScore = 0;
99
function playGame(playerChoice){
10-
const compChoice = choices[Math.floor(Math.random()*3)]; // 0-2 tak ke result ke liye
10+
const compChoice = choices[Math.floor(Math.random()*3)];
1111
let result = "";
1212
if(playerChoice === compChoice){
13-
result = "It's a Tie!!";
13+
result = "It's a Tie!";
1414
}
1515
else {
1616
switch (playerChoice) {
17-
case "rock":
18-
if (compChoice === "scissors") {
19-
result = "You Win!!";
17+
case "Rock":
18+
if (compChoice === "Scissors") {
19+
result = "You Win!";
2020
} else {
21-
result = "You Lose!!";
21+
result = "You Lose!";
2222
}
2323
break;
24-
case "paper":
25-
if (compChoice === "rock") {
26-
result = "You Win!!";
24+
case "Paper":
25+
if (compChoice === "Rock") {
26+
result = "You Win!";
2727
} else {
28-
result = "You Lose!!";
28+
result = "You Lose!";
2929
}
3030
break;
31-
case "scissors":
32-
if (compChoice === "paper") {
33-
result = "You Win!!";
31+
case "Scissors":
32+
if (compChoice === "Paper") {
33+
result = "You Win!";
3434
} else {
35-
result = "You Lose!!";
35+
result = "You Lose!";
3636
}
3737
break;
3838
}
3939
}
40-
playerDisplay.textContent = `PLAYER: ${playerChoice}`;
40+
playerDisplay.textContent = `Player: ${playerChoice}`;
4141
compDisplay.textContent = `Computer: ${compChoice}`;
4242
resultDisplay.textContent = result;
43-
resultDisplay.classList.remove("green", "red");
43+
resultDisplay.classList.remove("green", "red", "yellow");
4444
switch(result){
45-
case "You Win!!":
45+
case "You Win!":
4646
resultDisplay.classList.add("green");
4747
playerScore++;
4848
playerScoreDisplay.textContent = playerScore;
4949
break;
50-
case "You Lose!!":
50+
case "You Lose!":
5151
resultDisplay.classList.add("red");
5252
compScore++;
5353
compScoreDisplay.textContent = compScore;
5454
break;
55+
case "It's a Tie!":
56+
resultDisplay.classList.add("yellow");
57+
break;
5558
}
5659
}

‎styles.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: "League Spartan";
6+
}
7+
8+
body {
9+
background: linear-gradient(135deg, #1e1e2f, #23243a);
10+
color: white;
11+
text-align: center;
12+
padding: 20px;
13+
}
14+
h1 {
15+
margin-top: 40px;
16+
font-size: 4.5rem;
17+
margin-bottom: 25px;
18+
font-weight: bold;
19+
font-family: "Chokokutai";
20+
}
21+
h3 {
22+
margin: 30px;
23+
font-size: 1.5rem;
24+
}
25+
.choices {
26+
display: flex;
27+
justify-content: center;
28+
gap: 20px;
29+
margin-bottom: 25px;
30+
}
31+
.choices button {
32+
font-size: 3rem;
33+
padding: 18px;
34+
border-radius: 15px;
35+
border: none;
36+
background: #2f324d;
37+
color: white;
38+
cursor: pointer;
39+
transition: 0.2s ease;
40+
}
41+
.choices button:hover {
42+
background: #3d4163;
43+
transform: scale(1.12);
44+
}
45+
.choices button:active {
46+
transform: scale(0.95);
47+
}
48+
#playerDisplay, #compDisplay, #resultDisplay {
49+
margin: 20px;
50+
font-size: 1.4rem;
51+
font-weight: 500;
52+
}
53+
.scoreDisplay {
54+
margin: 15px;
55+
font-size: 1.3rem;
56+
font-weight: 500;
57+
}
58+
#playerDisplay, #compDisplay {
59+
display: inline;
60+
margin: 20px;
61+
}
62+
.green {
63+
color: #1fff27;
64+
font-weight: bold;
65+
}
66+
.red {
67+
color: rgb(255, 121, 121);
68+
font-weight: bold;
69+
}
70+
.yellow {
71+
color: yellow;
72+
font-weight: bold;
73+
}
74+
@media (max-width: 600px) {
75+
h1 {
76+
font-size: 3rem;
77+
}
78+
.choices button {
79+
font-size: 2.3rem;
80+
padding: 14px;
81+
}
82+
#playerDisplay, #compDisplay, #resultDisplay {
83+
font-size: 1.2rem;
84+
}
85+
.scoreDisplay {
86+
font-size: 1rem;
87+
}
88+
#playerDisplay, #compDisplay {
89+
display: block;
90+
}
91+
}

0 commit comments

Comments
 (0)