The Weather App. The obligatory "learning to code" project.
- Visitors can see the weather in their current location.
- Visitors can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
- Visitors can push a button to toggle between Fahrenheit and Celsius.
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.
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!