This code snippet app is created by using jQuery, openweathermap.org Services. The interface is simple, and it can be easily adjusted to fit the needs and color palette of a particular project.
The weather code displays the temperature in both Celsius and Fahrenheit, User can easily change the city by passing parameter in weather function.
This code is good for learning purpose, using this user can easily make custom reusable jquery plugin and add extra feature and information.
Weather detail block could be open in Popup on click of smaller weather ticker.
How to use:
Make sure that you include the latest jQuery library in HTML and given CSS and script.
Code – http://codepen.io/sandeep821/pen/RRPrpx
GitHub – https://github.com/Sandeep821/Simple-JQuery-Weather-Widget
——————————————————–Click here for more————————————————-
HTML
<html>
<head>
<script data-require=”jquery@*” data-semver=”2.2.0″ src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js”></script>
<link rel=”stylesheet” href=”style.css” />
<script src=”script.js”></script>
</head>
<body>
<div class=”box”>
<h2>JQuery Weather Plugin using regular html Template</h2>
<h4>Getting data from openweather map and build plugin using Jquery, Bootstrap</h4>
</div>
<br>
<!–Small weather ticker –>
<div id=”weather1″ class=”weather1″></div>
<!–Detail weather block –>
<div id=”weather-detail1″ class=”weather-detail1″></div>
</body>
</html>
STYLE
body { padding:20px; }
.box { background-color:#dadada; padding:20px; margin:20px; }
.weather1 {
margin:20px;
padding:20px;
background-color:#6699ff;
border:1px solid #3377ff;
width:400px; font-family:verdana;
text-align:center;
font-size:18px;
color:#fff;
}
.weather-detail1 {
margin:20px;
padding:20px;
background-color:#ccdcff;
border:1px solid #99bbff;
width:400px; font-family:verdana;
text-align:center;
font-size:18px;
color:#1a66ff;
}
.weather::before {
content: “\f017 -“;
font-size:22px;
font-family:’weathericons’;
}
SCRIPT:
$(document).ready(function(){
function weather (zip) {
/* -setting-up openweathermap url- */
var zip = zip;
var apikey = “6f0cecd92e38d7e59f5b0aa9b0212f74”;
var url1 = “http://api.openweathermap.org/data/2.5/weather”;
var url = url1 + “?” + “zip=”+zip + “&” + “appid=” + apikey;
/* – getting the data fron openweathermap API- */
$.getJSON(url, function(result){
var city = result.name,
dt = result.dt,
id = result.id,
temp = result.main.temp,
icon = result.main.temp,
humidity = result.main.humidity,
temp_min = result.main.temp_min,
temp_max = result.main.temp_max,
wind = result.wind.speed,
country = result.sys.country,
sunrise = result.sys.sunrise,
sunset = result.sys.sunset
/* -small ticker- */
$(“#weather1″).append( city + ” – ” + temp + ” F”);
/* -detail infor regular html template- */
$(“#weather-detail1”).append(
“<h3>” + city + ” | ” +country + “</h3>” +
“<br>” + “Temperature :” + temp + ” F” + “<br>” +
“Humidity :” + humidity + “<br>” +
“Min Temperature :” + temp_min +
“<br>” + “Max Temperature :” +
temp_max +”<br>” +
“Wind :” + wind
);
});
}
weather(60195);
});