Creating a 16x16(NxN) grid
Could go smaller, but here's a quick one:
let n=10;container.innerHTML=(d='<div class="')+'grd" style="width:'+n*14+'px">'+[...Array(n*n)].reduce((a,b,i)=>a+d+'cell">'+i.toString(16)+(e='</div>'),'')+e;
.grd { display: inline-block; font-size: 9.5px; text-align: center; color: red;}
.cell { display:inline-block; width: 10px; height: 10px; margin: 1px; border: 1px solid black;}
<div id="container"></div>
Red, 131 bytes
n: -1 view collect[loop 16[keep 'across
loop 16[keep compose[field 20x20 font-color red(to""to-hex/size n: n + 1 2)]]keep 'return]]
If the leading zeroes need to be discarded:
Red, 154 bytes
n: -1 view collect[loop 16[keep 'across
loop 16[s: to""to-hex/size n: n + 1 2 parse s[remove"0"]keep
compose[field 20x20 font-color red(s)]]keep 'return]]
Note: The first screenshot is taken on my Win 10 PC, the second one - on my Win 8.1 laptop, hence the difference.
PowerShell, 319 bytes
-1..15|%{If($_-lt0){$s="┌──";0..14|%{$s=$s+"┬──"};Write-Host "$s┐";}Else{$i=$_;0..15|%{Write-Host "│"-NoNewline;Write-Host ("{0:X2}"-f($i*16+$_))-f 12 -NoNewline;};Write-Host "│";$s=("├","└")[$_-eq15]+"──";0..14|%{$s=$s+(("┼","┴")[$i-eq15]+"──")};Write-Host("$s┤","$s┘")[$_-eq15]}}
Screenshot of the output:
Only my second PowerShell answer, so can definitely be golfed substantially.. Also, is it possible to create and use an Alias for the Write-Host
?
Explanation:
TODO: Will add one later.
The X2
could be x2
to format the hexadecimal as lowercase letters.