Simple Weather App with jQuery

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.

weatherapp-js

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).

Related post:  PARALLAX.JS - Simple, lightweight Parallax Engine

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 App

SVG weather icons resources:

Meteoicons
Flaticon weather icons
Forecast Font


Created by Enzo Eghermanne.

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close