Added: Unit conversion and icons

Added toggling between Fahrenheit and Celcius. Added icons for current weather conditions.
cerita · Mar 1, 2016 · 850d60a · 850d60a
1 parent 1befff1
commit 850d60a
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 9 deletions.
diff --git a/Screenshot 2016-02-27 17.00.38.png → assets/Screenshot 2016-02-27 17.00.38.png b/Screenshot 2016-02-27 17.00.38.png → assets/Screenshot 2016-02-27 17.00.38.png
diff --git a/assets/Screenshot 2016-02-29 23.14.10 (2).png b/assets/Screenshot 2016-02-29 23.14.10 (2).png
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,27 @@
+html,
 body {
     font-family: 'Lato', sans-serif;
-}
+    height: 100%;
+    width:100%;
+}
+
+#container {
+    width:50%;
+    margin: 10% auto 0;
+    text-align:center;
+}
+
+#temp {
+    font-size:3em;
+}
+
+#temp:hover {
+    cursor: pointer;
+}
+
+i {
+    color:aqua;
+    font-size:5em;
+    margin-bottom: .5em;
+}
+
diff --git a/index.html b/index.html
@@ -4,20 +4,23 @@
     <meta charset="UTF-8">
     <title>Weather App</title>
     <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+    <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css">
+
     <link href='https://fonts.googleapis.com/css?family=Lato:400,900,300|Unica+One' rel='stylesheet' type='text/css'>
+
+
+
 </head>
 
 <body>
     <div id='container'>
-    <header>
-        <h1>Weather App</h1>
-        <h2>By Cerita</h2>
-    </header>
 
     <div id='weather'>
+        <div id='weatherIcon'></div>
+
+        <p id='temp' class='units'> </p>
         <p id='location'> </p>
-        <p id='temp'> </p>
         <p id='conditions'> </p>
     </div>
 

diff --git a/js/script.js b/js/script.js
@@ -1,4 +1,6 @@
 $( document ).ready(function() {
+    var $conditionIcon = $('#weatherIcon');
+    var $tempDisplay = $('#temp');
 
 
     if (navigator.geolocation) {
@@ -16,20 +18,41 @@ $( document ).ready(function() {
                 location = response.current_observation.display_location.full;
                 $('#location').text(location);
 
+                $tempDisplay.click(function() {
+                    $tempDisplay.toggleClass('units');
+                    if($tempDisplay.hasClass('units')) {
+                        var weatherF = response.current_observation.temp_f;
+                        $tempDisplay.text(weatherF + '\xB0 F');
+                    } else {
+                        var weatherC = response.current_observation.temp_c;
+                        $tempDisplay.text(weatherC + '\xB0 C');
+                    }
+                });
                 var weatherF = response.current_observation.temp_f;
-                $('#temp').text(weatherF + '\xB0 F');
+                $tempDisplay.text(weatherF + '\xB0 F');
 
                 var condition = response.current_observation.weather;
                 $('#conditions').text(condition);
-            }
+
+                var conditionIcon = response.current_observation.icon;
+
+                var wuIcon = 'wi wi-wu-' + conditionIcon;
+                console.log(wuIcon);
+                $("#weatherIcon").append('<i class="' + wuIcon + '"></li>');
+
+                }
           });
 
       });
     } else {
       $("#location").html("Location is not available");
     }
 
+      //background
+  var bgUrl = 'url("http://placehold.it/300x300")';
+
 
+
 
 });