Video 59: Wiring up the User Interface

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;
+}

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)
+        messageOne.textContent = data.location
-        console.log(data.forecast)
+        messageTwo.textContent = data.forecast
       }
     })
   })

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}}