jdb/code-katas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to scorekeeper to support 4 players.

Browse Source
This commit is contained in:
Jonathan Bernard 2016-10-28 17:51:41 -05:00
parent 12c3980f92
commit 746df1cfc9
1 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
scorekeeper/scorekeep.html
View File

@ -10,23 +10,28 @@ html {
div.score {
display: inline-block;
font-family: monospace, sans-serif;
font-size: 20vw;
font-weight: bold;
position: relative;
text-align: center;
width: 49%;
}
.score.elijah {
color: darkblue;
}
div.score span { font-size: 20vw; }
.score.p1 { color: darkblue; }
.score.p2 { color: darkred; }
.score.p3 { color: darkgreen; }
.score.p4 { color: black; }
input {
border: none;
border-bottom: solid thin black;
font-family: monospace;
font-size: 10vw;
margin: 1rem 12%;
width: 24%
font-size: 4vw;
position: absolute;
right: 0;
bottom: 0;
width: 24%;
}
</style>
@ -34,20 +39,28 @@ input {
console.log("Loaded");
function updateScore(event, player) {
if (event.key != 'Enter') return;
var sbEl = document.getElementsByClassName(player)[0];
var sbEl = document.querySelector('.score.' + player + ' span');
sbEl.innerHTML = +(sbEl.innerHTML) + +(event.target.value);
event.target.value = "";
}
</script>
</head>
<body>
<div class="elijah score">
0
<div class="p1 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p1')" name=p1 type=number />
</div>
<div class="jdb score">
0
<div class="p2 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p2')" name=p2 type=number />
</div>
<div class="p3 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p3')" name=p3 type=number />
</div>
<div class="p4 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p4')" name=p4 type=number />
</div>
<input onkeypress="updateScore(event, 'elijah')" name=elijah type=number />
<input onkeypress="updateScore(event, 'jdb')" name=jdb type=number />
</body>
</html>