A great solution for displaying weather by using jQuery, Yahoo Weather Services and Yahoo Geolocation.
Sometimes, when you are creating a website for a client, you might be asked to create a simple weather app. If you are not familiar with creating such piece of code, it might be useful to have a handy snippet aside and use when required.
This code snippet app is created by using jQuery, Yahoo Weather Services and Yahoo Geolocation. The interface is simple and modern, and it can be easily adjusted to fit the needs and color palette of a particular project.
The weather app displays the temperature in both Celsius and Fahrenheit, the change occurs when a top right corner indicator is clicked. User can easily change the city by clicking on the existing city shown, filling in the desired one and clicking enter.
How to use:
Make sure that you include the latest jQuery library and the weather.js and weather.css so everything is good to go.
HTML
<html lang="en"> <head> <meta charset="UTF-8"> <title>Weather App</title> <link href='http://fonts.googleapis.com/css?family=Open+Sans:600,400' rel='stylesheet' type='text/css'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <link rel="stylesheet" href="weather.css"> </head> <body> <div class="wrapper shadow"> <div class="top"> <div class="btn noselect" id="btn">F</div> <img id="big" src="" alt=""> <p id="deg" class="text deg"></p> <input class="text" type="text" id="city" value=""> </div> <div class="bot"> <ul> <li> <h1 id="forecast0"></h1> <img id="forecastimg0" src=""></img> <p id="forecastdeg0"></p> </li> <li> <h1 id="forecast1"></h1> <img id="forecastimg1" src=""></img> <p id="forecastdeg1"></p> </li> <li> <h1 id="forecast2"></h1> <img id="forecastimg2" src=""></img> <p id="forecastdeg2"></p> </li> <li> <h1 id="forecast3"></h1> <img id="forecastimg3" src=""></img> <p id="forecastdeg3"></p> </li> </ul> </div> </div> <script type="text/javascript" src="weather.js"></script> </body> </html>
The current code uses SVG icons added from the author but you can use other SVG weather icons (see the resources at the end of this post).
Have a look at the code snippet app below. Check out what the weather is going to be in your current city. You can download the code below.
See the Pen Weather App by Enzo (@Enzo_Eghermanne) on CodePen.
Download Weather AppSVG weather icons resources:
– Meteoicons
– Flaticon weather icons
– Forecast Font
Created by Enzo Eghermanne.