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