Add sunrise and sunset time

Author: javitocor

dist/index.html

@@ -48,17 +48,19 @@ <h5 class="card-title text-center text-warning" id="title"></h5>
               <li class="list-group-item" id="desc"></li>
               <li class="list-group-item" id="pressure"></li>
               <li class="list-group-item" id="humidity"></li>
+              <li class="list-group-item" id="sunrise"></li>
             </ul>
             <ul class="list-group list-unstyled">
               <li class="list-group-item" id="minTemp"></li>
               <li class="list-group-item" id="maxTemp"></li>
               <li class="list-group-item" id="wind"></li>
               <li class="list-group-item" id="windDir"></li>
               <li class="list-group-item" id="clouds"></li>
+              <li class="list-group-item" id="sunset"></li>
             </ul>
           </div>
           <br>
-          <div class="text-center"><input type="submit" class="btn btn-warning" value="To Farenheit"></div>
+          <div class="text-center"><input type="submit" id="farCel" class="btn btn-warning" value="To Farenheit"></div>
         </div>
       </div>
     </section>

dist/main.js

@@ -14,3 +14,4 @@ const home = document.getElementById('home');
 home.addEventListener('click', ()=>{ location.reload(); });
 
 
+

src/index.js

@@ -14,16 +14,18 @@ const dom = function () {
 
     function fillCard(data) {
         helpers().addInnerText('title', data['name']);
-        helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> ' + data['main']['temp'] + ' Celsius');
-        helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> ' + data['main']['feels_like'] + ' Celsius');
+        helpers().addInnerText('temp', '<i class="fas fa-thermometer-half text-warning my-2"></i> Temp: ' + data['main']['temp'] + ' Celsius');
+        helpers().addInnerText('feel', '<i class="fas fa-meteor text-warning my-2"></i> Feeling: ' + data['main']['feels_like'] + ' Celsius');
         helpers().addInnerText('desc', '<i class="fas fa-cloud-sun-rain text-warning my-2"></i> ' + data['weather'][0]['main']);
-        helpers().addInnerText('pressure', '<i class="fas fa-compress-arrows-alt text-warning my-2"></i> ' + data['main']['pressure'] + ' hPa');
-        helpers().addInnerText('humidity', '<i class="fas fa-percent text-warning my-2"></i> ' + data['main']['humidity'] + '%');
-        helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> ' + data['main']['temp_min'] + ' Celsius');
-        helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i>' + data['main']['temp_max'] + ' Celsius');
+        helpers().addInnerText('pressure', '<i class="fas fa-compress-arrows-alt text-warning my-2"></i> Pressure: ' + data['main']['pressure'] + ' hPa');
+        helpers().addInnerText('humidity', '<i class="fas fa-percent text-warning my-2"></i> Humidity: ' + data['main']['humidity'] + '%');
+        helpers().addInnerText('minTemp','<i class="fas fa-temperature-low text-warning my-2"></i> Min: ' + data['main']['temp_min'] + ' Celsius');
+        helpers().addInnerText('maxTemp','<i class="fas fa-temperature-high text-warning my-2"></i> Max: ' + data['main']['temp_max'] + ' Celsius');
         helpers().addInnerText('wind','<i class="fas fa-wind text-warning my-2"></i> ' + data['wind']['speed'] + ' meter/sec');
         helpers().addInnerText('windDir','<i class="fas fa-compass text-warning my-2"></i> ' + data['wind']['deg'] + ' degrees');
-        helpers().addInnerText('clouds','<i class="fas fa-cloud text-warning my-2"></i> ' + data['clouds']['all'] + '%');
+        helpers().addInnerText('clouds','<i class="fas fa-cloud text-warning my-2"></i> Clouds: ' + data['clouds']['all'] + '%');
+        helpers().addInnerText('sunrise','<i class="fas fa-sun text-warning my-2"></i> ' + `Sunrise: ${new Date((data.sys.sunrise + data.timezone) * 1000).toLocaleTimeString().slice(-10, -6)} AM`);
+        helpers().addInnerText('sunset','<i class="fas fa-sun text-warning my-2"></i> ' + `Sunset: ${new Date((data.sys.sunset + data.timezone) * 1000).toLocaleTimeString().slice(-10, -6)} PM`);
     }
 
     function imageSwitch(data) {

src/js/dom.js

@@ -27,7 +27,9 @@
 #maxTemp,
 #wind,
 #windDir,
-#clouds {
+#clouds,
+#sunrise,
+#sunset {
     background-color: rgba(255,255,255,0.1);
 }