simplekolecalc/kole.html
vv01f edefca1e8a + add accesskey for submit
+ add some css
+ add noscript text to show for js blockers
2023-03-29 17:59:11 +02:00

103 lines
3.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Rechner zwischen Brutto-Netto-Kole</title>
<link rel="stylesheet" href="https://wtf-eg.de/css/style.css?h=56fa462e"/>
<style>
<!--
@media only screen {
}
@media only screen and (max-width: 600px){
body #wrap { font-size: 2.1em; }
}
@media only screen and (min-width: 768px){
label { display:inline-block;width: 12ex; }
body #wrap { font-size: 1.2em; width: 80%; }
}
-->
<!--
body { font-family: sans-serif; }
-->
#wrap {
display: inline-block;
}
fieldset{
margin: 0 auto;
max-width: 50ex;
padding: 2ex;
}
legend{
margin-bottom: 0px;
}
label{ width: auto !important; }
input[type='number']{text-align:right;}
input[readonly='readonly']{background-color:#eee;}
h1{
font-size: 2em;
text-align: center;
margin: 1ex auto 2ex auto;
}
</style>
</head>
<body>
<div id="#wrap">
<h1>Rechner zwischen Brutto-Netto-Kole</h1>
<noscript>
Dieser Rechner ist auf JavaScript angewiesen!
</noscript>
<fieldset>
<legend></legend>
<table>
<tr><td>Eingangsgröße:</td><td><input accesskey="b" type="radio" name="b" value="e" id="bb" class="bb" checked="checked"/><label for="bb"><u>B</u>rutto</label><input accesskey="n" type="radio" name="b" value="b" id="bn" class="bb"/><label for="bn"><u>N</u>etto</label><input accesskey="k" type="radio" name="b" value="k" id="bk" class="bb"/><label for="bk"><u>K</u>oLe</label></td></tr>
<tr><td>Br<u>u</u>tto</td><td><input accesskey="u" type="number" step="0.01" id="e" value="100.00"/>&thinsp;</td></tr>
<tr><td>Umsatzsteuersatz</td><td><input type="number" step="0.01" id="u" value="19.00"/>&thinsp;%</td></tr>
<tr><td>Umsatzsteuer</td><td><input readonly="readonly" type="number" step="0.01" id="us" value="0.00"/>&thinsp;</td></tr>
<tr><td>N<u>e</u>tto</td><td><input accesskey="e" type="number" step="0.01" id="n" value="0.00"/>&thinsp;</td></tr>
<tr><td>Entropieumlagesatz</td><td><input type="number" step="0.01" id="z" value="23.00"/>&thinsp;%</td></tr>
<tr><td>Entropieumlage</td><td><input readonly="readonly" type="number" step="0.01" id="eu" value="23.00"/>&thinsp;</td></tr>
<tr><td>K<u>o</u>Le</td><td><input accesskey="o" type="number" step="0.01" id="k" value="0.00"/>&thinsp;</td></tr>
<tr><td>&nbsp;</td><td><button accesskey="c" id="b" type="button">Bere<u>c</u>hnen</button></td></tr>
</table>
</fieldset>
<script>
var e=document.getElementById('e');
var u=document.getElementById('u');
var us=document.getElementById('us');
var n=document.getElementById('n');
var z=document.getElementById('z');
var eu=document.getElementById('eu');
var k=document.getElementById('k');
var bb=document.getElementById('bb');
var bn=document.getElementById('bn');
var bk=document.getElementById('bk');
var s = document.getElementById('b');
function getFormFloat(f){
return parseFloat(f.value);
}
function roundCents(f){
return Math.round( f * 100 ) / 100;
}
s.addEventListener('click', function(){
if(bk.checked){
e.value = roundCents( getFormFloat(k) * ( 1 + getFormFloat(u) / 100 ) / ( 1 - getFormFloat(z) / 100 ) );
n.value = roundCents( getFormFloat(k) / ( 1 - getFormFloat(z) / 100 ) );
}else if(bb.checked){
k.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) * ( 1 - getFormFloat(z) / 100 ) );
n.value = roundCents( getFormFloat(e) / ( 1 + getFormFloat(u) / 100 ) );
}else if(bn.checked){
e.value = roundCents( getFormFloat(n) * ( 1 + getFormFloat(u) / 100 ) );
k.value = roundCents( getFormFloat(n) * ( 1 - getFormFloat(z) / 100 ) );
}
us.value = roundCents(e.value * getFormFloat(u) / 100 );
eu.value = roundCents(n.value * getFormFloat(z) / 100 );
});
e.addEventListener('change', function(){bb.checked = true;});
n.addEventListener('change', function(){bn.checked = true;});
s.click();
</script>
</div>
</body>
</html>