A Pen by yuanyu

Thumbnail
This awesome code was written by yuanyu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yuanyu ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  yuanyu</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons-wind.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="vertical-container">
   <div class="run">
     <p id="temp" data-toggle="tooltip" title="click to change degree"></p>
     <div id="timezone"></div>
     <!-- clear-day, clear-night -->
     <i class="wi wi-night-clear medium-icon hide"></i>
     <i class="wi wi-day-clear medium-icon hide"></i>
     <!-- snow -->
      <i class="wi wi-day-snow medium-icon hide"></i>
     <!-- sleet -->
     <i class="wi wi-day-sleet medium-icon hide"></i>
     <!-- fog -->
     <i class="wi wi-day-fog medium-icon hide"></i>
      <!-- rain-->
     <i class="wi wi-day-rain medium-icon hide"></i>
      <!-- cloudy-->
     <i class="wi wi-day-cloudy medium-icon hide"></i>
     <!-- wind-->
     <i class="wi wi-day-windy medium-icon hide"></i>
     <!-- partly-cloudy-day, or partly-cloudy-night-->
     <i class="wi wi-night-partly-cloudy medium-icon hide"></i>
     <span id="summary"></span>
     <div class="test vertical-container">
       <!-- snow -->
       <i class="wi wi-day-clear big-icon hide"></i>
       <!-- snow -->
        <i class="wi wi-day-snow big-icon hide"></i>
       <!-- sleet -->
       <i class="wi wi-day-sleet big-icon hide"></i>
       <!-- fog -->
       <i class="wi wi-day-fog big-icon hide"></i>
        <!-- rain-->
       <i class="wi wi-day-rain big-icon hide"></i>
        <!-- cloudy-->
       <i class="wi wi-day-cloudy big-icon hide"></i>
       <!-- wind-->
       <i class="wi wi-day-windy big-icon hide"></i>
       <!-- partly-cloudy-day, or partly-cloudy-night-->
       <i class="wi wi-night-partly-cloudy big-icon hide"></i>
        <!-- snow -->
       <i class="wi wi-night-clear big-icon hide"></i>
       </div>
   </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/yuanyu/a-pen-by-yuanyu-qqEVBM */
#temp {
  color: red;
  font-size: 40px;
   display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
#timezone {
  color: green;
  font-family:"Times New Roman", Times, serif;
  font-size: 40px;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  margin-bottom: 10px;
}
#summary{
  font-family:"Times New Roman", Times, serif;
  font-size: 30px;
}
.vertical-container{
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

body {
  background:#000000;
  
}
.run {
  border-radius:5px;
  color: white;
  opacity:0.9;
}
.medium-icon {
  font-size:30px;
}
.big-icon {
  font-size:60px;
  margin-top:20px;
  color:orange;
}
.small-icon {
  font-size:20px;
}
.hide {
  display: none;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}

/*Downloaded from https://www.codeseek.co/yuanyu/a-pen-by-yuanyu-qqEVBM */
var weather_url= 'https://api.darksky.net/forecast/0a5625d345749534d269b779e31d0939/';

var req_url;
var isC = false;
var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};
var result_icon;
var result_icon_1;
var degree = '\u00B0';
function success(pos) {
  var crd = pos.coords;
  
  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);
  console.log('Longitude: ' + crd.longitude);
  console.log('More or less ' + crd.accuracy + ' meters.');
   req_url=weather_url+crd.latitude+','+crd.longitude;
   $.blockUI({ message: '<button class="btn btn-lg btn-warning" style="width:100%;hight100%"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</button>'}); 
   clickBtn();
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

function alertResult(res){
  alert('Latitude : ' + res.latitude);
  alter('Longitude: ' + res.longitude);
}
function clickBtn(){
  console.log(req_url);
	$.ajax({
        url: req_url,
        type: 'GET',
        dataType: "jsonp",
        async: false,
        success: function(data){
           //console.log(data.currently);
           console.log("current-icon :",data.currently.icon);
           console.log(data.currently.temperature);
           console.log(data.timezone);
           console.log(data.daily.summary);
           console.log("daily-icon: ",data.daily.icon);
           console.log("hourly-icon: ", data.hourly.data[data.hourly.data.length-1].icon);
           result_icon= data.currently.icon;
           result_icon_1 = data.hourly.data[data.hourly.data.length-1].icon;
           $("#timezone").text(data.timezone);
           $("#temp").text(data.currently.temperature+degree+'F');
           $("#summary").text(data.daily.summary);
           
           doChangeIcon(result_icon,"medium-icon");
           //$(".big-icon").removeClass('hide');
           doChangeIcon(result_icon_1,"big-icon");
           $.unblockUI();
        },
        error: function(xhr, ajaxOptions, thrownError){
          console.log(xhr.status);
          console.log(thrownError);
          $.unblockUI();
        }
      });
}
function doChangeIcon(result, className){
  console.log(className);
  $("."+className).removeClass('hide');
  console.log(result=="clear-night");
  switch(result){
    case "clear-day":
    case "clear-night":
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      
      break;
    case "snow":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
    case "sleet":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
    case "fog":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
    case "rain":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
    case "cloudy":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
    case "wind":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-night-partly-cloudy."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
    case "partly-cloudy-day":
    case "partly-cloudy-night":
      $(".wi-day-clear."+className).addClass("hide");
      $(".wi-day-rain."+className).addClass("hide");
      $(".wi-day-snow."+className).addClass("hide");
      $(".wi-day-sleet."+className).addClass("hide");
      $(".wi-day-fog."+className).addClass("hide");
      $(".wi-day-windy."+className).addClass("hide");
      $(".wi-day-cloudy."+className).addClass("hide");
      $(".wi-night-clear."+className).addClass("hide");
      break;
  }
  
}

function changeManager(menterToChange){
  //from F to C
  // C = ((F - 32)/180)*100
  if(isC==false){
    isC = true;
    return Math.round((((menterToChange-32)*100)/180)*100)/100;
  }
  else{
    // F = C*180/100 + 32
    isC = false;
    return Math.round((((menterToChange*180)/100) +32)*100)/100;
  }
  
 
}
function changeMeters(){
    var current = $("#temp").text();
    console.log(current.indexOf(degree));
    var result = Number($("#temp").text().slice(0,current.indexOf(degree)));
    console.log(result);
    var changeOne = changeManager(result)+ degree+((isC==true)?"C":"F");
    $("#temp").text(changeOne);
}

window.onload = navigator.geolocation.getCurrentPosition(success, error, options);


$(document).ready(function(){
  $("#temp").on('click',function(){
    console.log($("#temp").text());
    changeMeters();
  });
});

Comments