Client from San Francisco needs a simple and nice web application to show weather data for a given city in California.
The current implementation is a simple AngularJS structure wired to the page and a backend which proxies an API. Data should be loaded from "wunderground" once user enters a city in an input field. Documentation for the API can be found here.
- An input box and a button should be present where city can be entered.
- Upon clicking on the button, AJAX call should be initiated to the "wunderground" API to receive weather details.
- Details from the endpoint should be showed in three blocks (300px width each): the first one should have data about the location (check "display location" in the endpoint), the second one should have data about the place where the weather has been observed (check "observation location") and the third one should have the following parameters from the endpoint: "temp c", "relative humidity" and "wind kph".
- The three blocks should be equal size and showed in one line for a standard desktop and in three separate lines for mobile devices (blocks should be responsive).
- There are no specific prerequisites for design, though the outlook should be aesthetic.
- HTML5 and CSS3 must be used, the minimum supported browser is IE10.
- Usage of Bootstrap or any other CSS framework must not be used.
Together with this application, a simple NodeJS application is created to proxy the "wunderground" API.
In order to start it up, please do the following:
-
If you do not have it, please download the latest NodeJS version
-
Then you should go to app/backend directory of this repository and type 'npm install'
-
Once finished, you may start the application by typing this in terminal/cmd: 'node endpoint-proxy.js http://api.wunderground.com/api/ENTER_YOUR_KEY/conditions/q/CA/'
-
Upon sending requests, such as 'http://localhost:9000/San_Francisco.json', the data from 'http://api.wunderground.com/api/ENTER_YOUR_KEY/conditions/q/CA/San_Francisco.json' is returned.
Please note, that you may also disable Chrome security settings or use your own proxy to avoid cross-domain AJAX blocking, then the given backend is not necessary.
The implementation you create should not be made publicly available or otherwise shared/distributed to any outside parties.