Weather app

html - css - javascript

Description

In this project I recreated the standard android weather app included in MIUI. The goal of this project was to learn more about coding and creating something based on a set design. I took the original design of the app, recreated it in code and added some personal flavour to it.

Process

To start off I took several screenshots of the original app and created a breakdown sketch. By doing this I managed to get a good idea of what the structure of the app was going to look like.

Below are screenshots of the app created in html, css and javascript. some features:

• Realistic cloud effects made with SVG filters.
• Randomized wind-direction pointers
• Sunset/sunrise curve animation based on local time, created with SVG and Lottie.js
• (on 5-day forecast) Randomized temperature pointers done with SVG magic and Javascript
• (on 5-day forecast) Randomized weather icons
• (on 5-day forecast) Days displayed based on current weekday, in order

Software

• Visual Studio Code
• Illustrator
• After Effects

Github and demo

Not supported on desktop.