Monday, May 25, 2020

jQuery Weather.js Plugin



Hello guys! Welcome to a new section of my tutorials on jQuery. In this tutorial post, i will be discussing about the jQuery Weather.js plugin.

jQuery Weather.js is a jQuery plugin that is used for finding information about weather details.

Example

Below is a simple Weather.js example -

<!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>

RECOMMENDED POST: jQuery Megadropdown Plugin

Alright guys! This is where we are wrapping it up with this tutorial. In my next tutorial post, i will be starting my tutorials on Wordpress. Feel free to ask your questions where necessary and i will attend to them as soon as possible.

If you found this tutorial helpful and interesting, kindly use the share button to share this tutorial. Follow us on our various social media platforms available to stay updated with our latest posts. Also subscribe to our newsletter to get all our tutorials delivered directly to your emails.

Thanks for reading and bye for now.
Share:

0 comments:

Post a Comment