css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="glass-pane">
  <div class="head-seg">
    <div class="pull-left">
      <h3><span id="name">Area</span>, <span id="country">COUNTRY</span></h3>
      <h4><span id="todayDay"></span>, <span id="todayDate"></span><sup id="supDate"></sup> <span id="todayMonth"></span></h4>
    </div>
    <div class="page-loading pull-left">
      <p class="text-center"><span class="fa fa-spinner fa-spin" id="spinLoading"></span></p>
    </div>
    <div class="pull-right">
      <ul class="toggle-unit">
        <li class="active" id="cBlock"><a href="#">°C</a></li>
        <li id="fBlock"><a href="#">°F</a></li>
      </ul>
    </div>
  </div>
  <div class="top-seg">
    <div class="container">
      <div class="rows">
        <div class="col-xs-12">
          <h4 class="text-center weather-desc" id="description"></h4>
        </div>
        <div class="col-xs-6 hidden-xxs">
          <img src="" id="currLink">
        </div>
        <div class="col-xxs col-xs-6">
          <p class="deg-val text-center main-temp"><span id="temp">0</span></p>
        </div>
        <div class="float-clear col-xs-6 hidden-xxs">
          <p class="text-center cent-val">Humidity : <span id="humidity">0</span></p>
        </div>
        <div class="col-xxs col-xs-6">
          <div class="container">
            <div class="rows">
              <p class="deg-val col-xs-5 text-right"><i class="typcn typcn-arrow-sorted-up"></i> <span id="tempMax">0</span></p>
              <p class="deg-val col-xs-5 text-center"><i class="typcn typcn-arrow-sorted-down"></i> <span id="tempMin">0</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mid-seg">
    <h3 class="pull-left">Hourly Forecast</h3>
    <!--<h4 class="pull-right"><span class="fa fa-angle-left"></span>   Swipe   <span class="fa fa-angle-right"></span></h4>-->
    <div class="container days-outer">
      <div class="rows days-inner">
        <div class="col-xs-2">
          <div class="container-fluid">
            <p class="col-xs-12 text-center"><span id="hourlyHours1"></span>:<span id="hourlyMins1"></span></p>
            <img id="hourlyLink1" src="" class="col-xs-12">
            <p class="deg-val col-xs-6 text-center"><i class="typcn typcn-thermometer"></i><span id="hourlyTemp1">0</span></p>
            <p class="col-xs-6 text-center"><i class="fa fa-tint"></i><span id="hourlyHumid1">0</span>%</p>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="container-fluid">
            <p class="col-xs-12 text-center"><span id="hourlyHours2"></span>:<span id="hourlyMins2"></span></p>
            <img id="hourlyLink2" src="" class="col-xs-12">
            <p class="deg-val col-xs-6 text-center"><i class="typcn typcn-thermometer"></i><span id="hourlyTemp2">0</span></p>
            <p class="col-xs-6 text-center"><i class="fa fa-tint"></i><span id="hourlyHumid2">0</span>%</p>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="container-fluid">
            <p class="col-xs-12 text-center"><span id="hourlyHours3"></span>:<span id="hourlyMins3"></span></p>
            <img id="hourlyLink3" src="" class="col-xs-12">
            <p class="deg-val col-xs-6 text-center"><i class="typcn typcn-thermometer"></i><span id="hourlyTemp3">0</span></p>
            <p class="col-xs-6 text-center"><i class="fa fa-tint"></i><span id="hourlyHumid3">0</span>%</p>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="container-fluid">
            <p class="col-xs-12 text-center"><span id="hourlyHours4"></span>:<span id="hourlyMins4"></span></p>
            <img id="hourlyLink4" src="" class="col-xs-12">
            <p class="deg-val col-xs-6 text-center"><i class="typcn typcn-thermometer"></i><span id="hourlyTemp4">0</span></p>
            <p class="col-xs-6 text-center"><i class="fa fa-tint"></i><span id="hourlyHumid4">0</span>%</p>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="container-fluid">
            <p class="col-xs-12 text-center"><span id="hourlyHours5"></span>:<span id="hourlyMins5"></span></p>
            <img id="hourlyLink5" src="" class="col-xs-12">
            <p class="deg-val col-xs-6 text-center"><i class="typcn typcn-thermometer"></i><span id="hourlyTemp5">0</span></p>
            <p class="col-xs-6 text-center"><i class="fa fa-tint"></i><span id="hourlyHumid5">0</span>%</p>
          </div>
        </div>
        <div class="col-xs-2">
          <div class="container-fluid">
            <p class="col-xs-12 text-center"><span id="hourlyHours6"></span>:<span id="hourlyMins6"></span></p>
            <img id="hourlyLink6" src="" class="col-xs-12">
            <p class="deg-val col-xs-6 text-center"><i class="typcn typcn-thermometer"></i><span id="hourlyTemp6">0</span></p>
            <p class="col-xs-6 text-center"><i class="fa fa-tint"></i><span id="hourlyHumid6">0</span>%</p>
          </div>
        </div>
      </div>
    </div>
    <h3 class="text-left">Daily Forecast</h3>
    <canvas id="lineChartC" width="400" height="200"></canvas>
    <canvas id="lineChartF" width="400" height="200"></canvas>
  </div>
  <div class="bot-seg">
    <div class="container">
      <div class="rows">
        <div class="col-xxs col-xs-6">
          <div class="sun-block">
            <h4 class="text-center pull-left"><i class="fa fa-sun-o fa-inverse"></i></h4>
            <div class="sun-times">
              <p class="sun-rise">: <span id="sunRiseHours"></span>:<span id="sunRiseMins"></span></p>
              <p class="sun-set">: <span id="sunSetHours"></span>:<span id="sunSetMins"></span></p>
            </div>
          </div>
          <div class="rain-block">
            <h4 class="text-center pull-left"><i class="fa fa-umbrella fa-inverse"></i></h4>
            <div class="precipitation">
              <p class="rainfall">: <span id="rain">0</span> mm</p>
              <p class="snowfall">: <span id="snow">0</span> mm</p>
            </div>
          </div>
        </div>
        <div class="col-xxs col-xs-6">
          <div class="wind-block">
            <h4 class="text-center"><i class="fa fa-flag fa-inverse"></i></h4>
            <svg height="100" width="100" viewBox="10 10 90 90">
              <filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="1.25"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="0.5" dy="0.5" result="offsetblur"/> <!-- how much to offset -->
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
  <circle cx="50" cy="50" r="31.75" stroke="#FFFFFF" stroke-width="9" fill="rgba(55,55,55,0.15)" style="filter:url(#dropshadow)"/>
              <circle cx="50" cy="50" r="31.75" stroke="#212121" stroke-width="7.5" fill="rgba(255,255,255,0)"/>
              <text x="47.75" y="20.25" fill="#FFF">N</text>
  <text x="47.75" y="20.25" fill="#FFF" transform="rotate(90 50 50)">E</text>
  <text x="47.75" y="20.25" fill="#FFF" transform="rotate(180 50 50)">S</text>
  <text x="47.25" y="20.25" fill="#FFF" transform="rotate(270 50 50)">W</text>
  <g id="compassNeedle" transform="rotate(315 50 50)">
  <polygon points="46.5,50 50,30 53.5,50" style="fill:#F44336"/>
  <polygon points="53.5,50 50,65 46.5,50"/>
    <circle cx="50" cy="50" r="5" stroke="#212121" fill="#FFF"/>
  </g>
  <!--<polygon points="50,30 55,50 50,60 45,50" fill="#212121" transform="rotate(45 50 50)" id="compassNeedle"/>-->
