|
CS479/579 - Web Programming II
| Displaying exercises/e4/solution/num.html
<!DOCTYPE html>
<html>
<head>
<title> Numbers </title>
<meta charset='utf-8'>
<style>
table { border: 1px solid black; margin: 20px; padding: 20px;}
tr { height: 30px; }
.o { border-bottom: 1px solid gray; width: 300px; }
td:first-child { text-align: right; width: 40px; color: red; }
input { width: 100%; font-size: 24pt;}
</style>
<script>
function update(e) {
var n = parseInt(e.value);
if (isNaN(n)) return;
document.getElementById("dec").innerHTML = n.toString(10);
document.getElementById("hex").innerHTML = n.toString(16);
document.getElementById("oct").innerHTML = n.toString(8);
document.getElementById("bin").innerHTML = n.toString(2);
}
</script>
</head>
<body>
<h1> Exercise #4 </h1>
<table>
<tbody>
<tr><td colspan=2><input id='input' type='number' placeholder='Enter number' onchange='update(this);'>
<tr><td> Dec: <td class='o' id='dec'>
<tr><td> Hex: <td class='o' id='hex'>
<tr><td> Oct: <td class='o' id='oct'>
<tr><td> Bin: <td class='o' id='bin'>
</tbody>
</table>
</body>
</html>
|