LAB 2 Weather Application - sindhusha-t/ASE-Lab-Assignments GitHub Wiki

Weather Application using Angular 7 Framework

1) The page should have two text fields that takes state code for example: MO and city name: Kansas City.

a) Displaying Page Header: Created weather forecast child component to display header with a logo and header text("WEATHER API") with main app component as parent .

b) Displaying the Form in the page: Created location search child component and added one drop down list and text field along with a submit button pointing from parent component weather forecast (header)

c) Adding Validations: If any one of the text field is empty, It displays a warning text below the text field.

d) Parsing JSON data: Getting JSON data using HTTP client. Checking for errors and displaying appropriate warnings.

2) Pass those values and display weather details of the city like temperature, wind, pressure, humidity etc.

a) Displaying Current Weather Details: Created display weather component to view the current details. Used property binding to pass data from parent component to the child component. Setting the default values to Kansas City, MO. Displaying parameters like Temperature, wind, pressure, humidity, icon using bootstrap framework.

3) Also display the hourly forecast (any 2-3 details from the API) for 5 hours in the city entered.

a) Displaying Hourly Weather Details: Created hourly display component to view hourly weather forecast details for next 5 hours binding it with the parent component location search. Used property binding to pass data from parent component to child. Displayed the contents using bootstrap framework. Displayed parameters like Date-Time, icon, Temperature and weather description.