Angular Weather App

Table of Contents

• Screenshots
• Built With
• How to use
• Thoughts
• Useful Resources

Screenshots

---

---

---

---

---

---

---

Built With

• Angular CLI version 13.3.5.
• Angular
• OpenWeatherMap Api

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
$ git clone https://github.com/jdegand/angular-weather-app.git

# Install dependencies
$ npm install

# Add Api Key in environment.ts

# Run the app
$ npm start

Thoughts

I based this off the devchallenges weather app.

My ngIf's return the correct results but they add many extra empty divs. This creates problems with using a grid wrapper. Putting the 5 day forecast into a grid on mobile is not a good design choice anyway but it is in the devchallenges' design. I tried to add an else block to the conditions but that did not work. It may be inheriting these empty divs from the prior loop of the weather list array. The ngIf implementation does not completely supplant the ng-template implementation and this is disappointing. Apparently, ng-template does not leave empty divs with comments in the html.

          <div *ngIf="item.weather[0].description === 'clear sky'">
            <img src="../assets/Clear.png" alt=""/>
          </div>
          <div *ngIf="item.weather[0].description === 'broken clouds'|| item.weather[0].description === 'scattered clouds' || item.weather[0].description === 'few clouds'">
            <img src="../assets/LightCloud.png" alt=""/>
          </div>
          <div *ngIf="item.weather[0].description === 'overcast clouds'">
            <img src="../assets/HeavyCloud.png" alt=""/>
          </div>
          <div *ngIf="item.weather[0].description === 'light rain'">
            <img src="../assets/LightRain.png" alt="">
          </div>
          <div *ngIf="item.weather[0].description === 'heavy intensity rain' || item.weather[0].description === 'moderate rain' || item.weather[0].description === 'heavy rain'">
            <img src="../assets/HeavyRain.png" alt="">
          </div>

Converting the design from the mobile to desktop was harder since I could not use grid.

I tried to limit my app to one initial network request. The design requires multiple network requests - one for todays weather and another for the 5 day (possibly using a second component to get the five day forecast where you use a loading spinner until the request returns). I didn't use the api required because I have been using the openweathermap api recently so it was quicker and less overhead to use that than learning another api while also being rusty at Angular.

The 5 day forecast endpoint provides too many results. I used a conditional to limit it to the 9:00 am forecast. Depending on the time of day, you may see today included in the 5 day forecast. Another problem with this approach is that the min and max temperatures don't cover the whole day so they are often the same.

I didn't try to convert to Celsius since I made my request in imperial units. If a user toggled between celsius and fahrenheit, you could trigger another request (changing the units parameter) or you could convert the returned values to celsius with a function or even a custom pipe.

I applied a filter to the background clouds by following a CSS Tricks article. You need a pseudo-element to add and filter just the background-image and not the inner contents.

The background image on desktop is hard to place identically to the mobile version. It is really a lot of trial and error to get it right. Ideally, you'd have multiple different cropped backgrounds for mobile, tablet and desktop versions.

I made a suggestions panel with cities. I used buttons to make it keyboard accessible. The devchallenges design has cities from various countries. The openweathermap api is US-centric so I used only US cities.

Openweathermap api has a new endpoint - "one-call". This api endpoint could potentially help fix the min and max problem.

Useful Resources

• Steps to replicate a design with only HTML and CSS
• Reactgo - favicon
• Unicode Table - degree
• CSS Tricks - filter to background image
• YouTube - metaweather api vanilla js
• YouTube - Angular Weather App Tutorial
• Github - used to help model forecast data
• JSON Formatter
• JSON to Typescript
• Stack Overflow - inline styles with variables
• Stack Overflow - progress bar css
• Stack Overflow - nesting with label tags
• Stack Overflow - ngfor nested arrays
• Medium - filtering a nested array
• Stack Overflow - ngIf includes
• Snowfence - wind direction and degrees
• YouTube - ngFor, switch etc
• Stack Overflow - grid on flex children
• Stack Overflow - ngIf empty element when false prevents grid for five day week section
• Stack Overflow - the error thrown if background image path is wrong
• Medium - angular github pages
• Stack Overflow - role='button'
• YouTube - Angular testing hurdles
• Ievgen - angular unit in container
• Stack Overflow - environment files and git