Skip to content

Commit 0a3d84f

Browse files
author
AzamAzis
committed
Basketball Scoreboard built with HTML CSS and JavaScript
1 parent 19b3c6a commit 0a3d84f

File tree

3 files changed

+345
-0
lines changed

3 files changed

+345
-0
lines changed

‎index.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,188 @@
1+
:root {
2+
--background-base-black: #01030e;
3+
--background-black: #1d293d;
4+
--background-dark-blue: #1b273b;
5+
--background-orange: #f68f00;
6+
--background-true-black: #000000;
7+
--border-blue: #2b7fff;
8+
--border-orange: #fe9a00;
9+
--text-blue: #50a2ff;
10+
--text-red: #fb2c36;
11+
--text-white: #ffffff;
12+
}
13+
14+
/* ||GENERAL STYLE */
15+
html {
16+
box-sizing: border-box;
17+
}
18+
19+
*,
20+
*::before,
21+
*::after {
22+
box-sizing: inherit;
23+
margin: 0;
24+
padding: 0;
25+
}
26+
27+
body {
28+
align-content: center;
29+
background-color: var(--background-dark-blue);
30+
display: grid;
31+
32+
min-height: 100vh;
33+
min-height: 100dvh;
34+
}
35+
36+
body,
37+
button {
38+
font-family: "Nunito Sans", sans-serif;
39+
line-height: 1.4;
40+
}
41+
42+
button {
43+
cursor: pointer;
44+
}
45+
46+
button:hover {
47+
opacity: 0.75;
48+
}
49+
50+
button:active {
51+
scale: 0.95;
52+
opacity: 1;
53+
}
54+
55+
hr {
56+
margin: 0 auto;
57+
width: 80%;
58+
}
59+
60+
/* ||BLOCK */
61+
.wrapper,
62+
.title {
63+
border: 3px solid var(--border-orange);
64+
margin: 0 auto;
65+
max-width: 750px;
66+
width: 80%;
67+
}
68+
69+
.wrapper {
70+
background-color: var(--background-base-black);
71+
border-bottom-left-radius: 10px;
72+
border-bottom-right-radius: 10px;
73+
}
74+
75+
.title {
76+
background-color: var(--background-orange);
77+
border-bottom: none;
78+
border-top-left-radius: 10px;
79+
border-top-right-radius: 10px;
80+
font-size: 1rem;
81+
font-weight: 900;
82+
padding: 0.5em 0;
83+
}
84+
85+
.board {
86+
display: flex;
87+
flex-direction: column;
88+
gap: 2em;
89+
justify-content: center;
90+
padding: 2em;
91+
}
92+
93+
.box,
94+
.player__title {
95+
border: 3px solid var(--border-blue);
96+
}
97+
98+
.player__title {
99+
background-color: var(--background-black);
100+
border-top-left-radius: 5px;
101+
border-top-right-radius: 5px;
102+
color: var(--text-blue);
103+
padding: 0.15em 0;
104+
width: 80%;
105+
}
106+
107+
.player {
108+
align-items: center;
109+
display: flex;
110+
flex-direction: column;
111+
justify-content: center;
112+
width: 100%;
113+
}
114+
115+
.box {
116+
align-items: center;
117+
background-color: var(--background-true-black);
118+
border-bottom-left-radius: 5px;
119+
border-bottom-right-radius: 5px;
120+
border-top: none;
121+
display: flex;
122+
min-height: 6.25em;
123+
justify-content: center;
124+
margin-bottom: 1rem;
125+
width: 80%;
126+
}
127+
128+
.score {
129+
color: var(--text-blue);
130+
font-size: 3rem;
131+
font-weight: bold;
132+
}
133+
134+
.addition {
135+
display: flex;
136+
justify-content: center;
137+
align-items: center;
138+
gap: 0.3rem;
139+
flex-wrap: wrap;
140+
}
141+
142+
.reset {
143+
background-color: var(--text-red);
144+
border-radius: 10px;
145+
border: none;
146+
display: block;
147+
font-size: 1rem;
148+
font-weight: bold;
149+
margin: 1rem auto;
150+
padding: 1rem 4rem;
151+
}
152+
153+
/* ||ELEMENT */
154+
155+
[class^="addition__"] {
156+
background-color: var(--background-dark-blue);
157+
border-radius: 4px;
158+
border: 1px solid var(--border-blue);
159+
padding: 0.25rem 1rem;
160+
}
161+
162+
/* ||MODIFIER */
163+
.border--red {
164+
border-color: var(--text-red);
165+
}
166+
167+
/* ||UTILITIES */
168+
.white {
169+
color: var(--text-white);
170+
}
171+
172+
.center {
173+
text-align: center;
174+
}
175+
176+
.upperCase {
177+
text-transform: uppercase;
178+
}
179+
180+
.red {
181+
color: var(--text-red);
182+
}
183+
184+
@media (min-width: 650px) {
185+
.board {
186+
flex-direction: row;
187+
}
188+
}

