Allow pre-specified input in URL

diff --git a/index.html b/index.html
index 2d51e61df4bddb7453132d87139d28b65ef10f74..db9c823727411e988d0856338c8b54c4daedd3a9 100644 (file)
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
   </header>
 
   <main>
-    <input value="🏴‍☠️"></input>
+    <input></input>
     <div id="visualizations"></div>
   </main>
 
@@ -50,6 +50,7 @@
         padding: 4px;
         animation: 800ms fadeIn both;
         transition: filter 800ms;
+        position: relative;
       }
 
       :host(:hover),
@@ -57,6 +58,20 @@
         filter: drop-shadow(0 0 4px hsl(222deg 50% 50%));
         transition: filter 400ms;
       }
+      
+      :host::before {
+        content: "\a Unicode code point \a Code point in binary \a UTF-8";
+        position: absolute;
+        top: 0;
+        left: 0;
+        transform: translateX(calc(-100% - 8px));
+        white-space: pre;
+        display: none;
+      }
+
+      :is(:host(:hover), :host(:focus-within))::before {
+        display: block;
+      }
 
       ::slotted(*) {
         animation-name: slideIn, fadeIn;

diff --git a/script.js b/script.js
index b9c704495758c0c3a44898717aa090e7a4b9ed39..feabc151abaa2926253d0b642df2d529c06bfebb 100644 (file)
--- a/script.js
+++ b/script.js
@@ -88,9 +88,14 @@ function render(output) {
 }
 
 function handleChange(value) {
+  // Update URL with the input but do not spam the history
+  const url = new URL(`?q=${value}`, window.location.origin);
+  window.history.replaceState({}, '', url);
+
   const output = calculateOutput(value);
   render(output);
 }
 
 input.addEventListener('input', e => handleChange(e.target.value));
+input.value = new URL(document.location).searchParams.get('q') ?? '🏴‍☠️';
 handleChange(input.value); // Render the default value on first load