Weather App

In this example below you will see how to do a Weather App with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mykatz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mykatz ©
  • HTML
  • CSS
  • JavaScript
    
<div class="container"> 
  <div class="row pt-5"> 
    <div class="col-md-3"></div>
    <div class="col-md-6 mainbox"> 
      <h1 class="text-center" id="title"> The Weather </h1>
      <div id="lat" class="text-center"> lat </div>
      <div id="long" class="text-center"> long </div>
      
      <h2 id="temperature" class="text-center mt-2"> °</h2>
      
      <div class="text-center">   <button class="btn text-center" id="rbutton"> F/C </button> </div>
    
    
    </div>
  
  
  </div>



</div>
<!-- Video background code -->
<video autoplay loop id="video-background" muted plays-inline>
  
  
</video>

/*Downloaded from https://www.codeseek.co/mykatz/weather-app-RgKMNx */
    body {
  background-color: black;
  background-size: cover;
}
.mainbox {
  background-color: rgba(207, 241, 247, 0.6);
  border-radius: 10px;
  height: 15em;
}

#video-background {
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}




/*Downloaded from https://www.codeseek.co/mykatz/weather-app-RgKMNx */
    window.currentTemp = 0;
window.fahrenheight = true;

$(document).ready(function() {
  
 

navigator.geolocation.getCurrentPosition(function(position) {
  
  $("#lat").html(position.coords.latitude);
  $("#long").html(position.coords.longitude);
  

  currentTemp;

  
  $.getJSON("https://crossorigin.me/https://api.darksky.net/forecast/fd3688b88647a7c801b14ce0c1788ba6/"+position.coords.latitude+","+position.coords.longitude,function(jason, array) {
    
  currentTemp = jason["currently"]["temperature"];  

  var weathers = ["clear-day","clear-night","rain","snow","sleet","wind","fog","cloudy","partly-cloudy-day","partly-cloudy-night"];
  var urls = ["https://my.mixtape.moe/nrwybs.mp4","https://my.mixtape.moe/uiaabw.mp4","https://my.mixtape.moe/jjfyjp.mp4","https://my.mixtape.moe/dsvjlc.mp4","https://my.mixtape.moe/hsuslq.mp4","https://my.mixtape.moe/kyrirz.mp4","https://my.mixtape.moe/hyvjrk.mp4","https://my.mixtape.moe/bzhudd.mp4","https://my.mixtape.moe/djnbec.mp4","https://my.mixtape.moe/fhfovx.mp4"];
    
  var vidurl = urls[weathers.indexOf(jason["currently"]["icon"])]
  
  $("#video-background").html('<source id="vsource" src="'+vidurl+'" type="video/mp4">')
  currentTemp = jason["currently"]["temperature"];
  $("#temperature").html(Math.round(currentTemp)+"°F");



    


  
  

     
    
    
  });

 
  
  

});  

  
    
function convertWeather(){
  if(fahrenheight == true) {
  var temp = (currentTemp - 32) * 0.555;
  
  $("#temperature").html(Math.round(temp)+"°C");
  fahrenheight = false;
  }
  else{
   var temp = currentTemp;
   $("#temperature").html(Math.round(temp)+"°F");
  fahrenheight = true;
  }
};
  
$("#rbutton").on("click", function(){
  convertWeather();
});
  
});

Comments