Creating A Nice Weather App with jQuery and Canvas
File Size: | 61.2 KB |
---|---|
Views Total: | 7883 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A jQuery & canvas based weather web app that displays current weather information based on Geolocation web API by using the OpenWeatherMap API.
How to use it:
1. Load the required stylesheet files in the document's head section.
<link rel="stylesheet" href="font-awesome.min.css"> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="weather.css">
2. Create canvas based weather backgrounds.
<canvas id="rain-canvas"> </canvas> <canvas id="cloud-canvas"> </canvas> <canvas id="weather-canvas"> </canvas> <canvas id="time-canvas"> </canvas> <canvas id="lightning-canvas"> </canvas>
3. Add the required CSS ID & class to your body tag.
<body id="weather-background" class="default-weather">
4. The main markup structure.
<div class="page-wrap"> <header class="search-bar"> <p class="search-text"><span class="search-location-text">What's the weather like in <input id="search-location-input" class="search-location-input" type="text" placeholder="City"> ?</span></p> <div class="search-location-button-group"> <button id="search-location-button" class="fa fa-search search-location-button search-button"></button> <button id="geo-button" class="geo-button fa fa-location-arrow search-button"></button> </div> </header> <div id="geo-error-message" class="geo-error-message hide"> <button id='close-error' class='fa fa-times close-error'></button> Uh oh! It looks like we can't find your location. Please type your city into the search box above! </div> <div id="weather" class="weather middle hide"> <div class="location" id="location"></div> <div class="weather-container"> <div id="temperature-info" class="temperature-info"> <div class="temperature" id="temperature"></div> <div class="weather-description" id="weather-description"></div> </div> <div class="weather-box"> <ul class="weather-info" id="weather-info"> <li class="weather-item humidity">Humidity: <span id="humidity"></span>%</li> <!-- --> <li class="weather-item wind">Wind: <span id="wind-direction"></span> <span id="wind"></span> <span id="speed-unit"></span></li> </ul> </div> <div class="temp-change"> <button id="celsius" class="temp-change-button celsius">°C</button> <button id="fahrenheit" class="temp-change-button fahrenheit">°F</button> </div> </div> </div> </div>
5. Load jQuery library and the weather.js script at the bottom of the web page.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="weather.js"></script>
This awesome jQuery plugin is developed by hrtovey. For more Advanced Usages, please check the demo page or visit the official website.