knights_dialer_exercise/index.html

42 lines
1.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Knight's Dialer</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>
Hops to take: <input type="number" id="enter-hop-count" size="2" maxlength="2" min="1" max="99" value="3">
</p>
<div id="dialpad">
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
<button type="button" value="3">3</button>
<button type="button" value="4">4</button>
<button type="button" value="5">5</button>
<button type="button" value="6">6</button>
<button type="button" value="7">7</button>
<button type="button" value="8">8</button>
<button type="button" value="9">9</button>
<span><!-- spacer element for grid layout shift on bottom row --></span>
<button type="button" value="0">0</button>
</div>
<div id="results" class="hidden">
<p>
Count of distinct paths starting from <span id="starting-key-1">?</span> and taking <span id="hop-count">?</span> hop(s): <span id="path-count">?</span> <span id="count-timing">?</span>
</p>
<hr>
<h3>Distinct acyclic paths starting from <span id="starting-key-2">?</span> <span id="paths-timing">?</span>:</h3>
<div id="acyclic-paths"></div>
</div>
<script type="module" src="js/app.js"></script>
</body>
</html>