From 93a9b6eca8a3d57e0a22628b81fec33d2adaca24 Mon Sep 17 00:00:00 2001
From: deltreey <edward.coderman@mythicdevelopment.com>
Date: Mon, 22 Apr 2024 15:06:49 -0500
Subject: [PATCH] add some styling via bulma

---
 views/index.hbs  | 53 ++++++++++++++++++++++++++++++------------------
 views/layout.hbs |  4 ++++
 2 files changed, 37 insertions(+), 20 deletions(-)
diff --git a/views/index.hbs b/views/index.hbs
index 40cbcd3..6afed21 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -1,23 +1,36 @@
-<h1>{{title}}</h1>
-<p>Welcome to {{title}}</p>
-<button id="btn-pun">Pun Me!</button>
-<p id="pun"></p>
-<input type="text" id="rhyme-word" />
-<button id="btn-rhyme">Rhyme It!</button>
-<p id="rhymes"></p>
-<script>
-    document.querySelector('#btn-pun').addEventListener('click', () => {
-        fetch('/pun').then(response => response.text()).then(text => {
-            let textTag = document.querySelector('#pun');
-            textTag.innerHTML = text;
+<div class="content">
+    <h1 class="title">{{title}}</h1>
+    <p class="subtitle">Welcome to {{title}}</p>
+    <button id="btn-pun" class="button">Pun Me!</button></div><br/>
+    <div class="box" id="pun"></div><br/>
+    <input class="field input is-primary" type="text" placeholder="Word to Rhyme" id="rhyme-word" /><br/>
+    <button id="btn-rhyme" class="button">Rhyme It!</button><br/><br/>
+    <div class="box" id="rhymes"></div>
+    <script>
+        document.querySelector('#btn-pun').addEventListener('click', () => {
+            fetch('/pun').then(response => response.text()).then(text => {
+                let textTag = document.querySelector('#pun');
+                textTag.innerHTML = text;
+            });
         });
-    });
 
-    document.querySelector('#btn-rhyme').addEventListener('click', () => {
-        let word = document.querySelector('#rhyme-word').value;
-        fetch('/pun/query?word=' + encodeURIComponent(word)).then(response => response.json()).then(json => {
-            let textTag = document.querySelector('#rhymes');
-            textTag.innerHTML = json.join('</br>');
+        document.querySelector('#btn-rhyme').addEventListener('click', () => {
+            let word = document.querySelector('#rhyme-word').value;
+            if (!word) {
+                alert('Please enter a word to rhyme.');
+                return;
+            }
+            fetch('/pun/query?word=' + encodeURIComponent(word)).then(response => response.json()).then(json => {
+                let textTag = document.querySelector('#rhymes');
+                textTag.innerHTML = json.join('<br/>');
+            });
         });
-    });
-</script>
+
+        document.querySelector('#rhyme-word').addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                document.querySelector('#btn-rhyme').click();
+            }
+        })
+    </script>
+</div>
diff --git a/views/layout.hbs b/views/layout.hbs
index 068eb6b..831afda 100644
--- a/views/layout.hbs
+++ b/views/layout.hbs
@@ -2,9 +2,13 @@
 <html>
   <head>
     <title>{{title}}</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
     <link rel='stylesheet' href='/stylesheets/style.css' />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
   <body>
+  <section class="section">
     {{{body}}}
+  </section>
   </body>
 </html>
