Weather App

Challenge

The Weather App. The obligatory "learning to code" project.

While learning JavaScript, I decided to design and develop a simple Weather App with the following requirements:

  1. Visitors can see the weather in their current location.
  2. Visitors can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
  3. Visitors can push a button to toggle between Fahrenheit and Celsius.
 Screenshots of the Weather App across various devices: mobile phone, tablet, laptop, and desktop monitor.

Finding a Solution

This was the first web app I ever created, so I wanted to take the opportunity to go a bit above and beyond the basic weather app requirements. As part of my personal learning journey, I opted to practice jQuery and learn HTML5 Canvas.

Learning HTML5 Canvas allowed me to add a lot of personality to the weather app in the form of animated backgrounds that match different weather conditions.

I made this weather app using the OpenWeatherMap API and jQuery. Animations were created using HTML5 Canvas and icons were found on the Noun Project.

Features

  • Animated weather backgrounds for 14 different weather conditions. The background changes to show rain, snow, fog, drizzle, sunny weather, hazardous conditions, and more.

  • Night and Day background.  The background also changes based on whether or not it's night or day in the weather location.

  • Visitors can search for a location. You can choose to view weather anywhere in the world. Just type in a city to get started.

  • Automatically finds your location (if you give it permission). You don't need to type in a city if you don't want to. The app will also automatically find your location in the future once you give it permission to do so.

  • Change between Celsius and Fahrenheit. You don't have to stick with just one option!

Heather Tovey