Számrendszer átváltás papíron

by David Joseph Guzsik

HTML

<form>
<p>A(z) <input id="number" type="number" min=0 step=1 required> 10-es számrendszerbeli szám <input id="tosystem" type="number" min=2 max=16 step=1 required> számrendszerbe való <button>átváltása</button>.</p>
</form>
<table id="calc"></table>

CSS

table:empty{display:none}
table { border-collapse: collapse; }
table tbody tr :first-child {
  border-right: 1px solid;
  text-align: right;
  padding-right: 4px;
}
thead,tfoot { text-align: center; white-space:nowrap; }
tfoot span {
  font-weight: bold;
  text-transform: uppercase;
}
tbody td { width: 50% }
input[type=number] {
  border: 0;
  text-align: center;
  -webkit-appearance: none;
  outline:0;
  background: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
  background-position: bottom;
  background-size: 5px 1px;
  background-repeat: repeat-x;
  padding: 0 2px 2px;
}
input::-webkit-inner-spin-button {
  display:none;
}
#number {width:4.5em}
#tosystem {width:3em}
button {
  border: 0;
  background: transparent;
  font: inherit;
  color: #00f;
  display: inline;
  padding :0;
  margin: 0;
  text-decoration: underline;
  cursor: pointer;
}

JavaScript

$('form').on('submit',function(e){
	e.preventDefault();
	var html = '',
		number = parseInt($('#number').val(),10),
		tosys = parseInt($('#tosystem').val(),10),
		expectedOutput = number.toString(tosys).toUpperCase();
	
	html += '<thead><tr><td colspan="2">Bevitel: <code>'+number+'<sub>10</sub></code></td><tr><td colspan="2">Várt érték: <code>'+expectedOutput+'<sub>'+tosys+'</sub></code></td></tr></thead>';
	
	html += '<tbody>';
	var counter = number,
		divided = number,
		output = '';
	while (counter > 0){
		var remain = counter % tosys;
		
		html += "<tr><td>"+counter+'</td><td>'+remain+'</td></tr>';
		
		output = remain.toString(tosys)+output;
		counter = (counter-remain)/tosys;
	}
	html += "<tr><td>"+counter+'</td><td>&nbsp;</td></tr>';
	output = output.toUpperCase();
	
	html += '</tbody><tfoot><tr><td colspan="2">Kapott érték: <code>'+(output)+'<sub>'+tosys+'</sub></code><br>'+(output===expectedOutput?'<span style="color:green">Egyezik</span>':'<span style="color:red">Nem egyezik</span>')+'</td></tr></tfoot>';
	$('#calc').html(html);
});