# Project 001 - Web App UI

## Team:
(Susan) Shiyi Xiao

## Problem:
Sometimes people go through a troublesome process when looking for the location and time of a city/region on a map.

## Solution:
A web application that displays the location and time of a city (that is inputted by the user).

## Specification:

### Components:

All components below should be in three different divs.

#### The input form & search button
This is where users input the name of the city and hit the search button to submit their choice. Hovering over the search button should change the background color.

#### Map
A world map is displayed on the left side of the interface. The map should be clean at first and only pins a city when information of the city is provided.

#### Clock
A clean clock is displayed right next to the map.

### Step-by-step:
1. The user first type in the name of the city that they want to search and then hit the search button.
2. The information is sent to the server and the information about the latitude, longitude and the time zone of the city is sent back.
3. The computer updates the time displayed and pin the city on the map accordingly.

## Codepen URL
https://codepen.io/sx2278/pen/WNxbEPo