A Pen by mate

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  mate</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

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

  
</head>

<body>

      <div class="contain">
<span class="center-block half-circle">
 <span id="arrow-1" class="center-block arrow">
</span>
 <span class="center-block zakrycie"> 
</span>

</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/sirmmate/a-pen-by-mate-OXWrzY */
@keyframes rotacja-plus {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(-180deg);
  }
}

.rotation-plus {
   animation: rotacja-plus 2s;
}

@keyframes rotacja-minus {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.rotation-minus {
   animation: rotacja-minus 2s;
}

.arrow {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 165px solid black;
  transform:rotate(-90deg);
  transform-origin: bottom;
  position:relative;
  top:60px;
  left:45%;
}
.main-bg {
  background-image: url("img/main-bg.png");
  
  height: 825px;
}
.half-circle {
	background-image: url('img/circle-3.png');
	background-size: 95% 85%;
  	background-repeat: no-repeat;
  	background-position: center center;
    transform:rotate(90deg);
    background-color:#FFF;
    height:450px;
    width: 225px;
    -moz-border-radius: 150px 0 0 150px;
    border-radius: 225px 0 0 225px;
}


.zakrycie {
	position:relative;
	top:18px;
  	left:40%;
    transform:rotate(0deg);
    background-color:#000;
    height:80px;
    width: 40px;
    -moz-border-radius: 150px 0 0 150px;
    border-radius: 40px 0 0 40px;
}



/*Downloaded from https://www.codeseek.co/sirmmate/a-pen-by-mate-OXWrzY */
 function gettingJSON(){
     if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
  var lat = position.coords.latitude;    
  var longi = position.coords.longitude;
    
  
        $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat +"&lon=" + longi + "&APPID=530d436963c54f1dd552091572f29c30",function(json){
          var temperature = Math.floor((json.main.temp-273.15));
          
          var ctemperature = ((temperature+32)*1.8).toFixed(0);
          function checkTemp () {
			console.log(temperature);
			if(temperature!=35){
				$('#arrow-1').toggleClass('rotation-plus');
			}
			else {
				$('#arrow-1').toggleClass('rotation-minus');
			}
		}
		checkTemp();
        })
        

  });
        }};




$(document).ready(function(){



$('#arrow-1').on('click', function() {
	gettingJSON();
	
 
});

});

Comments