Tuesday, February 28, 2017

jQuery - Weather.js

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">
      <link rel = "stylesheet" 
         href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
      <link href = 'https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
         rel = 'stylesheet' type = 'text/css'>
      <link rel = "stylesheet" type = "text/css" href = "weather.css">
   </head>
 
   <body id = "weather-background" class = "default-weather">
      <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>
  
      <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 = "front-page-description" 
      class = "front-page-description middle">
            <h1>Blank Canvas Weather</h1>
         </div>
   
         <div class = "attribution-links hide" 
   
            id = "attribution-links">
            <button id = 'close-attribution' 
               class = 'fa fa-times close-attribution'></button>
     
            <h3>Icons from <a href = "https://thenounproject.com/">
               Noun Project</a></h3>
     
            <ul>
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/cloud/6852/">
                  Cloud</a> by Pieter J. Smits</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/snow/64/">
                  Snow</a> from National Park Service Collection</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/drop/11449/">
                  Drop</a> Alex Fuller</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/smoke/27750/">
                  Smoke</a> by Gerardo Martín Martínez</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/moon/13554/">
                  Moon</a> by Jory Raphael</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/warning/18974/">
                  Warning</a> by Icomatic</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/sun/13545/">
                  Sun</a> by Jory Raphael</li>
      
               <li class = "icon-attribution">
                  <a href = "https://thenounproject.com/term/windsock/135621/">
                  Windsock</a> by Golden Roof</li>
      
            </ul>  
         </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>
   
         <script 
            src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
            </script>
         <script src = "weather.js"></script>
   
      </div> 
  
   </body>

</html>
This should produce following result −
Click here
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)