Mercurial > qr-html

comparison index.html @ 2:f27dbbc6e978

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Now with debounce
author nanaya <me@myconan.net>
date Sun, 15 Jan 2017 19:13:30 +0900
parents 30cd1768611b
children 6875be47fb24
comparison
equal deleted inserted replaced
1:30cd1768611b 2:f27dbbc6e978
62 <div class="page"> 62 <div class="page">
63 <div class="page__main"> 63 <div class="page__main">
64 <h1>QR Code Generator</h1> 64 <h1>QR Code Generator</h1>
65 65
66 <p> 66 <p>
67 Type something and get its QR code immediately. 67 Type something and get its QR code (almost) immediately.
68 </p> 68 </p>
69 69
70 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea> 70 <textarea class="inputbox js-qr-input" rows="4" autofocus></textarea>
71 71
72 <div class="outputbox js-qr-output"></div> 72 <div class="outputbox js-qr-output"></div>
79 </div> 79 </div>
80 </div> 80 </div>
81 81
82 <script src="jquery.min.js"></script> 82 <script src="jquery.min.js"></script>
83 <script src="qrcode.min.js"></script> 83 <script src="qrcode.min.js"></script>
84 <script src="lodash.min.js"></script>
84 85
85 <script> 86 <script>
86 var outputDom = document.getElementsByClassName("js-qr-output")[0]; 87 var outputDom = document.getElementsByClassName("js-qr-output")[0]
87 var qr = new QRCode(outputDom); 88 var qr = new QRCode(outputDom)
88 89
89 $(".js-qr-input").on("input", function(e) { 90 var refreshCode = function(e) {
90 var text = e.target.value; 91 var text = e.target.value
91 92
92 if (text !== "") { 93 if (text !== "") {
93 qr.makeCode(text); 94 qr.makeCode(text)
94 outputDom.classList.remove('js-hidden'); 95 outputDom.classList.remove('js-hidden')
95 } else { 96 } else {
96 outputDom.classList.add('js-hidden'); 97 outputDom.classList.add('js-hidden')
97 } 98 }
98 }); 99 }
100
101 $(".js-qr-input").on("input", _.debounce(refreshCode, 100))
99 </script> 102 </script>
100 </body> 103 </body>