diff --git a/index.html b/index.html
index 33c1580..443a427 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,10 @@
   <head>
     <meta charset="utf-8">
     <title>Mini Weather App</title>
-    <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/jquery.min.js"></script>
+    <script src="js/main.js"></script>
   </head>
   <body>
     <main class="weather-app container">
@@ -13,8 +15,10 @@
         <div class="col-md-4 col-md-offset-4">
           <h1 class="title">Weather App</h1>
           <form class="getWeatherData">
-            <input type="text" class="weather-city" placeholder="Enter a city.."/>
+            <input type="text" class="weather-city" name="q" placeholder="Enter a city.."/>
             <input type="submit" value="Get Weather">
+            <input type="hidden" name="appid" value="3501f282f2cd6fc99583263cfdc07353">
+            <input type="hidden" name="units" value="imperial">
             <p class="city-error" style="display:none;">Whoops! Looks like that city doesn't exist, try another one.</p>
           </form>
         </div>
@@ -23,7 +27,7 @@ <h1 class="title">Weather App</h1>
       <div class="row">
         <div class="col-md-4 col-md-offset-4 results">
 
-          <h2 class="results-city"></h2>
+          <div class="icon-container"></div>
 
 
           <div class="temperature-container">
@@ -45,7 +49,6 @@ <h2 class="results-city"></h2>
       </div>
 
     </main>
-    <script src="js/jquery.min.js"></script>
-    <script src="js/main.js"></script>
+
   </body>
 </html>
diff --git a/js/main.js b/js/main.js
index da8a934..0798514 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1 +1,41 @@
-/* Javascript goes here! */
+  console.log("helloworld!");
+$(document).ready( function(){
+  console.log('I am ready for this stuff');
+    // eventually this should be triggered by search button
+    $("form").submit(function(e) {
+  e.preventDefault();
+  requestWeatherData();
+});
+});
+
+function requestWeatherData() {
+  // this should request live weather data from API
+  // eventually based on what the user searches
+  console.log('Requesting Data');
+
+  $.ajax({
+    method: 'GET',
+    url: 'http://api.openweathermap.org/data/2.5/weather',
+    data: $("form").serialize(),
+    dataType: 'json',
+    success: onSuccess,
+    error: onError,
+  });
+}
+
+function onSuccess(data) {
+  // TODO: code me
+  var imgSource = `http://openweathermap.org/img/w/${data.weather[0].icon}.png`;
+
+  $('.temperature').html(data.main.temp);
+  $('.description').html(data.weather[0].description);
+  $('.icon-container').html(`<img src=${imgSource}>`);
+  console.log('Request successful');
+  console.log(data);
+}
+
+function onError() {
+  // TODO: code me
+  $('.city-error').css('display', 'block'); 
+  console.log('Oops its broken');
+};
