Skip to content

Instantly share code, notes, and snippets.

@wu-lee

wu-lee/ns-100.html

Last active January 22, 2018 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wu-lee/765b9837b6c0311c81057775a5191835 to your computer and use it in GitHub Desktop.
Save wu-lee/765b9837b6c0311c81057775a5191835 to your computer and use it in GitHub Desktop.
Download ZIP
Clickable Number Squares
Raw
ns-100.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Number Square</title>
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
div#root {
max-width: 33em;
margin: 3em;
}
#root > div {
width: 3em;
display: inline-block;
background: grey;
border: 2px solid black;
text-align: center;
height: 3em;
}
</style>
<script>
$( document ).ready(function() {
$('#root').children().each(function(ix, node) {
$(node).click(function() {
$('#root>div').css('background', 'grey');
$('#root>div:nth-child('+(ix+1)+'n)').css('background','red');
})
});
});
</script>
</head>
<body>
<div id="root"><div id="n-1">1</div><div id="n-2">2</div><div id="n-3">3</div><div id="n-4">4</div><div id="n-5">5</div><div id="n-6">6</div><div id="n-7">7</div><div id="n-8">8</div><div id="n-9">9</div><div id="n-10">10</div><div id="n-11">11</div><div id="n-12">12</div><div id="n-13">13</div><div id="n-14">14</div><div id="n-15">15</div><div id="n-16">16</div><div id="n-17">17</div><div id="n-18">18</div><div id="n-19">19</div><div id="n-20">20</div><div id="n-21">21</div><div id="n-22">22</div><div id="n-23">23</div><div id="n-24">24</div><div id="n-25">25</div><div id="n-26">26</div><div id="n-27">27</div><div id="n-28">28</div><div id="n-29">29</div><div id="n-30">30</div><div id="n-31">31</div><div id="n-32">32</div><div id="n-33">33</div><div id="n-34">34</div><div id="n-35">35</div><div id="n-36">36</div><div id="n-37">37</div><div id="n-38">38</div><div id="n-39">39</div><div id="n-40">40</div><div id="n-41">41</div><div id="n-42">42</div><div id="n-43">43</div><div id="n-44">44</div><div id="n-45">45</div><div id="n-46">46</div><div id="n-47">47</div><div id="n-48">48</div><div id="n-49">49</div><div id="n-50">50</div><div id="n-51">51</div><div id="n-52">52</div><div id="n-53">53</div><div id="n-54">54</div><div id="n-55">55</div><div id="n-56">56</div><div id="n-57">57</div><div id="n-58">58</div><div id="n-59">59</div><div id="n-60">60</div><div id="n-61">61</div><div id="n-62">62</div><div id="n-63">63</div><div id="n-64">64</div><div id="n-65">65</div><div id="n-66">66</div><div id="n-67">67</div><div id="n-68">68</div><div id="n-69">69</div><div id="n-70">70</div><div id="n-71">71</div><div id="n-72">72</div><div id="n-73">73</div><div id="n-74">74</div><div id="n-75">75</div><div id="n-76">76</div><div id="n-77">77</div><div id="n-78">78</div><div id="n-79">79</div><div id="n-80">80</div><div id="n-81">81</div><div id="n-82">82</div><div id="n-83">83</div><div id="n-84">84</div><div id="n-85">85</div><div id="n-86">86</div><div id="n-87">87</div><div id="n-88">88</div><div id="n-89">89</div><div id="n-90">90</div><div id="n-91">91</div><div id="n-92">92</div><div id="n-93">93</div><div id="n-94">94</div><div id="n-95">95</div><div id="n-96">96</div><div id="n-97">97</div><div id="n-98">98</div><div id="n-99">99</div><div id="n-100">100</div></div></body></html>
Raw
number-square.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Number Square</title>
<meta name="viewport" content="width=device-width">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
div#container {
width: 100vmin;
height: 100vmin;
font-size: 0;
border-radius: 30px;
position: relative;
}
div#controls {
position: absolute;
top: 5%;
left: 5%;
right: 5%;
transform: translateY(-50%);
font-size: 3vmin;
}
div#controls input {
width: 10vmin;
}
div#inner-container {
position: absolute;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
background: #efefef;
border-radius: 20px;
text-align: center;
}
div#root {
position: absolute;
top: 11%;
bottom: 5%;
left: 8%;
right: 8%;
font-size: 0;
}
#root > div {
display: inline-block;
background: grey;
text-align: center;
}
#root > div > div {
border: 1px solid black;
height: calc(100% - 1px);
width: calc(100% - 1px);
}
#root > div > div > div {
position: relative;
top: 50%;
transform: translateY(-50%);
display: inline-block;
}
#root div {
display: inline-block;
}
</style>
<style id="highlight"></style>
<style id="size">
#root > div {
width: 10%;
height: 10%;
}
</style>
<script>
$(document).ready(function() {
var sizeInput = $('input[name=size]');
var rootNode = $('#root');
var n = sizeInput.val();
redraw(n);
sizeInput.change(function(n) { redraw($(n.target).val()) });
function redraw(size) {
var squared = size*size,
boxSize = (100/size).toFixed(3)+'%',
children = rootNode.children().length;
if (children > squared) {console.log("remove", children-squared);
rootNode.children().remove('div:nth-last-child(-n+'+(children-squared)+')');
}
else {console.log("add", squared-children);
var nodes = '';
for(var ix = children+1; ix <= squared; ix++) {
nodes += '<div title="'+ix+'"><div><div>'+ix+'</div></div></div>';
}
if (nodes)
rootNode.append(nodes);
}
$('#size').text(
'#root > div { width: '+boxSize+'; height: '+boxSize+'; } '+
'#root > div > div > div { font-size: '+(40/size).toFixed(3)+'vmin; }');
}
rootNode
.click(function(node) {
var target = $(node.target);
var n;
for(var ix =0; ix < 5; ix++) {
if (n = target.attr('title')) break;
target = target.parent();
}
$('input[name=multiple]').val(n);
$('#highlight').text(
'#root>div:nth-child('+n+'n) { background: red; }'
);
});
});
</script>
</head>
<body>
<div id="container">
<div id="inner-container">
<div id="controls">
<div>
<label>Multiple:</label> <input type="number" name="multiple" min="1" value=""></input>
<label>Size:</label> <input type="number" name="size" min="1" max="100" value="10"></input>
</div>
</div>
<div id="root"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment