Creating A Weather Forecast Web App With jQuery searchWeather Plugin -

searchWeather is a jQuery plugin for creating a weather forecast web app that allows to search and display the weather conditions of multiple cities/countries in the world, based on Ajax technology, Bootstrap 3 and OpenWeatherMap API. The plugin currently supports of zipcode, name of city or country to search.

How to use it:

1. Include the required javascript files at the bottom of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="js/handlebars.js"></script> 
<script src="js/custom.js"></script>

2. Include the Twitter Bootstrap 3's CSS in the head section of the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

3. Create a text filed to accept the input of zipcode, name of city or country.

<form>
<div class="row">
<div class="col-8 col-sm-10 col-lg-10">
<input autofocus type="search" id="searchCity" class="form-control input-large"
                           placeholder="Enter a zipcode, name of city or country">
</div>
<div class="col-4 col-sm-2 col-lg-2">
<input type="submit" id="searchButton" class="btn btn-large" value="Go"/>
</div>
</div>
</form>

4. Create a semantic weather template to output the weather conditions.

<div id="output"></div>
<script id="weather-template" type="text/x-handlebars-template">
<table class="table table-bordered table-hover">
{{#if msg}}
<h3 class="alert alert-info" data-dismiss="alert">{{msg}} <a class="close" href="#">x</a></h3>
{{else}}
<h3>
{{#if city}}
{{city}}, {{country}}
{{else}}
{{country}}
{{/if}}
</h3>
<thead>
<tr>
<th width="15%">
Temperature
</th>
<th width="15%">
Humidity
</th>
<th width="70%">
Description
</th>

</tr>
</thead>
<tbody>
<tr>
<td>
{{temp}}
</td>
<td>
{{humid}}

</td>
<td>
{{weatherdesc}}
</td>

</tr>
</tbody>
{{/if}}
</table>
</script>

5. A little bit more CSS to style the output.

#searchButton {
width: 100%;
}
.starter-template {
padding: 40px 25px;
}
.starter-template table {
margin-top: 15px;
}
.starter-template .alert {
margin-top: 1%;
}

---

This awesome jQuery plugin is developed by fa137. For more Advanced Usages, please check the demo page or visit the official website.