W-AP (Weather-Map) is website that shows you the weather and a map based on address, city name (international), or zipcode (U.S. only).
To design the website, MS Paint, SAI, and Canva were used.
With the 5 day forecast OpenWeatherAPI, the API gave the results in 3 hour intervals, represented by an array of 40 objects, each containing their own high, low, and average temperature.
To parse through the data, we went through each object and kept track of each temp_min and temp_max.
for (let d = 0; d < x.list.length - 8; d += 8) {
day = Object.assign({}, x.list[d]);
tempTotal = 0;
// tslint:disable-next-line: prefer-for-of
for (let h = d; h < 5 + d; h++) {
const element = x.list[h];
tempTotal += Object.assign({}, element.main).temp;
if (day.main.temp_min > element.main.temp_min) {
day.main.temp_min = element.main.temp_min;
}
if (day.main.temp_max < element.main.temp_max) {
day.main.temp_max = element.main.temp_max;
}
}
A user could press the search bar in quick succession and call the API multiple times while the page was still rendering, causing duplicate information to display.
We added a directive with RxJS that listened for click events and used throttleTime to emit only the first click within a given moment in time.
It took two hours to notice but the API key was deactivated and removed. Whoopsieeee.
This project was generated with Angular CLI version 8.3.17.
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 deploy --base-href '/W-AP/' to deploy the project.
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.