</svg>
            <p class="text-center">Wind Speed: <span id="windSpeed">0</span> m/s</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
            
          
!
            
              html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 100%;
  cursor: default;
}

body {
  background-image: url("https://res.cloudinary.com/dg6pstyla/image/upload/v1474390673/image_od7q8z.jpg");
  /*HIGHRES*/
  background-size: cover;
  background-attachment: fixed;
}

.float-clear {
  clear: both;
}

img {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 5%;
}

p {
  margin: 0;
  padding: 0;
}

ul {
  margin: 20px 0;
  padding: 0;
}

li {
  display: inline;
  text-decoration: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

a {
  text-decoration: none;
  padding: 0 15px;
}

text { /* FOR SVG */
  font-size: 40%;
} 

.deg-val:after {
  content: "°";
  position: absolute;
  z-index: 1;
}

.cent-val:after {
  content: "%";
  position: absolute;
  z-index: 1;
}

.glass-pane {
  height: auto;
  width: 544px;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  background-color: rgba(255, 255, 255, 0.5);
}

.glass-pane:before {
  content: "";
  height: 100%;
  width: 100%;
  margin: 0 auto;
  z-index: -2;
  background-image: url("https://res.cloudinary.com/dg6pstyla/image/upload/v1474390673/image_od7q8z.jpg");
  background-attachment: fixed;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
  opacity: 1;
  position: absolute;
  right: 0.25%;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 1), -0.1px -0.1px 25px rgba(0, 0, 0, 1);
}

