Skip to content

Instantly share code, notes, and snippets.

@iiic

iiic/kalkulacka.html

Created May 30, 2014 04:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iiic/797a9b2e2d5537168ff1 to your computer and use it in GitHub Desktop.
Save iiic/797a9b2e2d5537168ff1 to your computer and use it in GitHub Desktop.
Download ZIP
Jednoduchá sčítačka pomocí html/css
Raw
kalkulacka.html
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>kalkulačka v html</title>
<style>
/* základ */
label
{
display:block;
border:4px solid #666;
width:20px;
height:20px;
font-size:20px;
text-align:center;
}
div
{
border:6px solid green;
position:absolute;
top:30px;
left:60px;
width:60px;
height:30px;
font-size:25px;
}
input
{
display:none;
}
input[type="reset"]
{
display:block;
}
input:checked+label
{
border:4px solid red;
}
input[name="m"],
input[name="m"]+label
{
display:none;
}
#plus+label
{
margin-left:40px;
margin-top:-30px;
}
#equal ~ label
{
display:none;
}
#plus:checked+label ~ #equal ~ label
{
display:block;
position:relative;
margin-left:40px;
margin-top:-30px;
background:#fff;
z-index:1;
}
#plus:checked+label
{
position:relative;
margin-bottom:-166px;
background:#fff;
z-index:1;
}
#plus:checked ~ input[name="m"]+label
{
display:block;
}
/* vypsání čísel */
#n1:checked ~ #plus:checked ~ #display:after { content:'1 +' }
#n2:checked ~ #plus:checked ~ #display:after { content:'2 +' }
#n3:checked ~ #plus:checked ~ #display:after { content:'3 +' }
#n4:checked ~ #plus:checked ~ #display:after { content:'4 +' }
#n5:checked ~ #plus:checked ~ #display:after { content:'5 +' }
#n6:checked ~ #plus:checked ~ #display:after { content:'6 +' }
/* plus */
#n1:checked ~ #plus:checked ~ #m1:checked ~ #equal:checked ~ #display:after
{ content:'2' }
#n1:checked ~ #plus:checked ~ #m2:checked ~ #equal:checked ~ #display:after,
#n2:checked ~ #plus:checked ~ #m1:checked ~ #equal:checked ~ #display:after
{ content:'3' }
#n1:checked ~ #plus:checked ~ #m3:checked ~ #equal:checked ~ #display:after,
#n2:checked ~ #plus:checked ~ #m2:checked ~ #equal:checked ~ #display:after,
#n3:checked ~ #plus:checked ~ #m1:checked ~ #equal:checked ~ #display:after
{ content:'4' }
#n1:checked ~ #plus:checked ~ #m4:checked ~ #equal:checked ~ #display:after,
#n2:checked ~ #plus:checked ~ #m3:checked ~ #equal:checked ~ #display:after,
#n3:checked ~ #plus:checked ~ #m2:checked ~ #equal:checked ~ #display:after,
#n4:checked ~ #plus:checked ~ #m1:checked ~ #equal:checked ~ #display:after
{ content:'5' }
#n1:checked ~ #plus:checked ~ #m5:checked ~ #equal:checked ~ #display:after,
#n2:checked ~ #plus:checked ~ #m4:checked ~ #equal:checked ~ #display:after,
#n3:checked ~ #plus:checked ~ #m3:checked ~ #equal:checked ~ #display:after,
#n4:checked ~ #plus:checked ~ #m2:checked ~ #equal:checked ~ #display:after,
#n5:checked ~ #plus:checked ~ #m1:checked ~ #equal:checked ~ #display:after
{ content:'6' }
#n1:checked ~ #plus:checked ~ #m6:checked ~ #equal:checked ~ #display:after,
#n2:checked ~ #plus:checked ~ #m5:checked ~ #equal:checked ~ #display:after,
#n3:checked ~ #plus:checked ~ #m4:checked ~ #equal:checked ~ #display:after,
#n4:checked ~ #plus:checked ~ #m3:checked ~ #equal:checked ~ #display:after,
#n5:checked ~ #plus:checked ~ #m2:checked ~ #equal:checked ~ #display:after,
#n6:checked ~ #plus:checked ~ #m1:checked ~ #equal:checked ~ #display:after
{ content:'7' }
#n2:checked ~ #plus:checked ~ #m6:checked ~ #equal:checked ~ #display:after,
#n3:checked ~ #plus:checked ~ #m5:checked ~ #equal:checked ~ #display:after,
#n4:checked ~ #plus:checked ~ #m4:checked ~ #equal:checked ~ #display:after,
#n5:checked ~ #plus:checked ~ #m3:checked ~ #equal:checked ~ #display:after,
#n6:checked ~ #plus:checked ~ #m2:checked ~ #equal:checked ~ #display:after
{ content:'8' }
#n3:checked ~ #plus:checked ~ #m6:checked ~ #equal:checked ~ #display:after,
#n4:checked ~ #plus:checked ~ #m5:checked ~ #equal:checked ~ #display:after,
#n5:checked ~ #plus:checked ~ #m4:checked ~ #equal:checked ~ #display:after,
#n6:checked ~ #plus:checked ~ #m3:checked ~ #equal:checked ~ #display:after
{ content:'9' }
#n4:checked ~ #plus:checked ~ #m6:checked ~ #equal:checked ~ #display:after,
#n5:checked ~ #plus:checked ~ #m5:checked ~ #equal:checked ~ #display:after,
#n6:checked ~ #plus:checked ~ #m4:checked ~ #equal:checked ~ #display:after
{ content:'10' }
#n5:checked ~ #plus:checked ~ #m6:checked ~ #equal:checked ~ #display:after,
#n6:checked ~ #plus:checked ~ #m5:checked ~ #equal:checked ~ #display:after
{ content:'11' }
#n6:checked ~ #plus:checked ~ #m6:checked ~ #equal:checked ~ #display:after
{ content:'12' }
</style>
<input type="radio" name="n" id="n1" value="1"> <label for="n1">1</label>
<input type="radio" name="n" id="n2" value="2"> <label for="n2">2</label>
<input type="radio" name="n" id="n3" value="3"> <label for="n3">3</label>
<input type="radio" name="n" id="n4" value="4"> <label for="n4">4</label>
<input type="radio" name="n" id="n5" value="5"> <label for="n5">5</label>
<input type="radio" name="n" id="n6" value="6"> <label for="n6">6</label>
<input type="checkbox" id="plus"> <label for="plus">+</label>
<input type="radio" name="m" id="m1" value="1"> <label for="m1">1</label>
<input type="radio" name="m" id="m2" value="2"> <label for="m2">2</label>
<input type="radio" name="m" id="m3" value="3"> <label for="m3">3</label>
<input type="radio" name="m" id="m4" value="4"> <label for="m4">4</label>
<input type="radio" name="m" id="m5" value="5"> <label for="m5">5</label>
<input type="radio" name="m" id="m6" value="6"> <label for="m6">6</label>
<input type="checkbox" id="equal"> <label for="equal">=</label>
<div id="display"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment