Add a character counter to the main online REPL

2 files changed, 11 insertions, 3 deletions

diff --git a/docs/repl.js b/docs/repl.js
index 2580d325..f911c8d3 100644
--- a/docs/repl.js
+++ b/docs/repl.js
@@ -1,10 +1,15 @@
 let body = document.body;
 let doc={}; // html elements with a class
 body.querySelectorAll('[class]').forEach(e=>doc[e.classList[0]]=e);
+let setcount = !doc.count ? (s=>s) : (s=>{
+  let l = s.length;
+  doc.count.textContent = l+" char"+(l!=1?"s":"");
+});
 let repl = ()=>{
   let s=doc.code.value;
   doc.rslt.classList.remove('err');
   doc.rslt.textContent=' ';
+  setcount(s);
   setTimeout(() => {
     try {
       doc.rslt.textContent=fmt(bqn(s));
@@ -97,7 +102,8 @@ if (location.hash) {
   });
   let b=atob(code);
   b=new Uint8Array([...b].map(c=>c.charCodeAt(0)));
-  doc.code.value = (new TextDecoder()).decode(b);
+  setcount(doc.code.value = (new TextDecoder()).decode(b));
+  if (doc.count) doc.count.textContent=(l=>l+" char"+(l!=1?"s":""))(s.length);
   if (run) repl();
 }
 doc.code.focus();
diff --git a/docs/try.html b/docs/try.html
index 41159639..89c4ceca 100644
--- a/docs/try.html
+++ b/docs/try.html
@@ -8,8 +8,9 @@
   <style>
     li { margin:0.7em 0; }
     textarea { padding:0.2em; }
-    .perm { font-size:0.7em; margin:-0.2em 1.6em 0 0; }
+    .perm, .count { font-size:0.7em; margin:-0.2em 1.6em 0 0; }
     .run, .perm { float:right; }
+    .count { float:left; opacity:0.6; }
     .rslt { border:none; background:none; min-height:8em; }
   </style>
 </head>
@@ -18,7 +19,8 @@
   <div class="cont">
     <div class="kb"></div>
     <textarea class="code" rows="8" autofocus></textarea>
-    <input class="run" type="submit" value="Run (or shift-enter)">
+    <div class="count"></div>
+    <input class="run" type="submit" value="Run (or shift-enter)"/>
     <a class="perm" href="#" title="Link with the code above embedded">permalink</a>
   </div>
   <pre class="rslt"></pre>