‎index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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>Basketball Scoreboard</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
11+
rel="stylesheet" />
12+
<link rel="stylesheet" href="index.css" />
13+
</head>
14+
<body>
15+
<h1 class="title white center upperCase">Basketball Scoreboard</h1>
16+
<div class="wrapper">
17+
<div class="board">
18+
<div class="player blue">
19+
<h2 class="player__title center upperCase">Home</h2>
20+
<div class="box">
21+
<p class="score" id="HomeScore">0</p>
22+
</div>
23+
24+
<div class="addition">
25+
<button class="addition__minus white" onclick="homeSubtractOne()">-</button>
26+
<button class="addition__plusOne white" onclick="homeAddOne()">+1</button>
27+
<button class="addition__plusTwo white" onclick="homeAddTwo()">+2</button>
28+
<button class="addition__plusThree white" onclick="homeAddThree()">+3</button>
29+
</div>
30+
</div>
31+
32+
<div class="player">
33+
<h2 class="player__title center upperCase red border--red">Guest</h2>
34+
<div class="box border--red">
35+
<p class="score red" id="GuestScore"></p>
36+
</div>
37+
<div class="addition">
38+
<button class="addition__minus white border--red" onclick="guestSubtractOne()">
39+
-
40+
</button>
41+
<button class="addition__plusOne white border--red" onclick="guestAddOne()">+1</button>
42+
<button class="addition__plusTwo white border--red" onclick="guestAddTwo()">+2</button>
43+
<button class="addition__plusThree white border--red" onclick="guestAddThree()">
44+
+3
45+
</button>
46+
</div>
47+
</div>
48+
</div>
49+
50+
<hr />
51+
52+
<button class="reset white" onclick="reset()">Reset</button>
53+
</div>
54+
55+
<script defer src="index.js"></script>
56+
</body>
57+
</html>

‎index.js‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
// ||HOME SCORE
2+
let HomeScore = document.getElementById("HomeScore");
3+
let num1 = 0;
4+
5+
HomeScore.textContent = String(num1);
6+
7+
function homeSubtractOne() {
8+
num1 -= 1;
9+
HomeScore.textContent = String(num1);
10+
11+
if (num1 <= 0) {
12+
num1 = 0;
13+
HomeScore.textContent = String(num1);
14+
}
15+
}
16+
17+
function homeAddOne() {
18+
num1 += 1;
19+
HomeScore.textContent = String(num1);
20+
21+
if (num1 >= 99) {
22+
num1 = 99;
23+
HomeScore.textContent = String(num1);
24+
}
25+
}
26+
27+
function homeAddTwo() {
28+
num1 += 2;
29+
HomeScore.textContent = String(num1);
30+
31+
if (num1 >= 99) {
32+
num1 = 99;
33+
HomeScore.textContent = String(num1);
34+
}
35+
}
36+
37+
function homeAddThree() {
38+
num1 += 3;
39+
HomeScore.textContent = String(num1);
40+
41+
if (num1 >= 99) {
42+
num1 = 99;
43+
HomeScore.textContent = String(num1);
44+
}
45+
}
46+
47+
// ||GUEST SCORE
48+
49+
let GuestScore = document.getElementById("GuestScore");
50+
let num2 = 0;
51+
52+
GuestScore.textContent = String(num2);
53+
54+
function guestSubtractOne() {
55+
num2 -= 1;
56+
GuestScore.textContent = String(num2);
57+
58+
if (num2 <= 0) {
59+
num2 = 0;
60+
GuestScore.textContent = String(num2);
61+
}
62+
}
63+
64+
function guestAddOne() {
65+
num2 += 1;
66+
GuestScore.textContent = String(num2);
67+
68+
if (num2 >= 99) {
69+
num2 = 99;
70+
GuestScore.textContent = String(num2);
71+
}
72+
}
73+
74+
function guestAddTwo() {
75+
num2 += 2;
76+
GuestScore.textContent = String(num2);
77+
78+
if (num1 >= 99) {
79+
num2 = 99;
80+
GuestScore.textContent = String(num2);
81+
}
82+
}
83+
84+
function guestAddThree() {
85+
num2 += 3;
86+
GuestScore.textContent = String(num2);
87+
88+
if (num2 >= 99) {
89+
num2 = 99;
90+
GuestScore.textContent = String(num2);
91+
}
92+
}
93+
94+
// ||RESET
95+
function reset() {
96+
num1 = 0;
97+
num2 = 0;
98+
HomeScore.textContent = String(num1);
99+
GuestScore.textContent = String(num2);
100+
}

0 commit comments

Comments
 (0)