hw

index.html

@@ -14,7 +14,7 @@
           <h1 class="title">Weather App</h1>
           <form class="getWeatherData">
             <input type="text" class="weather-city" placeholder="Enter a city.."/>
-            <input type="submit" value="Get Weather">
+            <input type="submit" value="Get Weather" class="btn-primary">
             <p class="city-error" style="display:none;">Whoops! Looks like that city doesn't exist, try another one.</p>
           </form>
         </div>
@@ -25,7 +25,7 @@ <h1 class="title">Weather App</h1>
 
           <h2 class="results-city"></h2>
 
-
+           <div class=iconPic></div>
           <div class="temperature-container">
             <span class="temperature-label"><strong>Temperature: </strong></span>
             <span class="temperature"></span>

js/main.js

@@ -1 +1,57 @@
-/* Javascript goes here! */
+console.log('hello');/* Javascript goes here! */
+
+
+$(document).ready(function() {
+  $('.btn-primary').on('click', requestWeatherData);
+
+});
+
+function requestWeatherData(event){
+  console.log('requesting data');
+  //this should request live weather data from api
+  //eventually based on what the user types
+    event.preventDefault();
+    var city= $(".weather-city").val();
+
+
+$.ajax({
+    method: 'GET',
+    url:`http://api.openweathermap.org/data/2.5/weather`,
+    data:`q=${city}&units=metric&appid=b485267fdf94c954775bbd8f902595a2`,
+    datatype:'json',
+    success: onSuccess,
+    error: onError
+  })
+}
+
+function onSuccess(data){
+
+  console.log('request succesful');
+  console.log(data);
+  $('.results-city').text(data.name);
+  $('.temperature').text(data.main.temp);
+  $('.humidity').text(data.main.humidity);
+  $('.description').text(data.weather[0].description);
+  console.log(data.weather);
+  console.log(data.weather[0]);
+  console.log(data.weather[0].description);
+
+    var icon = data.weather[0].icon;
+    var pic = `<img src='http://openweathermap.org/img/w/${icon}.png'>`;
+    $('.iconPic').append(pic);
+
+    var obj = data.name;
+    (function(el){
+    $('.weather-city').append(obj);
+
+});
+  }
+
+function onError(){
+  event.preventDefault();
+
+
+//TOdo:code me
+console.log('oops.itdonebrokered');
+
+}