.container {
  width: 92.5%;
  margin: 0 auto;
}

.head-seg {}

.toggle-unit {
  border: 0.5px solid #000;
}

.toggle-unit a {
  color: #212121;
  text-decoration: none;
}

.active {
  background-color: #212121;
  border-radius: 0.25px;
  cursor: default;
}

.active a {
  color: #FFFFFF;
  cursor: default;
}

.top-seg {}

.weather-desc {
  text-transform: capitalize;
}

.main-temp {
  font-size: 775%;
  font-weight: lighter;
}

.mid-seg {
  border-top: 0.5px solid #212121;
  margin-top: 5%;
  border-bottom: 0.5px solid #212121;
  padding-bottom: 5%;
}

.mid-seg img {
  margin: 8.5% auto;
}

.days-outer {
  overflow-x: scroll;
  overflow-y: hidden;
}

.days-inner {
  width: 200%;
}


/*.days-outer:before {
  content: "<";
  color: #212121;
  font-size: 350%;
  margin-top: 5%;
  position: absolute;
  left: 1.5%;
  z-index: 5;
}

.days-outer:after {
  content: ">";
  color: #212121;
  font-size: 350%;
  margin-top: 5%;
  position: absolute;
  right: 1.5%;
  z-index: 5;
}*/

#lineChartF {
  display: none;
}

.bot-seg {
  margin: 30px auto 0;
}

.bot-seg h4 {
  background-color: #212121;
  padding: 4px 10px;
  width: 50px;
  border-radius: 0.5px;
}

.sun-block h4,
.rain-block h4 {
  margin-top: 5%;
  margin-left: -12.5%;
}

.wind-block h4 {
  margin-top: 2.5%;
  margin-left: 88.5%;
}

.bot-seg p {
  padding: 2px 0;
}

.sun-block,
.rain-block {
  border-left: 0.5px solid #212121;
  padding: 5px 0;
}

.sun-block {
  border-top: 0.5px solid #212121;
}

.rain-block {
  margin-top: 15px;
  border-bottom: 0.5px solid #212121;
}

.wind-block {
  border-top: 0.5px solid #212121;
  border-right: 0.5px solid #212121;
  border-bottom: 0.5px solid #212121;
  margin-bottom: 30px;
  padding: 21.75px 0;
}

.sun-times,
.precipitation {
  margin: 10px 0;
  position: relative;
  left: 35%;
}

.sun-rise:before {
  content: "Sunrise ";
  position: absolute;
  left: -15%;
  z-index: 2;
}

.sun-set:before {
  content: "Sunset ";
  position: absolute;
  left: -15%;
  z-index: 2;
}

.rainfall:before {
  content: "Rainfall ";
  position: absolute;
  left: -15%;
  z-index: 2;
}

.snowfall:before {
  content: "Snowfall ";
  position: absolute;
  left: -15%;
  z-index: 2;
}

.bot-seg svg {
  height: 60%;
  width: 60%;
  display: block;
  /* ELSE MARGIN: 0 auto; TO CENTER WONT WORK */
  margin: -50px auto 0;
}

