Skip to content

Commit 1849f69

Browse files
shloka-guptashloka-gupta
authored
Merge pull request #116 from yellowberard/scrkeep
Ping pong Ball Score Keeper
2 parents 6ce7d14 + d829ada commit 1849f69

File tree

5 files changed

+279
-0
lines changed

5 files changed

+279
-0
lines changed

‎Index.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,6 @@
4545
| [TO-DO List](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/To-Do%20List) | Simple TO-DO List written in HTML, CSS, and JavaScript |
4646
| [Weather-App](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Weather-App) | Simple Weather app written in HTML, CSS, and JavaScript using the APIs for fetching weather and geolocation information |
4747
| [News Webapp](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/flask_news_project) | A web app for searching news made using flask |
48+
| Score Keeper |A web Page where user can keep a count of their scores and will tell which player won.
49+
|
4850

‎Score-Keeper/Readme.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h1> Ping Pong Ball Score-Keeper </h1>
2+
3+
<h2> Project Overview</h2>
4+
In this project user can keep score of various 2 players games.
5+
The maximum score can be 11 and score is reset after every game.The buttons turn red and green for winner and loser respectively.
6+
After the winning the game the score can not be increased.
7+
<h2> Use Of the Project </h2>
8+
User can keep score of their games.
9+
<h2> Languages Used </h2>
10+
<ul>
11+
<li>HTML</li>
12+
<li>CSS</li>
13+
<li>Javascript</li>
14+
</ul>
15+
16+
<h2> How to Use </h2>
17+
18+
Using the project is very easy.<br>
19+
First select the maximum Score/Wining Score.<br>
20+
To increase the score of player 1 by pressing player-1 button and increase the score of player 2 by pressing player-2 button.<br>
21+
After reaching the maximum score winner would be declared by an alert message and green color of button and score.<br>
22+
To play another game press reset button and choose your winning score.
23+
24+
<h2>Sample Pictures </h2>
25+
26+
<image src="https://user-images.githubusercontent.com/82977727/124570312-622acc80-de64-11eb-8c97-7ba342f80ad9.png"> Opening Page</image>
27+
28+
<image src="https://user-images.githubusercontent.com/82977727/124570137-39a2d280-de64-11eb-852d-8281d6149c58.png"> Counting Scores </image>
29+
<image src="https://user-images.githubusercontent.com/82977727/124570624-b170fd00-de64-11eb-90aa-810a07848ec7.png"> Player 1 wins </image>
30+
<image src="https://user-images.githubusercontent.com/82977727/124570829-dbc2ba80-de64-11eb-92a0-fe8ee319edf6.png"> Game is reset </image>
31+
32+
<h1> Link for Website: </h1>
33+
https://yellowberard.github.io/Score-Keeper/Score_keeper.html

‎Score-Keeper/Score_keeper.css

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
h1 {
2+
display: flex;
3+
justify-content: center;
4+
color: #266150;
5+
font-size: xx-large;
6+
font-weight: bolder;
7+
font-family: "Rubik", sans-serif;
8+
}
9+
10+
.score {
11+
display: flex;
12+
justify-content: center;
13+
color: darkcyan;
14+
position: relative;
15+
}
16+
.label {
17+
display: flex;
18+
justify-content: center;
19+
color: #e03131;
20+
font-weight: bolder;
21+
font-family: "Rubik", sans-serif;
22+
line-height: 1.8;
23+
}
24+
25+
.players {
26+
display: flex;
27+
justify-content: center;
28+
color: #4f4846;
29+
text-indent: 25px;
30+
font-weight: bold;
31+
font-family: "Anton", sans-serif;
32+
}
33+
34+
.buttons {
35+
display: flex;
36+
justify-content: center;
37+
margin-top: 15px;
38+
}
39+
40+
.p1button {
41+
background-color: #adb5bd;
42+
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
43+
0 17px 50px 0 rgba(0, 0, 0, 0.19);
44+
margin-right: 15px;
45+
border-radius: 12px;
46+
font-size: 16px;
47+
48+
border: none;
49+
padding: 15px 32px;
50+
font-weight: bolder;
51+
}
52+
.p1button:active {
53+
transform: translateY(4px);
54+
}
55+
56+
.p2button {
57+
background-color: #adb5bd;
58+
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
59+
0 17px 50px 0 rgba(0, 0, 0, 0.19);
60+
margin-right: 15px;
61+
border-radius: 12px;
62+
font-size: 16px;
63+
64+
border: none;
65+
font-weight: bolder;
66+
padding: 15px 32px;
67+
}
68+
.p2button:active {
69+
transform: translateY(4px);
70+
}
71+
.reset {
72+
background-color: #ddaf94;
73+
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
74+
0 17px 50px 0 rgba(0, 0, 0, 0.19);
75+
margin-right: 15px;
76+
border-radius: 12px;
77+
font-size: 16px;
78+
79+
border: none;
80+
font-weight: bolder;
81+
padding: 15px 32px;
82+
}
83+
.reset:active {
84+
transform: translateY(4px);
85+
}
86+
87+
body {
88+
height: 100%;
89+
display: flex;
90+
justify-content: center;
91+
align-items: center;
92+
background-color: #ffc078;
93+
}
94+
95+
html {
96+
height: 100%;
97+
}
98+
99+
.winner {
100+
color: green;
101+
}
102+
103+
.loser {
104+
color: red;
105+
}
106+
107+

