This project was generated with Angular CLI version 7.3.4.
-
The app consists of a grid of 9 panels. Every panel shows the weather data of one city. Initially, all panels are empty.
-
On clicking on an empty panel, a text box is shown on the panel itself, asking the user to enter the city name. On entering the name, the panel now shows weather data for that city.
-
Every panel have an “Edit” button - on clicking this, the user will be able to change the city shown in that panel.
-
If there was an error in getting the data (eg. wrong city name), the panel itself shows the error and the user can re-enter the city name.
-
Every panel has a background picture that describes the weather at the city
eg. sunny/rainy/cloudy.
-
On refreshing the page data will not be gone because I have used localStorage feature in it.
-
The panels should be in a grid and responsive - the panels should align themselves in a row with respect to the screen size: for small screens - less number of panels in a row and for large screens - more number of panels in a row. To see the live application click here.
Enabled offline use - on refreshing the page, after switching off internet, the page shows the last obtained weather data (Until we clear the cache).
I have used OpenWeatherMap API for api data, Bootstrap UI Framework , Angular 7 framework , I have deployed the application on github pages.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.