---
# System prepended metadata

title: 'Final Project: Weather Application'

---

# Final Project: Weather Application

### Team
Susan Shiyi Xiao

### Problem
Whenever I am travelling or planning for a new trip, I hope to quickly check the weather of a city.

### Solution
A weather web application that takes in a city and shows a weather card that has the detailed information about the weather of the city.

### Design
#### Interface
There are two elements on the web application: the input field, and the weather box.

For the input field, the user can input any city and hit Check Weather button. Since the weather api only takes in the city in lowercase format, the application converts user input to all lowercase letters. Then with the json file that is sent back from the open weather api, three variables are picked out and saved. 
- The first one is the **name** that has the full name of the city. 
- The second one is the **weather information** that includes the temperature, max and min temperature, humidity, etc.
- The third one is the **icon number** that can be traced to the website to obtain the icon.

#### Open weather api
https://openweathermap.org/

### CodePen link
https://codepen.io/sx2278/pen/RwGPzje

