Educational

Weather.js

Written by

Saim Khalid

in

Weather.js is a jQuery plugin to find the information about weather details.

A Simple of Weather.js example as shown below −

<!DOCTYPE html><html lang ="en"><head><meta charset ="UTF-8"><meta name ="viewport" content = "width = device-width, 

     initial-scale =1"&gt;&lt;link rel ="stylesheet" 
     href ="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;&lt;link rel ="stylesheet" 
     href ="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"&gt;&lt;link href ='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
     rel ='stylesheet' type ='text/css'&gt;&lt;link rel ="stylesheet" type ="text/css" href ="weather.css"&gt;&lt;/head&gt;&lt;body id ="weather-background"class="default-weather"&gt;&lt;canvas id ="rain-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="cloud-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="weather-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="time-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="lightning-canvas"&gt;&lt;/canvas&gt;&lt;div class="page-wrap"&gt;&lt;header class="search-bar"&gt;&lt;p class="search-text"&gt;&lt;span class="search-location-text"&gt;
              What's the weather like in&lt;input id ="search-location-input"class="search-location-input" type ="text"
                 placeholder ="City"&gt;?&lt;/span&gt;&lt;/p&gt;&lt;div class="search-location-button-group"&gt;&lt;button id ="search-location-button"class="fa fa-search search-location-button search-button"&gt;&lt;/button&gt;&lt;!----&gt;&lt;button id ="geo-button"class= "geo-button fa
              fa-location-arrow search-button"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div id ="geo-error-message"class="geo-error-message hide"&gt;&lt;button id ='close-error'class= 'fa fa-times 
           close-error'&gt;&lt;/button&gt;Uh oh! It looks like we can't 
           find your location. Please type your city into the search 
           box above!&lt;/div&gt;&lt;div id ="front-page-description"class="front-page-description middle"&gt;&lt;h1&gt;Blank Canvas Weather&lt;/h1&gt;&lt;/div&gt;&lt;div class="attribution-links hide" id ="attribution-links"&gt;&lt;button id ='close-attribution'class='fa fa-times close-attribution'&gt;&lt;/button&gt;&lt;h3&gt;Icons from &lt;a href ="https://thenounproject.com/"&gt;
           Noun Project&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/cloud/6852/"&gt;
              Cloud&lt;/a&gt; by Pieter J. Smits&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/snow/64/"&gt;
              Snow&lt;/a&gt; from National Park Service Collection&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/drop/11449/"&gt;
              Drop&lt;/a&gt; Alex Fuller&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/smoke/27750/"&gt;
              Smoke&lt;/a&gt; by Gerardo Martín Martínez&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/moon/13554/"&gt;
              Moon&lt;/a&gt; by Jory Raphael&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/warning/18974/"&gt;
              Warning&lt;/a&gt; by Icomatic&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/sun/13545/"&gt;
              Sun&lt;/a&gt; by Jory Raphael&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/windsock/135621/"&gt;
              Windsock&lt;/a&gt; by Golden Roof&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div id ="weather"class="weather middle hide"&gt;&lt;div class="location" id ="location"&gt;&lt;/div&gt;&lt;div class="weather-container"&gt;&lt;div id ="temperature-info"class="temperature-info"&gt;&lt;div class="temperature" id ="temperature"&gt;&lt;/div&gt;&lt;div class="weather-description" id ="weather-description"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="weather-box"&gt;&lt;ul class="weather-info" id ="weather-info"&gt;&lt;li class="weather-item humidity"&gt;Humidity:&lt;span id ="humidity"&gt;&lt;/span&gt;%&lt;/li&gt;&lt;!----&gt;&lt;li class="weather-item wind"&gt;Wind:&lt;span 
                       id ="wind-direction"&gt;&lt;/span&gt;&lt;span 
                       id ="wind"&gt;&lt;/span&gt;&lt;span 
                       id ="speed-unit"&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="temp-change"&gt;&lt;button id ="celsius"class="temp-change-button celsius"&gt;°C&lt;/button&gt;&lt;button id ="fahrenheit"class="temp-change-button fahrenheit"&gt;
                    °F&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script 
        src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script src ="weather.js"&gt;&lt;/script&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts