Skip to content

Latest commit

 

History

History
107 lines (78 loc) · 2.06 KB

README.md

File metadata and controls

107 lines (78 loc) · 2.06 KB

The Weather

Don't get caught off guard by the weather! Check the forecast for your current location easily using Geolocation. Or, if you prefer, you can manually search for weather updates anywhere else. Forecasts are updated hourly and include details on conditions, precipitation, and wind, all presented in a format that suits you. Additionally, enjoy dynamic background imagery provided by Unsplash, which matches current weather conditions - somewhat reliably.

Design

The Weather boasts a minimalist and clutter-free design complemented by dynamic background images. I particularly enjoyed the custom precipitation icon, which gradually fills based on the percentage during wetter days in the hourly forecast. However, there's room for improvement in the sliders themselves, as they can feel a bit clunky when manipulated on a desktop.

Features

  • Responsive layout & images
  • Bespoke SVG icons
  • Dynamic background images
  • Settings: location services, temperature, wind speed, visibility, precipitation, pressure
  • Location search
  • Geolocation
  • Current weather conditions
  • 3 days forecast
  • Conditions
  • Precipitation
  • Wind
  • Astronomy

Current weather

  • Tile
  • Last updated

Conditions

  • Title
  • Cloud cover
  • Condition
  • Precipitation
  • Visibility

Temperature

  • Title
  • Temperature
  • Feels like
  • Humidity
  • Pressure
  • UV index

Wind

  • Title
  • Direction
  • Speed
  • Gusts

Conditions

  • Title
  • Description
  • Temperature
  • Condition icon
  • Time

Precipitation

  • Title
  • Description
  • Percentage chance
  • Bespoke dynamic icon
  • Volume
  • Time
  • Total daily precipitation

Wind

  • Title
  • Description
  • Feels like temperature
  • Bespoke wind direction icon
  • Wind speed
  • Time

Astronomy

  • Sun: sunrise, sunset
  • Moon: moonrise, moonset, moon phase, illumination

Technologies

  • HTML5
  • CSS3
  • Sass / Scss
  • JavaScript ES6+
  • React

APIs

Third party

  • React icons
  • React router

Design tools

  • Adobe Illustrator