.page-loading {
  display: inline-block;
  /*position: absolute;
  top: 3.5%;*/
}

.page-loading p {
  color: #333333;
  font-size: 200%; 
  margin: 10px;
}


/* CSS FOR MOBILE DEVICES */

@media only screen and (max-width: 544px) {
  body {
    background-image: url('https://res.cloudinary.com/dg6pstyla/image/upload/q_auto:eco/v1474390673/image_od7q8z.jpg');
    /* LOW RES */
    font-size: 110%;
    overflow-x: hidden;
  }
  h1,
  h2,
  h3,
  h4 {
    font-size: 110%;
  }
  
  text { /* FOR SVG */
  font-size: 25%;
} 

  .glass-pane {
    width: 100%;
  }
  .glass-pane:before {
    background-image: none;
  }
  .col-xxs {
    display: block;
    /*float: none;*/
    width: 100%;
  }
  .hidden-xxs {
    display: none;
  }
  .weather-desc:before {
    content: "";
    background-image: url('');
    background-size: cover;
    display: inline-block;
    height: 50px;
    width: 50px;
    position: relative;
    top: 22.5px;
    left: -10px;
  }
  .days-inner {
    width: 250%;
  }
  .sun-block {
    border: 0.5px solid #212121;
  }
  .rain-block {
    margin-top: 15px;
    border: 0.5px solid #212121;
  }
  .sun-block h4,
  .rain-block h4 {
    margin-left: -7.5%;
  }
  .wind-block {
    margin-top: 15px;
    border: 0.5px solid #212121;
    padding: 12.5px 0;
  }
  .wind-block h4 {
    margin-left: -7.5%;
  }
}
            
          
!
            
              // GENERATING DATE DETAILS

var today = new Date();
var todayDate = today.getDate();
var supDate;
if (todayDate == 1 || todayDate == 21 || todayDate == 31) {
  supDate = "st";
} else if (todayDate == 2 || todayDate == 22) {
  supDate = "nd";
} else if (todayDate == 3 || todayDate == 23) {
  supDate = "rd";
} else {
  supDate = "th";
}
var weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var todayDay = weekDay[today.getDay()];
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var todayMonth = months[today.getMonth()];

$("#todayDay").text(todayDay);
$("#todayDate").text(todayDate);
$("#supDate").text(supDate);
$("#todayMonth").text(todayMonth);

