Anchored search button

assets/css/default.css

@@ -15,6 +15,16 @@ body {
   border-radius: 1em;
   max-width: 35em;
   font-family: "Lato", "Roboto", sans-serif;
+  font-size: 13pt;
+}
+
+input {
+  font-family: "Lato", "Roboto", sans-serif;
+  font-size: 13pt;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  border-bottom: 1px solid black;
 }
 
 #title, td.main {
@@ -97,7 +107,7 @@ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, ol + p, ul + p, pre + p, blockqu
 }
 
 h1, h2, h3, h4, h5, h6 {
-  font-weight: bolt;
+  font-weight: bold;
 }
 
 pre {

toys/grepdict/grepdict.js

@@ -34,12 +34,23 @@ function regexInput(e) {
   }
 }
 
+function anchorToggle(e) {
+  let re = document.querySelector("#regexp")
+  let val = re.value.replace(/^\^|\$$/g, "")
+  if (val == re.value) {
+    val = "^" + val + "$"
+  }
+  re.value = val
+  re.focus()
+}
+
 function init(e) {
   fetch("words.txt")
   .then(r => r.text())
   .then(addWords)
   
   document.querySelector("#regexp").addEventListener("input", regexInput)
+  document.querySelector("#anchor").addEventListener("click", anchorToggle)
 }
 
 window.addEventListener("load", init)

toys/grepdict/index.md

@@ -8,7 +8,8 @@ Ever wanted to run `grep` on `/usr/share/dict/words`,
 but you only have a phone?
 Me too.
 
-<label for="regexp">Match Regex</label>:
+<!-- <label for="regexp">Match Regex</label>: -->
 <input id="regexp" type="search" disabled="true" value="loading...">
+<button id="anchor">^$</button>
 
 <ul id="matches"></ul>