local weather

index.html

<div class="container-fluid text-center" id="base">
  <h1>Local Weather Report</h1> 
  <div id="data"></div>
</div>

local-weather.markdown

local weather

A Pen by Arpit Yadav on CodePen.

License.

script.js

var latitude,longitude;
 

 if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
 latitude=position.coords.latitude;
longitude=position.coords.longitude;
 var xhttp = new XMLHttpRequest();
  var htm="",s='C',T;
  function temp(t)
{ 
  if(s=='C'){ t=Math.round(((9/5)*t)+32);
             s='F';T=3;
           return t;}
  if(s=='F'){ t=Math.round((5/9)*(t-32));
             s='C';T=3;
             return t;
    }
}
  
  
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
      var obj=JSON.parse(this.responseText);
          T=obj.main["temp"];
          htm+="<div id='report'><h2><span class='fa fa-map-marker'> "+obj.name+", "+obj.sys["country"]+"</span></h2>";
         htm+="<h3>Weather: "+obj.weather[0]["main"]+"<img src='"+obj.weather[0]["icon"]+"'></h3><br><h3><span class='fa fa-thermometer-3'> Temprature:</span> "+"<button onclick='alert('temprature in farhenheit is'+temp(T))'>click</button><div id='d'></div>"+T+" "+s+" ,Humidity: "+obj.main["humidity"]+"</h3><br><h3>Wind-speed: "+obj.wind["speed"]+"</h3></div>" ;
  
          
document.getElementById("data").innerHTML =htm;
         
          } 
    };
    xhttp.open("GET", " https://fcc-weather-api.glitch.me/api/current?lat="+latitude+"&lon="+longitude, true);
    xhttp.send(); 
});
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/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/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

style.scss

@import
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");  
h1{
  font-size:80px;
  font-family: lobster;
  color: black;
  
}
h2{
  font-size:60px;
  color:black;
  font-family: Times new roman;
}
h3{ 
  font-size:40px;
  color:black;
  font-family: Times new roman;
}

#base {
  background-color: grey;
}
#data{
  margin-top: 100px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />