jQuery Plugins › jQuery Other Plugins › Blank Canvas Weather

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
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE10+, FireFox, Opera, Safari#weather
Creating A Nice Weather App with jQuery and Canvas

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">&deg;C</button>
      <button id="fahrenheit" class="temp-change-button fahrenheit">&deg;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.