‎Score-Keeper/Score_keeper.html

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Score Keeper</title>
8+
<link rel="stylesheet" href="Score_keeper.css" />
9+
<link rel="preconnect" href="https://fonts.googleapis.com" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Anton&family=Rubik:ital,wght@1,300&display=swap"
13+
rel="stylesheet"
14+
/>
15+
</head>
16+
<body>
17+
<div class="sk">
18+
<h1>PING PONG BALL SCORE KEEPER</h1>
19+
<div class="players">
20+
<h2>
21+
<span class="p1scrdisp"> 0 </span>-<span class="p2scrdisp"> 0 </span>
22+
</h2>
23+
</div>
24+
<div class="label">
25+
<label for="lt">Maximum Score</label>
26+
</div>
27+
<div class="score" id="lt">
28+
<select name="" class="limit">
29+
<option value="0">0</option>
30+
<option value="2">2</option>
31+
<option value="3">3</option>
32+
<option value="4">4</option>
33+
<option value="5">5</option>
34+
<option value="6">6</option>
35+
<option value="7">7</option>
36+
<option value="8">8</option>
37+
<option value="9">9</option>
38+
<option value="10">10</option>
39+
<option value="11">11</option>
40+
</select>
41+
</div>
42+
<div class="buttons">
43+
<button class="p1button">+1 to Player-1</button>
44+
<button class="p2button">+1 to Player-2</button>
45+
<button class="reset">Reset</button>
46+
</div>
47+
</div>
48+
<script src="Score_keeper.js"></script>
49+
</body>
50+
</html>
51+
52+
53+

‎Score-Keeper/Score_keeper.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
console.log("hi");
2+
3+
const p1Button = document.querySelector('.p1button');
4+
const p2Button = document.querySelector('.p2button');
5+
const rstButton = document.querySelector('.reset');
6+
7+
const p1Display = document.querySelector('.p1scrdisp');
8+
const p2Display = document.querySelector('.p2scrdisp');
9+
10+
const winningScore = document.querySelector('.limit');
11+
const body = document.querySelector('body');
12+
13+
let p1Score = 0;
14+
let p2Score = 0;
15+
let limit = 0;
16+
let isGameOver = false;
17+
18+
// player 1 Score update
19+
20+
p1Button.addEventListener('click', function(evt) {
21+
console.log("You pressed player 1");
22+
23+
if (isGameOver !== true && limit !== 0) {
24+
p1Score += 1;
25+
26+
if (p1Score == limit) {
27+
isGameOver = true;
28+
p1Display.classList.add('winner');
29+
p2Display.classList.add('loser');
30+
p1Button.style.background = '#20c997';
31+
p2Button.style.background = '#f03e3e';
32+
alert("PLAYER 1 WON!!");
33+
}
34+
35+
p1Display.textContent = p1Score;
36+
}
37+
});
38+
39+
40+
// Player 2 Score update
41+
42+
p2Button.addEventListener('click', function(evt) {
43+
console.log("You pressed player 2");
44+
45+
if (isGameOver !== true && limit !== 0) {
46+
p2Score += 1;
47+
48+
if (p2Score == limit) {
49+
isGameOver = true;
50+
p2Display.classList.add('winner');
51+
p1Display.classList.add('loser');
52+
p2Button.style.background = '#20c997';
53+
p1Button.style.background = '#f03e3e';
54+
alert("PLAYER 2 WON!!");
55+
}
56+
p2Display.textContent = p2Score;
57+
}
58+
});
59+
60+
//Reseting all scores
61+
62+
rstButton.addEventListener('click', reset);
63+
64+
function reset() {
65+
isGameOver = false;
66+
p1Score = 0;
67+
p2Score = 0;
68+
p1Display.textContent = p1Score;
69+
p2Display.textContent = p2Score;
70+
p1Display.classList.remove('winner', 'loser');
71+
p2Display.classList.remove('loser', 'winner');
72+
73+
p1Button.style.background = '#adb5bd';
74+
p2Button.style.background = '#adb5bd';
75+
}
76+
77+
// Limit set by user
78+
winningScore.addEventListener('change', () => {
79+
limit = parseInt(winningScore.value)
80+
reset();
81+
82+
});
83+
84+

0 commit comments

Comments
 (0)