Weather

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

Weather App Designed for FCC

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Weather</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container-fluid text-center weather">
  <div class="weatherWidget">
<h1><a id="city"><a id="coun"></a></h1>
<div class="weatherData">
  <h></br> <a id="temp"></a></h>
  <div id="icon">  </div>
<h><a id="cond"></a> </h>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/3/weather-XMNKPx */
body{
  background-color:#c7e0df;
  color:#266060;
}
h{
  font-size:30px;
}
.weatherWidget{
  border-radius:363px;
  position:relative;
  margin:8% auto auto auto;
  width:450px;
  padding:40px 50px;
  display:table;
  background-color:#e0c872;
}

/*Downloaded from https://www.codeseek.co/3/weather-XMNKPx */
var lat,lon;
var units = "metric";

function getTempData() {
 $.ajax({
   dataType: "jsonp",
   url: "http://api.openweathermap.org/data/2.5/weather?APPID=e390e6ee1e9aa6b39df048c39a3bdc2b&type=like&lat=" + lat + "&lon=" + lon + "&units=" + units,
  success: function onsuccess(item){
$("#temp").html(item.main.temp  +"&degC");      
$("#city").html(item.name +"," + item.sys.country);
$('#icon').html("<img src='http://openweathermap.org/img/w/" + item.weather[0].icon + ".png'>");
$("#cond").html(item.weather[0].main);
  }
});
}
function getLocation(){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude; 
lon = position.coords.longitude;
getTempData();
});
   }
}
getLocation();

Comments