diff --git a/web-server/public/js/app.js b/web-server/public/js/app.js
index 6b2e8eb..f369d68 100644
--- a/web-server/public/js/app.js
+++ b/web-server/public/js/app.js
@@ -1,12 +1,21 @@
 console.log('Client side javascript file is loaded!')
 
-fetch('/weather?address=boston').then((response) => {
-  response.json().then((data) => {
-    if (data.error) {
-      console.log(data.error)
-    } else {
-      console.log(data.location)
-      console.log(data.forecast)
-    }
+const weatherForm = document.querySelector('form')
+const search = document.querySelector('input')
+
+weatherForm.addEventListener('submit', (e) => {
+  e.preventDefault()
+
+  const location = search.value
+
+  fetch('/weather?address=' + location).then((response) => {
+    response.json().then((data) => {
+      if (data.error) {
+        console.log(data.error)
+      } else {
+        console.log(data.location)
+        console.log(data.forecast)
+      }
+    })
   })
 })
diff --git a/web-server/templates/views/index.hbs b/web-server/templates/views/index.hbs
index 1a6e50d..80788e7 100644
--- a/web-server/templates/views/index.hbs
+++ b/web-server/templates/views/index.hbs
@@ -6,16 +6,23 @@
     <title>Weather</title>
     <link rel="icon" href="/img/weather.png">
     <link rel="stylesheet" href="/css/styles.css">
-    <script src="/js/app.js"></script>
 </head>
 
 <body>
   <div class="main-content">
     {{>header}}
+
     <p>Use this site to get your weather!</p>
+
+    <form>
+      <input placeholder="Location">
+      <button>Search</button>
+    </form>
   </div>
 
   {{>footer}}
+
+  <script src="/js/app.js"></script>
 </body>
 
 </html>
