Introduction:
In this tutorial, we’ll explore how to create a simple score counter for two teams using HTML, CSS, and JavaScript. This project is perfect for beginners who want to gain a better understanding of how to manipulate HTML elements and update their content dynamically. By the end of this tutorial, you’ll have a working score counter that you can integrate into your own projects.
Things You Will Learn:
- Initializing variables to store scores for two teams (Team A and Team B).
- Getting references to HTML elements to display the scores.
- Creating functions to increment and decrement scores for each team.
- Implementing a reset function to bring both scores back to zero.
- Understanding the structure and flow of a basic web application using HTML, CSS, and JavaScript
Video Tutorial:
Here is the video tutorial for this project. If you like the tutorial subscribe to my YouTube channel. I post new projects based on HTML, CSS and Javascript on my channel regularly.
Project Folder Structure:
Now before we move on to actual coding we create a project folder structure. We name the project folder – ”Scoreboard”. Within this folder, we have 3 files. These files are:
- index.html
- style.css
- script.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="style.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="script.js"></script>
</body>
</html>
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%, #07e387 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;
}
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;
};
Conclusion:
In this tutorial, we’ve built a simple score counter web application using HTML, CSS, and JavaScript. You’ve learned how to initialize variables, manipulate the DOM, and create interactive buttons to increment and decrement scores for two teams. This project provides a solid foundation for understanding the fundamentals of web development and can be a starting point for more complex applications. Don’t forget to check out the video tutorial for a step-by-step demonstration, and feel free to customize the design and functionality to fit your needs. Happy coding!
