How to make scoreboard with HTML,CSS
and JavaScript
What is the meaning of score board?
a large board or screen, sometimes electronic, on which the score of a game is shown.
Video Tutorial of scoreboard
scoreboard [Source Codes]
To Create a scoreboard follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Scoreboard</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="scoreboard">
- <div class="team">
- <h2>Brazil</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>Argentina</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="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: Arial, sans-serif;
- }
- body {
- height: 100vh;
- background: linear-gradient(#000000, #282A35);
- }
- .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: 2.5em;
- border-radius: 0.5em;
- }
- button {
- cursor: pointer;
- }
- #reset-btn {
- background-color: transparent;
- border: 3px solid #209DEE;
- color: #fff;
- font-weight: 700;
- height: 3em;
- width: 4em;
- margin: auto;
- border-radius: 0.5em;
- }
- .team h2 {
- color: #209DEE;
- }
- .team p {
- color: #ffffff;
- font-size: 3.75em;
- }
- .btn-container {
- width: 100%;
- display: flex;
- justify-content: space-between;
- }
- .team button {
- background-color: #209DEE;
- color: #fff;
- border: none;
- outline: none;
- padding: 0.3em 0.7em;
- border-radius: 0.3em;
- font-weight: 600;
- font-size: 1.3em;
- }
-
Now paste the following codes into your script.js 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;
- };
-
If you face any difficulties while Create a Scoreboard or your code is not working as expected, you can download the source code files by clicking on the download button.