Stats - Adding names + Score with buttons
Stats - Adding names + Score with buttons
In this example the user can:
Add a new player name to the table
Add one to the player score by pressing a button
Minus one to the player score by pressing a button
Tables: Notice that the cells each have a row (vertical) and cell number. They both start at zero from the top left hand corner.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
Add a name: <input id="playerNameInput">
<button id="addPlayerBut">Add</button>
<h2>List of Players</h2>
<!-- table to print the names and keep track of stats -->
<table id="playerListTable" border="1px">
<tr><td>0</td><td>1</td><td>2</td><td>3</td></tr>
<tr><th>Row Number - 0</th><th>Name</th><th>Control</th><th>Score</th></tr>
</table>
<script src="script.js"></script>
</body>
</html>
//reference each input, table and button
const playerNameInput = document.getElementById("playerNameInput");
const playerListTable = document.getElementById("playerListTable");
const addPlayerBut = document.getElementById("addPlayerBut");
//add event listeners to the button
addPlayerBut.addEventListener("click", addNewPlayer);
//global variables
teamCount = 0; //keep track of players and use as id
function addNewPlayer() {
teamCount++;
var name = playerNameInput.value; //get player name from field
var row = playerListTable.insertRow(-1);//Add a new table row
row.insertCell(0).textContent = teamCount;
row.insertCell(1).textContent = name;
row.insertCell(2).innerHTML = '<button onclick="add(' + teamCount + ')">+</button><button onclick="minus(' + teamCount + ')">-</button>'
row.insertCell(3).innerHTML = 0;
}
//add one to the players score
function add(playerNum) {
console.log(playerNum);
var currentScore = playerListTable.rows[playerNum + 1].cells[3].textContent;
console.log(currentScore);
currentScore++;
playerListTable.rows[playerNum + 1].cells[3].innerHTML = currentScore;
}
//minus one from the player score
function minus(playerNum) {
console.log(playerNum);
var currentScore = playerListTable.rows[playerNum + 1].cells[3].textContent;
console.log(currentScore);
currentScore--;
if (currentScore > 0) {
playerListTable.rows[playerNum + 1].cells[3].innerHTML = currentScore;
} else {
playerListTable.rows[playerNum + 1].cells[3].innerHTML = 0;
}
}
This simple application allows the user to enter a task and category. Each task is saved into a separate category array.
When you select the categories on the left, the program prints the data from that array to the information area.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Organising App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Organiser</h1>
<div id="inputArea">
Enter Note:<input id="taskInput">
<!-- drop down list -->
Select List: <select id="categoriesInput">
<option value="School">School</option>
<option value="Sport">Activities</option>
<option value="Homework">Homework</option>
</select>
</div>
<button onclick="addTask()">Add task</button>
<div id="OutPutArea">
<h1>My Tasks</h1>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<h2>Categories</h2>
<button onclick="showTasks('School')" class="catButBlue">School</button><br>
<button onclick="showTasks('Sport')" class="catButRed">Sport</button><br>
<button onclick="showTasks('Homework')"
class="catButYellow">Homework</button><br>
</div>
<div class="column right" style="background-color:#bbb;">
<h2 id="categoryTitle"></h2>
<div id="tasksOutput">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript
var Sport = [];
var Homework = [];
var School = [];
//This function get the task and category from the fields and inserts into the array lists
function addTask() {
console.log("addTask");
var task = document.getElementById('taskInput').value;
var category = document.getElementById('categoriesInput').value;
console.log(task + ' ' + category);
if (category == "Sport") {
Sport.push(task);
console.log(Sport);
}
if (category == "Homework") {
Homework.push(task);
console.log(Homework);
}
if (category == "School") {
School.push(task);
console.log(School);
}
}
//This function gets the button argument and then prints that array of content as a list
function showTasks(category) {
console.log("Show tasks: " + category);
document.getElementById('categoryTitle').textContent = category;
var arr;
if (category == "Sport") {
arr = Sport;
}
if (category == "Homework") {
arr = Homework;
}
if (category == "School") {
arr = School;
}
console.log("array: " + arr);
var list = '<ul>';
//print the list of tasks
for (var i = 0; i < arr.length; i++) {
list += '<li>' + arr[i] + '</li>';
console.log("pront" + list);
}
list += '</ul>';
console.log(list);
document.getElementById('tasksOutput').innerHTML = list;
}
CSS
.column {
float: left;
padding: 5px;
}
.left {
width: 10%;
}
.right {
width: 70%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.catButBlue{
height:100px;
width:120px;
background-color: blue;
color: white;
text-align: center;
}
.catButRed{
height:100px;
width:120px;
background-color: red;
color: white;
text-align: center;
}
.catButYellow{
height:100px;
width:120px;
background-color: yellow;
color: black;
text-align: center;
}