From 6d75e93eaf59771271b5aacb8bdc29917b6ebb19 Mon Sep 17 00:00:00 2001
From: Jason Williams <jaywll@outlook.com>
Date: Thu, 10 Oct 2019 12:45:14 -0600
Subject: [PATCH] Video 59: Wiring up the User Interface

---
 web-server/public/css/styles.css     | 13 +++++++++++++
 web-server/public/js/app.js          | 11 ++++++++---
 web-server/templates/views/index.hbs |  3 +++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/web-server/public/css/styles.css b/web-server/public/css/styles.css
index 9608afc..60fa420 100644
--- a/web-server/public/css/styles.css
+++ b/web-server/public/css/styles.css
@@ -40,3 +40,16 @@ header a {
 .portrait {
   width: 250px;
 }
+
+input {
+  border: 1px solid #CCCCCC;
+  padding: 8px;
+}
+
+button {
+  cursor: pointer;
+  border: 1px solid #888888;
+  background: #888888;
+  color: #FFFFFF;
+  padding: 8px;
+}
diff --git a/web-server/public/js/app.js b/web-server/public/js/app.js
index f369d68..4e1fdea 100644
--- a/web-server/public/js/app.js
+++ b/web-server/public/js/app.js
@@ -2,19 +2,24 @@ console.log('Client side javascript file is loaded!')
 
 const weatherForm = document.querySelector('form')
 const search = document.querySelector('input')
+const messageOne = document.querySelector('#message-1')
+const messageTwo = document.querySelector('#message-2')
 
 weatherForm.addEventListener('submit', (e) => {
   e.preventDefault()
 
   const location = search.value
 
+  messageOne.textContent = 'Loading...'
+  messageTwo.textContent = ''
+
   fetch('/weather?address=' + location).then((response) => {
     response.json().then((data) => {
       if (data.error) {
-        console.log(data.error)
+        messageOne.textContent = data.error
       } else {
-        console.log(data.location)
-        console.log(data.forecast)
+        messageOne.textContent = data.location
+        messageTwo.textContent = data.forecast
       }
     })
   })
diff --git a/web-server/templates/views/index.hbs b/web-server/templates/views/index.hbs
index 80788e7..0b2c78f 100644
--- a/web-server/templates/views/index.hbs
+++ b/web-server/templates/views/index.hbs
@@ -18,6 +18,9 @@
       <input placeholder="Location">
       <button>Search</button>
     </form>
+
+    <p id="message-1"></p>
+    <p id="message-2"></p>
   </div>
 
   {{>footer}}