Introduction of the Project
Welcome to the world of scorekeeping using JavaScript! We have designed this coding tutorial to build a simple scorekeeper application using Javascript. Whether you are a beginner looking to learn a new programming language or an experienced developer seeking to improve your skills, this javascript guide will provide you with the knowledge and tools necessary to create your own scorekeeper.
We will start with the basics of JavaScript syntax, move on to creating variables, and then dive into building a functional scorekeeper with user interaction. So buckle up, grab a cup of coffee, and let’s get started!
Objectives
1. To understand the fundamentals of JavaScript syntax, including variables, data types, functions, and conditional statements.
2. To learn how to create and manipulate HTML elements using JavaScript.
3. To gain experience working with the Document Object Model (DOM) to manipulate elements and respond to user events.
4. To provide a way to increase the scores of the players till it reaches the selected game points. And maintain the score of each player and determine who wins at the end of the game by changing the score color.
5. To use JavaScript functions and event handlers to add interactivity to the scorekeeper, such as incrementing scores, displaying updates, and resetting the scores.
6. To implement error handling and validation to ensure that the scorekeeper is reliable and user-friendly.
7. To incorporate best practices in code design and organization, such as writing clean and readable code and commenting code to make it more understandable.
Requirements
Here are some requirements specific to building a Scorekeeper application using JavaScript:
Web browser: You will need a web browser such as Google Chrome, Mozilla Firefox, or Safari to run the application and view the results.
Visual Studio Code or any other text editor such as Sublime Text or Notepad++ to write and save the JavaScript code.
Basic knowledge of HTML and CSS: You should have a basic understanding of HTML and CSS to create the user interface and structure of the scorekeeper application.
Knowledge of JavaScript syntax: You should have a basic understanding of JavaScript syntax, including variables, data types, functions, and conditional statements.
Familiarity with the Document Object Model (DOM): You should have a basic understanding of how to manipulate elements in the DOM using JavaScript.
Familiarity with event handling in JavaScript: You should have a basic understanding of how to respond to user events, such as clicks and keyboard input, using event handlers in JavaScript.
Source Code
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Score Keeper</title> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="content"> <div class="img-box"> <img src="https://blog.playo.co/wp-content/uploads/2017/03/table-tennis-shots.jpg" alt="ping-pong"> </div> <div class="para"> <p class="mx-3 pingpong">ping pong score keeper</p> </div> <div class="main mx-3"> <p class="mb-0 score"><span class="player-1-score">0</span> to <span class="player-2-score">0</span></p> <p class="simple-para mb-3">Use the button below to keep the score</p> <p><span class="input">Playing To:</span> <select name="playingTo" id=""> <option value="5">5</option> <option value="7">7</option> <option value="11">11</option> <option value="15">15</option> <option value="21">21</option> </select></p> </div> <div class="buttons d-flex flex-row"> <button class="btn btn-success player-1">+1 Player One</button> <button class="btn btn-primary player-2">+1 Player Two</button> <button class="btn btn-danger reset">Reset</button> </div> </div> <script src="main.js"></script> </body> </html>
CSS Code
.content {
margin: auto;
height: 466px;
width: 500px;
border: 1px solid rgba(56, 51, 51, 0.212);
box-shadow: 1px 1px 1px rgba(56, 51, 51, 0.212);
}
img {
height: 250px;
width: 100%;
}
.pingpong {
margin: 7px 20px;
text-align: left !important;
font-weight: 500;
}
.para {
border-bottom: 1px solid rgba(56, 51, 51, 0.212);
}
.score {
font-size: 40px;
}
.input {
font-weight: 500;
}
select {
border-radius: 40px;
width: 50px;
height: 25px;
outline: none;
}
button {
border: none;
outline: none;
width: 166.66666px;
height: 40px;
color: #fff;
}JAVASCRIPT Code
// PLAYER 1
var player_1_inc = document.querySelector(".player-1");
var player_1_score = document.querySelector(".player-1-score");
var score1 = 0;
// some useful var
var gameover = false;
var input = document.querySelector("select");
input.value = 7;
// PLAYER 2
var player_2_inc = document.querySelector(".player-2");
var player_2_score = document.querySelector(".player-2-score");
var score2 = 0;
// RESET
var reset = document.querySelector(".reset");
// incrementing score on clicking button
const score_increament = (score) => {
return score += 1;
}
// disabling button
const disable = (winner, loser) => {
player_1_inc.classList.add("disabled");
player_2_inc.classList.add("disabled");
winner.style.color = "green";
loser.style.color = "red";
}
// enabling button
const enable = () => {
player_1_inc.classList.remove("disabled");
player_2_inc.classList.remove("disabled");
player_1_score.style.color = "black";
player_2_score.style.color = "black";
}
// resetting
var resetting = () => {
score1 = 0;
score2 = 0;
player_1_score.innerHTML = score1;
player_2_score.innerHTML = score2;
enable();
gameover = false;
}
// clicking player1 button
player_1_inc.addEventListener("click", () => {
score1 = score_increament(score1)
if (!gameover){
player_1_score.innerHTML = score1;
if (score1 == input.value || score2 == input.value){
gameover = true;
disable(player_1_score, player_2_score);
}
}
})
// clicking player2 button
player_2_inc.addEventListener("click", () => {
score2 = score_increament(score2);
if (!gameover){
player_2_score.innerHTML = score2;
if (score1 == input.value || score2 == input.value){
gameover = true;
disable(player_2_score, player_1_score);
}
}
})
// clicking reset button
reset.addEventListener("click", () => {
resetting();
})Explanation of the Code
1. Initially, we used an internet image of a ping pong game under the <img> tag.
2. The user interface consists of 3 buttons for Player One, Player Two, and Reset, respectively.
3. There is a select tag that shows the game points, i.e., the game would end at 5 points or 7 points.
4. The CSS file is meant for styling the HTML where the container is provided. To give appropriate margin, padding, font color, and font size.
Moving to the scorekeeping process using Javascript:
1. We have used 2 buttons each to increase the Player one or Player two scores.
2. The Javascript code has a variable ‘gameover’ that is utilized to check whether the scores have reached the selected value from the drop-down list.
3. The basic logic applied here is that on reaching the desired value upon pressing the respective buttons of the 2 players, the buttons to increment points get disabled.
4. And finally, the reset button resets the points and enables the rest buttons once again.
Output
Main Interface
Points To Remember
We have successfully built a scorekeeper application using JavaScript for any game. It helps track game points and determine which player won the game. It has a very simple interface that anyone can utilize to keep tabs on the players score in any game. Here are some points or steps to remember:
- Plan the user interface: Start by creating a rough sketch or wireframe of the user interface, including the scores, buttons, and any other relevant elements.
- Set up the HTML structure: Write the HTML code to create the basic structure of the scorekeeper application, including elements such as a header, scores, buttons, and a reset button.
- Add styling with CSS: Use CSS to style the user interface and make it visually appealing, including setting colors, fonts, and layouts.
- Write the JavaScript code: Write the JavaScript code to add interactivity to the score keeper, including functions to increment scores, update the scores, and reset the scores.
- Use event handlers: Use event handlers to respond to user events such as button clicks, allowing the score keeper to react to user actions.
- Validate and test: Validate the JavaScript code and test the score keeper application to ensure that it works correctly and as intended.
- Optimize and refine: Optimize the code and refine the user interface as needed, making changes and improvements as needed to improve the overall user experience.
- Document the code: Write clear and concise comments in the code to explain what the code is doing and to make it easier for others to understand and maintain the code.
By following these steps, you will have a solid foundation for building a functional and user-friendly Scorekeeper application using JavaScript.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments