Lia Duguran

Weather Forecast

- back -

screenshot of Weather forecast website project

About

Angular | TypeScript | HTML | CSS | Yahoo Weather API

Weather website which features four Canadian cities, Vancouver, Kenora, Saskatoon, and Calgary. Users can search different cities around the world as well. Features of the site include a 10-day forecast of the chosen city and a function which allows the user to change the temperature from Celsius to Fahrenheit, for the American folks. This project was created using the Angular framework and the Yahoo Weather API.

scroll

scroll down arrow

Design

Weather Forecast project shown on multiple devices. Desktop, laptopn tablet and phone. Weather Forecast project shown on a phone. Home, 10 day forecast and search results page.

Color Scheme

#5879B6

#808080

#FFFFFF

#000000

Process

My goal for the website was to keep a simple layout. However, the icons that the Yahoo Weather API provided did not fit my ideal style. Therefore, I replaced them with new ones.

Weather Forecast project. Showing original icons used
original icons from Yahoo Weather API, temperature shown in Celsius
Weather Forecast project. Showing new icons used
new icons from Iconfinder and Flaticon, temperature shown in Fahrenheit

If the database can't find the city, an error message will appear.

Weather Forecast project error message. Cannot find the city the user was searching for.
error message when the city cannot be found
Weather Forecast project successful search results, Seattle.
successful search results

Note: This project depends on the state of the Yahoo Weather API. If the database is down, the content of the website may not exist.

Created for educational purposes

- back -

- more projects -

Merry Me

Milk Studios

Weather Forecast

Movie Database

Japan

Portfolio