Skip to content

Dangereye/the-weather

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

Weather application - React.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published