Crafting UI elements using components and interfaces

You will be leveraging Angular components, interfaces, and services to build the current weather feature in a decoupled, cohesive, and encapsulated manner.

The landing page of an Angular app, by default, resides in app.component.html. So, start by editing the template of AppComponent with rudimentary HTML, laying out the initial landing experience for the application.

We are now beginning the development of Feature 1: Display Current Location weather information for the current day, so, you can move the card in Waffle to the In Progress column.

We will add a header as an h1 tag, followed by the tagline of our app as a p and placeholders for where we may want to display the current weather, as demonstrated as shown in the following code block:

src/app/app.component.html
<p style="text-align:center">
  <h1>
  LocalCast Weather
  </h1>
  <p>Your city, your forecast, right now!</p>
  <h2>Current Weather</h2>
  <p>current weather</p>
</p>

At this point, you should run npm start and navigate to http://localhost:5000 on your browser so that you can observe the changes you're making in real time.