From 81846f007dfc4f7943b009f79f063d140c6a13c8 Mon Sep 17 00:00:00 2001
From: Neale Pickett <neale@woozle.org>
Date: Sat, 26 Oct 2019 16:05:15 -0600
Subject: [PATCH] Anchored search button

---
 assets/css/default.css    | 12 +++++++++++-
 toys/grepdict/grepdict.js | 11 +++++++++++
 toys/grepdict/index.md    |  3 ++-
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/assets/css/default.css b/assets/css/default.css
index f370084..c2fa371 100644
--- a/assets/css/default.css
+++ b/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 {
diff --git a/toys/grepdict/grepdict.js b/toys/grepdict/grepdict.js
index 9280729..265089c 100644
--- a/toys/grepdict/grepdict.js
+++ b/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)
diff --git a/toys/grepdict/index.md b/toys/grepdict/index.md
index 27f230c..c655d14 100644
--- a/toys/grepdict/index.md
+++ b/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>