// GET USER CO-ORDINATES
if ("geolocation" in navigator) {
  var positionError = function(error) {
    console.log("getCurrentPosition ERROR")
    console.log("Error Code: " + error.code);
    console.log("Error Message: " + error.message);
    alert("Geolocation data unavailable. Kindly turn ON Location Data. If Location Data is turned ON, try accessing the site via a secure protocol i.e. with a 'https://' prefix.")
  };
  var positionOption = {
    enableHighAccuracy: false
  }; // NOT REALLY NECESSARY, THIS IS THE DEFAULT OPT
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("POSITION ACCESSED");
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;
    console.log("(" + lat + "," + lon + ")");
    //GET CURRENT WEATHER JSON
    var apiKey = "facdbc146080a6349e8067ad038c62af";
    //var linkPrefix = "https://crossorigin.me/";
    var linkPrefix = "https://cors-anywhere.herokuapp.com/";
    //TO USE CROSSORIGIN HTTPS PREFIX ONLY FOR iOS 10
    /*var linkPrefix = "";
    var deviceAgent = navigator.userAgent.toLowerCase();
    if (/(iphone|ipod|ipad).* os 10_/.test(deviceAgent) || navigator.userAgent.indexOf("Chrome") != -1 || navigator.userAgent.indexOf("Safari") != -1) {
      console.log("iOS 10 or Safari or Chrome");
      linkPrefix = "https://crossorigin.me/";
    } else {
      console.log("NOT iOS 10 or Safari or Chrome");
    }*/
    $.getJSON(linkPrefix + "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=" + apiKey, function(json) {
      console.log(json);
      var currIcon = json.weather[0].icon;
      var currIconLink = "";
      switch (currIcon) {
        case "01d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727187/01d.png";
          break;
        case "01n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727185/01n.png";
          break;
        case "02d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596716/02d.png";
          break;
        case "02n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596717/02n.png";
          break;
        case "03d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596714/03d.png";
          break;
        case "03n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596713/03n.png";
          break;
        case "04d":
        case "04n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727181/04d.png";
          break;
        case "09d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727188/09d.png";
          break;
        case "09n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727180/09n.png";
          break;
        case "10d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727183/10d.png";
          break;
        case "10n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727182/10n.png";
          break;
        case "11d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727188/11d.png";
          break;
        case "11n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727176/11n.png";
          break;
        case "13d":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727182/13d.png";
          break;
        case "13n":
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727180/13n.png";
          break;
        case "50d":
        case "50n":
        default:
          currIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1478440078/IMG_0066_a7q5qn.png";
          break;
      }
      document.getElementById("currLink").setAttribute("src", currIconLink);
      $("head").append("<style>@media only screen and (max-width: 544px) { .weather-desc:before { background-image: url(" + currIconLink + "); }}</style>"); // AS :BEFORE ELEMENTS ARE NOT PART OF THE DOM, WE HAVE TO RESORT TO THIS METHOD TO ALTER IT THROUGH JQUERY
      $("#name").text(json.name);
      $("#country").text(json.sys.country);
      $("#description").text(json.weather[0].description);
      $("#humidity").text(json.main.humidity);
      $("#windSpeed").text(json.wind.speed);
      // FUNCTION TO CONVERT K TO C
      function convKelvinToCelcius(kelvin) {
        var celcius = kelvin - 273;
        return celcius;
      }

      //DATA ASSIGNED TO GLOBAL VARIABLES. TO BE USED IN CELCIUS-FARENHEIT CONVERSIONS
      temp = Math.floor(convKelvinToCelcius(json.main.temp));
      tempMax = Math.floor(convKelvinToCelcius(json.main.temp_max));
      tempMin = Math.floor(convKelvinToCelcius(json.main.temp_min));

      $("#temp").text(temp);
      $("#tempMax").text(tempMax);
      $("#tempMin").text(tempMin);
      // SUNRISE/SET UNIX TIMESTAMP CONVERSION
      function addZero(i) { // ADD 0 IF HRS/MINS IS IN SINGLE DIGITS
        if (i < 10) {
          i = "0" + i;
        }
        return i;
      }
      var sunRise = new Date((json.sys.sunrise) * 1000); // *1000 AS DATE FUNCTION REQ TIMESTAMP TO BE IN MILLISECONDS
      var sunRiseHours = addZero(sunRise.getHours());
      var sunRiseMins = addZero(sunRise.getMinutes());
      $("#sunRiseHours").text(sunRiseHours);
      $("#sunRiseMins").text(sunRiseMins);

      var sunSet = new Date((json.sys.sunset) * 1000);
      var sunSetHours = addZero(sunSet.getHours());
      var sunSetMins = addZero(sunSet.getMinutes());
      $("#sunSetHours").text(sunSetHours);
      $("#sunSetMins").text(sunSetMins);

      if ("rain" in json) { // TO CHECK IF RAIN KEY IS IN THE JSON
        $("#rain").text(json.rain["3h"]);
      } else {
        $("#rain").text("0");
      }
      if ("snow" in json) { // TO CHECK IF SNOW KEY IS IN THE JSON
        $("#snow").text(json.snow["3h"]);
      } else {
        $("#snow").text("0");
      }
      var windDeg = json.wind.deg;
      $("#compassNeedle").attr("transform", "rotate(" + windDeg + " 50 50)");

      var cityID = json.id;   
      $.getJSON(linkPrefix + "http://api.openweathermap.org/data/2.5/forecast?id=" + cityID + "&appid=" + apiKey, function(json) { // linkPrefix USED TO ADD THE CROSS ORIGIN HTTPS PREFIX FOR iOS 10. GO TO LINE 40 FOR CODE
        $("#spinLoading").fadeOut(1200);
        hourlyTempArray = [];
        for (i = 0; i < 6; i++) {
          var iPlus = i + 1;
          var hourlyDate = new Date((json.list[i].dt) * 1000);
          var hourlyHours = hourlyDate.getHours();
          var hourlyMins = hourlyDate.getMinutes();
          var hourlyTemp = Math.floor(convKelvinToCelcius(json.list[i].main.temp));
          var hourlyHumid = json.list[i].main.humidity;
          hourlyTempArray.push(hourlyTemp); //GLOBAL VARIABLE

          hourlyHours = addZero(hourlyHours);
          hourlyMins = addZero(hourlyMins);
          $("#hourlyTemp" + iPlus).text(hourlyTemp);
          $("#hourlyHumid" + iPlus).text(hourlyHumid);
          $("#hourlyHours" + iPlus).text(hourlyHours);
          $("#hourlyMins" + iPlus).text(hourlyMins);
          var hourlyIcon = json.list[i].weather[0].icon;
          var hourlyIconLink = "";
          switch (hourlyIcon) {
            case "01d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727187/01d.png";
              break;
            case "01n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727185/01n.png";
              break;
            case "02d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596716/02d.png";
              break;
            case "02n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596717/02n.png";
              break;
            case "03d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596714/03d.png";
              break;
            case "03n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1473596713/03n.png";
              break;
            case "04d":
            case "04n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727181/04d.png";
              break;
            case "09d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727188/09d.png";
              break;
            case "09n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727180/09n.png";
              break;
            case "10d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727183/10d.png";
              break;
            case "10n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727182/10n.png";
              break;
            case "11d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727188/11d.png";
              break;
            case "11n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727176/11n.png";
              break;
            case "13d":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727182/13d.png";
              break;
            case "13n":
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1474727180/13n.png";
              break;
            case "50d":
            case "50n":
            default:
              hourlyIconLink = "https://res.cloudinary.com/dg6pstyla/image/upload/v1478440078/IMG_0066_a7q5qn.png";
              break;
          }
          $("#hourlyLink" + iPlus).attr("src", hourlyIconLink);
        }

        //CHART.JS LINE GRAPH DUAL AXIS
        var dataT = [];
        var dataH = [];
        var dataDate = [];
        for (i = 0; i < json.list.length; i++) {
          dataT.push(json.list[i].main.temp);
          dataH.push(json.list[i].main.humidity);
          dataDate.push(json.list[i].dt);
        }
        dataT = dataT.map(function(kel) {
          var cel = Math.floor(kel - 273);
          return cel;
        });
        dataDate = dataDate.map(function(dateStamp) {
          var date = new Date(dateStamp * 1000);
          var dayNumber = date.getDay();
          var weekDay = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
          var day = weekDay[dayNumber];
          return day;
        });
        for (i = 0; i < dataDate.length; i++) {
          for (j = 0; j < i; j++) {
            if (dataDate[i] == dataDate[j]) {
              dataDate[i] = "";
              break;
            }
          }
        }
        if (dataDate[0] == todayDay) {
          dataDate[0] = "";
        }
        dataDate = dataDate.map(function(day) {
          day = day.split("");
          day = day.slice(0, 3);
          day = day.join("");
          return day;
        });

        function chartJS() {
          var ctx = document.getElementById("lineChartC").getContext("2d");
          var myChart = new Chart(ctx, {
            type: "line",
            data: {
              "labels": dataDate,
              /*[
                             "01.12.2015",
                             "02.12.2015",
                             "03.12.2015",
                             "04.12.2015",
                             "30.12.2015"
                           ],*/
              "datasets": [{
                "label": "Temperature (°C)",
                "fill": "false",
                "borderColor": "#D50000",
                "borderWidth": "2",
                "pointRadius": "0",
                "data": dataT
                  /*[
                                    33,
                                    35,
                                    34,
                                    38,
                                    32
                                  ]*/
              }, {
                "label": "Humidity (%)",
                "fill": "false",
                "borderColor": "#00B8D4",
                "borderWidth": "2",
                "pointRadius": "0",
                //"backgroundColor": "#000055",
                "yAxisID": "y-axis-1",
                "data": dataH
                  /*[
                                   97,
                                   26,
                                   54,
                                   37,
                                   95
                                 ]*/
              }]
            },
            options: {
              scales: {
                xAxes: [{
                  ticks: {
                    "autoSkip": false,
                    "maxRotation": 0,
                    "minRotation": 0
                  }
                }],
                yAxes: [{
                  gridLines: {
                    "display": false,
                    "id": "y-axis-0"
                  },
                  ticks: {
                    "beginAtZero": false,
                    "stepSize": "5"
                  },
                  "position": "left",
                  "id": "y-axis-0"
                }, {
                  ticks: {
                    "beginAtZero": true,
                    "stepSize": "20"
                  },
                  "position": "right",
                  "id": "y-axis-1"
                }]
              }
            }

          });
        };

        chartJS(); // // END OF CHART WITH CELCIUS SCALE
        
        // CHART WITH FAHRENHEIT SCALE
        function celciusToF(celcius) {
        var farenheit = Math.floor(((celcius * 9) / 5) + 32);
        return farenheit;
      };
        var dataTinF = dataT.map(celciusToF);
      function chartJS_F() { // _F VARIABLES USED TO DIFFERENTIATE BETWEEN CURRENT AND THE CELCIUS CHART ABOVE
          var ctx_F = document.getElementById("lineChartF").getContext("2d");
          var myChart_F = new Chart(ctx_F, {
            type: "line",
            data: {
              "labels": dataDate,
              "datasets": [{
                "label": "Temperature (°F)",
                "fill": "false",
                "borderColor": "#D50000",
                "borderWidth": "2",
                "pointRadius": "0",
                "data": dataTinF
              }, {
                "label": "Humidity (%)",
                "fill": "false",
                "borderColor": "#00B8D4",
                "borderWidth": "2",
                "pointRadius": "0",
                "yAxisID": "y-axis-1",
                "data": dataH
              }]
            },
            options: {
              scales: {
                xAxes: [{
                  ticks: {
                    "autoSkip": false,
                    "maxRotation": 0,
                    "minRotation": 0
                  }
                }],
                yAxes: [{
                  gridLines: {
                    "display": false,
                    "id": "y-axis-0"
                  },
                  ticks: {
                    "beginAtZero": false,
                    "stepSize": "5"
                  },
                  "position": "left",
                  "id": "y-axis-0"
                }, {
                  ticks: {
                    "beginAtZero": true,
                    "stepSize": "20"
                  },
                  "position": "right",
                  "id": "y-axis-1"
                }]
              }
            }
          });
        };
        chartJS_F(); // END OF CHART WITH FAHRENHEIT SCALE

        console.log("json.list.length: " + json.list.length);
      });
    });

    $("#fBlock").click(function() {
      $("#cBlock").removeClass("active");
      $("#fBlock").addClass("active");

      function celciusToF(celcius) {
        var farenheit = Math.floor(((celcius * 9) / 5) + 32);
        return farenheit;
      };
      $("#temp").text(celciusToF(temp));
      $("#tempMax").text(celciusToF(tempMax));
      $("#tempMin").text(celciusToF(tempMin));
      for (i = 0; i < 6; i++) {
        var iPlus = i + 1;
        $("#hourlyTemp" + iPlus).text(celciusToF(hourlyTempArray[i]));
      }
      $("#lineChartC").fadeOut(10, function() {
        $("#lineChartF").fadeIn(10);
      });
    });

    $("#cBlock").click(function() {
      $("#fBlock").removeClass("active");
      $("#cBlock").addClass("active");
      $("#temp").text(temp);
      $("#tempMax").text(tempMax);
      $("#tempMin").text(tempMin);
      for (i = 0; i < 6; i++) {
        var iPlus = i + 1;
        $("#hourlyTemp" + iPlus).text(hourlyTempArray[i]);
      }
      $("#lineChartF").fadeOut(100, function() {
        $("#lineChartC").fadeIn(100);
      });
    });

  }, positionError, positionOption);
} else {
  console.log("LOCATION DENIED");
}

console.log("COMPLETED");
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console