Weather app

Introduction

LMy second project under the developer programme at justIT was to build a weather app. The weather app would get the users current location and use the open weather API, check the locations weather conditions. The user could also search different locations around the world to check current and next fours days weather. Each weather condition would give the card a different theme and icon set.

Technologies

HTML5 CSS3 JavaScript jquery JSON API

Design Features

The design of this project was a card layout using a different set of pastel colors in relation to the weather condition. There are 9 different weather condition and the idea of the different set of colors was for the user to recognise the weather based on perception before reading. There is also a loading animation that takes place as if the internet quality is poor, some styles aren’t loaded onto the page, due to the dynamic nature. However, the loader runs as the page is loading. The project was done using a mobile-first approach and if the user uses a touch keyboard, the keyboard would not push the design up.

Development Features

The web app uses IP API to get latitude and longitude coordinates, which are then plugged into the open weather API to get weather conditions. The information gathered are current and next 4-day weather conditions. Also using the time and weather ID, night or day weather icons are changed. The user can also type in location, which is then queried using open weather API and updates the page