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

Styling scorekeeper.

Browse Source
This commit is contained in:
Jonathan Bernard 2016-10-28 22:43:16 -05:00
parent 746df1cfc9
commit a4a8db2b8d
1 changed files with 57 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
scorekeeper/scorekeep.html
View File

@ -3,35 +3,69 @@
<head>
<title>Scrabble Score</title>
<style>
* { box-sizing: border-box; }
html {
background-color: #eee;
}
body {
margin: 0;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
div.score {
color: white;
display: inline-block;
font-family: monospace, sans-serif;
font-weight: bold;
margin: 0;
position: relative;
text-align: center;
width: 49%;
vertical-align: center;
width: 50%;
height: 50%;
}
div.score span { font-size: 20vw; }
.score.p1 { color: darkblue; }
.score.p2 { color: darkred; }
.score.p3 { color: darkgreen; }
.score.p4 { color: black; }
.score.p1 {
background-color: darkblue;
border: solid 1vw darkblue;
border-right: dashed 1vw darkred;
}
.score.p2 {
background-color: darkred;
border: solid 1vw darkred;
border-bottom: dashed black 1vw;
}
.score.p3 {
background-color: darkgreen;
border: solid 1vw darkgreen;
border-top: dashed darkblue 1vw;
}
.score.p4 {
background-color: black;
border: solid 1vw black;
border-left: dashed darkgreen 1vw;
}
input {
background: transparent;
border: none;
border-bottom: solid thin black;
color: white;
font-family: monospace;
font-size: 4vw;
font-size: 3vw;
opacity: 0.5;
position: absolute;
right: 0;
bottom: 0;
width: 24%;
right: 2vw;
bottom: 1vw;
text-align: right;
}
</style>
@ -48,19 +82,23 @@ function updateScore(event, player) {
<body>
<div class="p1 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p1')" name=p1 type=number />
</div>
<div class="p2 score">
<input name=p1 type=number placeholder="add points"
onkeypress="updateScore(event, 'p1')" />
</div><!--
--><div class="p2 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p2')" name=p2 type=number />
</div>
<div class="p3 score">
<input name=p2 type=number placeholder="add points"
onkeypress="updateScore(event, 'p2')" />
</div><!--
--><div class="p3 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p3')" name=p3 type=number />
</div>
<div class="p4 score">
<input name=p3 type=number placeholder="add points"
onkeypress="updateScore(event, 'p3')" />
</div><!--
--><div class="p4 score">
<span class>0</span>
<input onkeypress="updateScore(event, 'p4')" name=p4 type=number />
<input name=p4 type=number placeholder="add points"
onkeypress="updateScore(event, 'p4')" />
</div>
</body>
</html>