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