A scoreboard is a display that shows the score of a game or match. Scoreboards are used in a variety of sports, including baseball, basketball, football, hockey, and soccer. Scoreboards can also be used in other games and competitions, such as video games and esports.
We create a project folder structure. We name the project folder – ”Scoreboard”. Within this folder, we have 3 files. These files are:
- Scoreboard.html
- Scoreboard.css
- Scoreboard.js
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scoreboard</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="Scoreboard.css" />
</head>
<body>
<div class="scoreboard">
<div class="team">
<h2>Team A</h2>
<p id="teamAScore">0</p>
<div class="btn-container">
<button onclick="incrementScore('teamA')">+</button>
<button onclick="decrementScore('teamA')">-</button>
</div>
</div>
<button id="reset-btn" onclick="resetScores()">Reset</button>
<div class="team">
<h2>Team B</h2>
<p id="teamBScore">0</p>
<div class="btn-container">
<button onclick="incrementScore('teamB')">+</button>
<button onclick="decrementScore('teamB')">-</button>
</div>
</div>
</div>
<!-- Script-->
<script src="Scoreboard.js"></script>
</body>
</html>Code language: HTML, XML (xml)CSS:
Next, we style our game using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#000000 50%, #09f115 50%);
}
.scoreboard {
background-color: #1e1e21;
width: min(90%, 34em);
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 3em;
border-radius: 0.5em;
display: grid;
grid-template-columns: 2fr 1fr 2fr;
align-items: center;
}
.team {
text-align: center;
background-color: #353638;
padding: 2em;
border-radius: 0.5em;
}
button {
cursor: pointer;
}
#reset-btn {
background-color: transparent;
border: 3px solid #07e387;
color: #07e387;
height: 5em;
width: 5em;
margin: auto;
border-radius: 0.5em;
}
.team h2 {
color: #07e387;
}
.team p {
color: #ffffff;
font-size: 3.75em;
}
.btn-container {
width: 100%;
display: flex;
justify-content: space-between;
}
.team button {
background-color: #07e387;
border: none;
outline: none;
padding: 0.3em 0.7em;
border-radius: 0.3em;
font-weight: 600;
font-size: 1.3em;
}Code language: CSS (css)JS:
Finally, we add functionality using Javascript. For this once again copy the code below and paste it into your script file.
//Initialize scores for Team A and Team B
let teamAScore = 0;
let teamBScore = 0;
//Get references to the HTML elements that displays the scores
let teamAScoreValue = document.getElementById("teamAScore");
let teamBScoreValue = document.getElementById("teamBScore");
//Function to increment the score for a given team
let incrementScore = (team) => {
if (team === "teamA") {
teamAScore++;
teamAScoreValue.textContent = teamAScore;
} else if (team === "teamB") {
teamBScore++;
teamBScoreValue.textContent = teamBScore;
}
};
//Function to decrement the score for a given team
let decrementScore = (team) => {
if (team === "teamA" && teamAScore > 0) {
teamAScore--;
teamAScoreValue.textContent = teamAScore;
} else if (team === "teamB" && teamBScore > 0) {
teamBScore--;
teamBScoreValue.textContent = teamBScore;
}
};
//Function to reset both team scores to 0
let resetScores = () => {
teamAScore = 0;
teamBScore = 0;
teamAScoreValue.textContent = teamAScore;
teamBScoreValue.textContent = teamBScore;
};Code language: JavaScript (javascript)Our Scoreboard is now ready. You can go ahead and change Class Text to suit your likes and need.
