commit 0d4873cc8cb01e069693fd9502b3e7a76878910e Author: imp4ct Date: Wed Jul 29 17:01:17 2020 -0400 Hacked Together simple desktop weather app diff --git a/index.html b/index.html new file mode 100644 index 0000000..b557b68 --- /dev/null +++ b/index.html @@ -0,0 +1,65 @@ + + + WeatherXi + + + + + + + + +

Today

DATEAncaster +

{{weather.current.temp}}°C

PRECIPITATION{{weather.minutely[0].precipitation}} % +

HUMIDITY{{weather.current.humidity}} % +

WIND{{weather.current.wind_speed}} km/h +

DIRECTION{{weather.current.wind_deg}} ° +

+1h{{weather.hourly[0].temp}}°C
+2h{{weather.hourly[1].temp}}°C
+4h{{weather.hourly[3].temp}}°C
+8h{{weather.hourly[7].temp}}°C

+ + + \ No newline at end of file diff --git a/sample.json b/sample.json new file mode 100644 index 0000000..572cbf4 --- /dev/null +++ b/sample.json @@ -0,0 +1,1829 @@ +{ + "lat":43.21, + "lon":-80, + "timezone":"America/Toronto", + "timezone_offset":-14400, + "current":{ + "dt":1596049812, + "sunrise":1596017256, + "sunset":1596069906, + "temp":26.81, + "feels_like":26.32, + "pressure":1012, + "humidity":61, + "dew_point":18.66, + "uvi":7.95, + "clouds":75, + "visibility":10000, + "wind_speed":5.1, + "wind_deg":250, + "wind_gust":9.3, + "weather":[ + { + "id":803, + "main":"Clouds", + "description":"broken clouds", + "icon":"04d" + + } + + ] + + }, + "minutely":[ + { + "dt":1596049860, + "precipitation":0 + + }, + { + "dt":1596049920, + "precipitation":0 + + }, + { + "dt":1596049980, + "precipitation":0 + + }, + { + "dt":1596050040, + "precipitation":0 + + }, + { + "dt":1596050100, + "precipitation":0 + + }, + { + "dt":1596050160, + "precipitation":0 + + }, + { + "dt":1596050220, + "precipitation":0 + + }, + { + "dt":1596050280, + "precipitation":0 + + }, + { + "dt":1596050340, + "precipitation":0 + + }, + { + "dt":1596050400, + "precipitation":0 + + }, + { + "dt":1596050460, + "precipitation":0 + + }, + { + "dt":1596050520, + "precipitation":0 + + }, + { + "dt":1596050580, + "precipitation":0 + + }, + { + "dt":1596050640, + "precipitation":0 + + }, + { + "dt":1596050700, + "precipitation":0 + + }, + { + "dt":1596050760, + "precipitation":0 + + }, + { + "dt":1596050820, + "precipitation":0 + + }, + { + "dt":1596050880, + "precipitation":0 + + }, + { + "dt":1596050940, + "precipitation":0 + + }, + { + "dt":1596051000, + "precipitation":0 + + }, + { + "dt":1596051060, + "precipitation":0 + + }, + { + "dt":1596051120, + "precipitation":0 + + }, + { + "dt":1596051180, + "precipitation":0 + + }, + { + "dt":1596051240, + "precipitation":0 + + }, + { + "dt":1596051300, + "precipitation":0 + + }, + { + "dt":1596051360, + "precipitation":0 + + }, + { + "dt":1596051420, + "precipitation":0 + + }, + { + "dt":1596051480, + "precipitation":0 + + }, + { + "dt":1596051540, + "precipitation":0 + + }, + { + "dt":1596051600, + "precipitation":0 + + }, + { + "dt":1596051660, + "precipitation":0 + + }, + { + "dt":1596051720, + "precipitation":0 + + }, + { + "dt":1596051780, + "precipitation":0 + + }, + { + "dt":1596051840, + "precipitation":0 + + }, + { + "dt":1596051900, + "precipitation":0 + + }, + { + "dt":1596051960, + "precipitation":0 + + }, + { + "dt":1596052020, + "precipitation":0 + + }, + { + "dt":1596052080, + "precipitation":0 + + }, + { + "dt":1596052140, + "precipitation":0 + + }, + { + "dt":1596052200, + "precipitation":0 + + }, + { + "dt":1596052260, + "precipitation":0 + + }, + { + "dt":1596052320, + "precipitation":0 + + }, + { + "dt":1596052380, + "precipitation":0 + + }, + { + "dt":1596052440, + "precipitation":0 + + }, + { + "dt":1596052500, + "precipitation":0 + + }, + { + "dt":1596052560, + "precipitation":0 + + }, + { + "dt":1596052620, + "precipitation":0 + + }, + { + "dt":1596052680, + "precipitation":0 + + }, + { + "dt":1596052740, + "precipitation":0 + + }, + { + "dt":1596052800, + "precipitation":0 + + }, + { + "dt":1596052860, + "precipitation":0 + + }, + { + "dt":1596052920, + "precipitation":0 + + }, + { + "dt":1596052980, + "precipitation":0 + + }, + { + "dt":1596053040, + "precipitation":0 + + }, + { + "dt":1596053100, + "precipitation":0 + + }, + { + "dt":1596053160, + "precipitation":0 + + }, + { + "dt":1596053220, + "precipitation":0 + + }, + { + "dt":1596053280, + "precipitation":0 + + }, + { + "dt":1596053340, + "precipitation":0 + + }, + { + "dt":1596053400, + "precipitation":0 + + }, + { + "dt":1596053460, + "precipitation":0 + + } + + ], + "hourly":[ + { + "dt":1596049200, + "temp":26.81, + "feels_like":25.55, + "pressure":1012, + "humidity":61, + "dew_point":18.66, + "clouds":75, + "visibility":10000, + "wind_speed":6.19, + "wind_deg":257, + "weather":[ + { + "id":803, + "main":"Clouds", + "description":"broken clouds", + "icon":"04d" + + } + + ], + "pop":0.67 + + }, + { + "dt":1596052800, + "temp":26.72, + "feels_like":25.67, + "pressure":1011, + "humidity":59, + "dew_point":18.05, + "clouds":40, + "visibility":10000, + "wind_speed":5.51, + "wind_deg":255, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "pop":0.63 + + }, + { + "dt":1596056400, + "temp":26.55, + "feels_like":25.39, + "pressure":1010, + "humidity":57, + "dew_point":17.34, + "clouds":18, + "visibility":10000, + "wind_speed":5.25, + "wind_deg":255, + "weather":[ + { + "id":801, + "main":"Clouds", + "description":"few clouds", + "icon":"02d" + + } + + ], + "pop":0.59 + + }, + { + "dt":1596060000, + "temp":26.15, + "feels_like":25.5, + "pressure":1010, + "humidity":58, + "dew_point":17.24, + "clouds":7, + "visibility":10000, + "wind_speed":4.46, + "wind_deg":270, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0.59 + + }, + { + "dt":1596063600, + "temp":25.03, + "feels_like":25.45, + "pressure":1010, + "humidity":64, + "dew_point":17.75, + "clouds":2, + "visibility":10000, + "wind_speed":3.23, + "wind_deg":289, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0.55 + + }, + { + "dt":1596067200, + "temp":22.55, + "feels_like":22.72, + "pressure":1011, + "humidity":70, + "dew_point":17.01, + "clouds":1, + "visibility":10000, + "wind_speed":3.04, + "wind_deg":303, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0.55 + + }, + { + "dt":1596070800, + "temp":20.14, + "feels_like":20.07, + "pressure":1011, + "humidity":75, + "dew_point":15.59, + "clouds":0, + "visibility":10000, + "wind_speed":2.71, + "wind_deg":307, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0.23 + + }, + { + "dt":1596074400, + "temp":18.84, + "feels_like":18.65, + "pressure":1012, + "humidity":77, + "dew_point":14.85, + "clouds":0, + "visibility":10000, + "wind_speed":2.43, + "wind_deg":302, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0.19 + + }, + { + "dt":1596078000, + "temp":18.08, + "feels_like":18.16, + "pressure":1012, + "humidity":79, + "dew_point":14.51, + "clouds":0, + "visibility":10000, + "wind_speed":1.88, + "wind_deg":299, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0.19 + + }, + { + "dt":1596081600, + "temp":17.49, + "feels_like":17.56, + "pressure":1012, + "humidity":82, + "dew_point":14.41, + "clouds":0, + "visibility":10000, + "wind_speed":1.89, + "wind_deg":295, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0.11 + + }, + { + "dt":1596085200, + "temp":17.01, + "feels_like":17.13, + "pressure":1012, + "humidity":83, + "dew_point":14.2, + "clouds":0, + "visibility":10000, + "wind_speed":1.69, + "wind_deg":292, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0.11 + + }, + { + "dt":1596088800, + "temp":16.71, + "feels_like":16.7, + "pressure":1012, + "humidity":83, + "dew_point":13.98, + "clouds":0, + "visibility":10000, + "wind_speed":1.73, + "wind_deg":304, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0.07 + + }, + { + "dt":1596092400, + "temp":16.34, + "feels_like":16.01, + "pressure":1012, + "humidity":84, + "dew_point":13.76, + "clouds":0, + "visibility":10000, + "wind_speed":2.1, + "wind_deg":307, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596096000, + "temp":16.01, + "feels_like":15.49, + "pressure":1011, + "humidity":85, + "dew_point":13.66, + "clouds":0, + "visibility":10000, + "wind_speed":2.3, + "wind_deg":316, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596099600, + "temp":15.67, + "feels_like":15.21, + "pressure":1012, + "humidity":87, + "dew_point":13.56, + "clouds":0, + "visibility":10000, + "wind_speed":2.23, + "wind_deg":322, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596103200, + "temp":15.69, + "feels_like":15.51, + "pressure":1012, + "humidity":86, + "dew_point":13.41, + "clouds":8, + "visibility":10000, + "wind_speed":1.76, + "wind_deg":316, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596106800, + "temp":16.1, + "feels_like":16, + "pressure":1012, + "humidity":84, + "dew_point":13.49, + "clouds":7, + "visibility":10000, + "wind_speed":1.66, + "wind_deg":323, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596110400, + "temp":18.03, + "feels_like":17.7, + "pressure":1012, + "humidity":76, + "dew_point":13.89, + "clouds":6, + "visibility":10000, + "wind_speed":2.15, + "wind_deg":346, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596114000, + "temp":20.38, + "feels_like":20.25, + "pressure":1012, + "humidity":67, + "dew_point":14.1, + "clouds":0, + "visibility":10000, + "wind_speed":2.01, + "wind_deg":356, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596117600, + "temp":22.35, + "feels_like":22.57, + "pressure":1012, + "humidity":60, + "dew_point":14.44, + "clouds":0, + "visibility":10000, + "wind_speed":1.59, + "wind_deg":351, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596121200, + "temp":23.7, + "feels_like":24.01, + "pressure":1012, + "humidity":58, + "dew_point":14.99, + "clouds":2, + "visibility":10000, + "wind_speed":1.83, + "wind_deg":326, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596124800, + "temp":24.59, + "feels_like":24.34, + "pressure":1012, + "humidity":54, + "dew_point":14.76, + "clouds":4, + "visibility":10000, + "wind_speed":2.49, + "wind_deg":305, + "weather":[ + { + "id":500, + "main":"Rain", + "description":"light rain", + "icon":"10d" + + } + + ], + "pop":0.24, + "rain":{ + "1h":0.13 + + } + + }, + { + "dt":1596128400, + "temp":25.39, + "feels_like":24.67, + "pressure":1012, + "humidity":51, + "dew_point":14.54, + "clouds":6, + "visibility":10000, + "wind_speed":3.09, + "wind_deg":295, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0.04 + + }, + { + "dt":1596132000, + "temp":25.74, + "feels_like":24.7, + "pressure":1012, + "humidity":50, + "dew_point":14.7, + "clouds":12, + "visibility":10000, + "wind_speed":3.55, + "wind_deg":292, + "weather":[ + { + "id":801, + "main":"Clouds", + "description":"few clouds", + "icon":"02d" + + } + + ], + "pop":0.04 + + }, + { + "dt":1596135600, + "temp":25.98, + "feels_like":24.74, + "pressure":1012, + "humidity":50, + "dew_point":14.84, + "clouds":34, + "visibility":10000, + "wind_speed":3.94, + "wind_deg":295, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "pop":0.12 + + }, + { + "dt":1596139200, + "temp":25.28, + "feels_like":24.09, + "pressure":1011, + "humidity":53, + "dew_point":15.26, + "clouds":55, + "visibility":10000, + "wind_speed":4.01, + "wind_deg":296, + "weather":[ + { + "id":803, + "main":"Clouds", + "description":"broken clouds", + "icon":"04d" + + } + + ], + "pop":0.12 + + }, + { + "dt":1596142800, + "temp":25.39, + "feels_like":24.35, + "pressure":1011, + "humidity":53, + "dew_point":15.4, + "clouds":43, + "visibility":10000, + "wind_speed":3.85, + "wind_deg":299, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "pop":0.04 + + }, + { + "dt":1596146400, + "temp":24.75, + "feels_like":23.61, + "pressure":1011, + "humidity":55, + "dew_point":15.37, + "clouds":46, + "visibility":10000, + "wind_speed":3.98, + "wind_deg":312, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "pop":0 + + }, + { + "dt":1596150000, + "temp":23.76, + "feels_like":23.29, + "pressure":1011, + "humidity":61, + "dew_point":15.9, + "clouds":40, + "visibility":10000, + "wind_speed":3.39, + "wind_deg":319, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "pop":0 + + }, + { + "dt":1596153600, + "temp":21.71, + "feels_like":21.44, + "pressure":1012, + "humidity":68, + "dew_point":15.74, + "clouds":33, + "visibility":10000, + "wind_speed":2.98, + "wind_deg":321, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "pop":0 + + }, + { + "dt":1596157200, + "temp":19.32, + "feels_like":18.52, + "pressure":1013, + "humidity":77, + "dew_point":15.36, + "clouds":5, + "visibility":10000, + "wind_speed":3.54, + "wind_deg":341, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596160800, + "temp":18.11, + "feels_like":17.36, + "pressure":1013, + "humidity":83, + "dew_point":15.2, + "clouds":53, + "visibility":10000, + "wind_speed":3.47, + "wind_deg":350, + "weather":[ + { + "id":803, + "main":"Clouds", + "description":"broken clouds", + "icon":"04n" + + } + + ], + "pop":0 + + }, + { + "dt":1596164400, + "temp":17.24, + "feels_like":16.4, + "pressure":1013, + "humidity":85, + "dew_point":14.81, + "clouds":37, + "visibility":10000, + "wind_speed":3.35, + "wind_deg":353, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03n" + + } + + ], + "pop":0 + + }, + { + "dt":1596168000, + "temp":16.63, + "feels_like":15.87, + "pressure":1013, + "humidity":87, + "dew_point":14.53, + "clouds":28, + "visibility":10000, + "wind_speed":3.12, + "wind_deg":352, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03n" + + } + + ], + "pop":0 + + }, + { + "dt":1596171600, + "temp":16.1, + "feels_like":15.38, + "pressure":1012, + "humidity":87, + "dew_point":13.98, + "clouds":23, + "visibility":10000, + "wind_speed":2.81, + "wind_deg":352, + "weather":[ + { + "id":801, + "main":"Clouds", + "description":"few clouds", + "icon":"02n" + + } + + ], + "pop":0 + + }, + { + "dt":1596175200, + "temp":15.62, + "feels_like":15, + "pressure":1012, + "humidity":87, + "dew_point":13.54, + "clouds":19, + "visibility":10000, + "wind_speed":2.44, + "wind_deg":353, + "weather":[ + { + "id":801, + "main":"Clouds", + "description":"few clouds", + "icon":"02n" + + } + + ], + "pop":0 + + }, + { + "dt":1596178800, + "temp":15.21, + "feels_like":14.57, + "pressure":1012, + "humidity":89, + "dew_point":13.5, + "clouds":0, + "visibility":10000, + "wind_speed":2.43, + "wind_deg":346, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596182400, + "temp":14.92, + "feels_like":14.32, + "pressure":1012, + "humidity":91, + "dew_point":13.48, + "clouds":0, + "visibility":10000, + "wind_speed":2.4, + "wind_deg":342, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596186000, + "temp":14.74, + "feels_like":14.2, + "pressure":1012, + "humidity":92, + "dew_point":13.48, + "clouds":0, + "visibility":10000, + "wind_speed":2.32, + "wind_deg":338, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596189600, + "temp":14.67, + "feels_like":14.1, + "pressure":1012, + "humidity":92, + "dew_point":13.46, + "clouds":0, + "visibility":10000, + "wind_speed":2.32, + "wind_deg":336, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01n" + + } + + ], + "pop":0 + + }, + { + "dt":1596193200, + "temp":15.14, + "feels_like":14.68, + "pressure":1012, + "humidity":91, + "dew_point":13.76, + "clouds":0, + "visibility":10000, + "wind_speed":2.31, + "wind_deg":338, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596196800, + "temp":17.44, + "feels_like":17.33, + "pressure":1013, + "humidity":83, + "dew_point":14.71, + "clouds":0, + "visibility":10000, + "wind_speed":2.22, + "wind_deg":348, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596200400, + "temp":19.83, + "feels_like":19.9, + "pressure":1013, + "humidity":73, + "dew_point":15.04, + "clouds":0, + "visibility":10000, + "wind_speed":2.13, + "wind_deg":1, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596204000, + "temp":21.61, + "feels_like":21.7, + "pressure":1013, + "humidity":66, + "dew_point":15.08, + "clouds":0, + "visibility":10000, + "wind_speed":2.17, + "wind_deg":9, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596207600, + "temp":23.12, + "feels_like":22.98, + "pressure":1013, + "humidity":59, + "dew_point":14.86, + "clouds":0, + "visibility":10000, + "wind_speed":2.33, + "wind_deg":11, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596211200, + "temp":24.44, + "feels_like":24.11, + "pressure":1013, + "humidity":54, + "dew_point":14.73, + "clouds":0, + "visibility":10000, + "wind_speed":2.53, + "wind_deg":10, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596214800, + "temp":25.44, + "feels_like":24.92, + "pressure":1013, + "humidity":51, + "dew_point":14.71, + "clouds":0, + "visibility":10000, + "wind_speed":2.83, + "wind_deg":13, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + }, + { + "dt":1596218400, + "temp":26.15, + "feels_like":25.61, + "pressure":1013, + "humidity":49, + "dew_point":14.83, + "clouds":2, + "visibility":10000, + "wind_speed":2.86, + "wind_deg":13, + "weather":[ + { + "id":800, + "main":"Clear", + "description":"clear sky", + "icon":"01d" + + } + + ], + "pop":0 + + } + + ], + "daily":[ + { + "dt":1596042000, + "sunrise":1596017256, + "sunset":1596069906, + "temp":{ + "day":26.81, + "min":16.79, + "max":26.81, + "night":16.79, + "eve":23.47, + "morn":26.81 + + }, + "feels_like":{ + "day":25.29, + "night":16.8, + "eve":23.9, + "morn":25.29 + + }, + "pressure":1012, + "humidity":61, + "dew_point":18.66, + "wind_speed":6.56, + "wind_deg":257, + "weather":[ + { + "id":500, + "main":"Rain", + "description":"light rain", + "icon":"10d" + + } + + ], + "clouds":75, + "pop":0.9, + "rain":2.53, + "uvi":7.95 + + }, + { + "dt":1596128400, + "sunrise":1596103719, + "sunset":1596156239, + "temp":{ + "day":25.74, + "min":15.62, + "max":25.74, + "night":15.62, + "eve":21.71, + "morn":18.03 + + }, + "feels_like":{ + "day":24.7, + "night":15, + "eve":21.44, + "morn":17.7 + + }, + "pressure":1012, + "humidity":50, + "dew_point":14.7, + "wind_speed":3.55, + "wind_deg":292, + "weather":[ + { + "id":500, + "main":"Rain", + "description":"light rain", + "icon":"10d" + + } + + ], + "clouds":12, + "pop":0.24, + "rain":0.19, + "uvi":7.95 + + }, + { + "dt":1596214800, + "sunrise":1596190183, + "sunset":1596242570, + "temp":{ + "day":26.15, + "min":16.04, + "max":26.15, + "night":16.04, + "eve":22.3, + "morn":17.44 + + }, + "feels_like":{ + "day":25.61, + "night":14.82, + "eve":23.91, + "morn":17.33 + + }, + "pressure":1013, + "humidity":49, + "dew_point":14.83, + "wind_speed":2.86, + "wind_deg":13, + "weather":[ + { + "id":500, + "main":"Rain", + "description":"light rain", + "icon":"10d" + + } + + ], + "clouds":2, + "pop":0.35, + "rain":0.27, + "uvi":8.33 + + }, + { + "dt":1596301200, + "sunrise":1596276647, + "sunset":1596328901, + "temp":{ + "day":27.91, + "min":18.13, + "max":27.91, + "night":18.89, + "eve":23.74, + "morn":18.13 + + }, + "feels_like":{ + "day":28.86, + "night":19.46, + "eve":24.84, + "morn":18.59 + + }, + "pressure":1014, + "humidity":46, + "dew_point":15.49, + "wind_speed":1.05, + "wind_deg":304, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "clouds":25, + "pop":0, + "uvi":8.4 + + }, + { + "dt":1596387600, + "sunrise":1596363111, + "sunset":1596415229, + "temp":{ + "day":18.85, + "min":17.44, + "max":20.23, + "night":17.44, + "eve":18.63, + "morn":20.23 + + }, + "feels_like":{ + "day":18.92, + "night":16.49, + "eve":18.95, + "morn":20.68 + + }, + "pressure":1007, + "humidity":93, + "dew_point":17.71, + "wind_speed":3.71, + "wind_deg":37, + "weather":[ + { + "id":502, + "main":"Rain", + "description":"heavy intensity rain", + "icon":"10d" + + } + + ], + "clouds":100, + "pop":1, + "rain":29.73, + "uvi":7.85 + + }, + { + "dt":1596474000, + "sunrise":1596449576, + "sunset":1596501556, + "temp":{ + "day":24.22, + "min":15.83, + "max":24.46, + "night":15.83, + "eve":20.84, + "morn":17.85 + + }, + "feels_like":{ + "day":25.12, + "night":14.48, + "eve":22.06, + "morn":18.37 + + }, + "pressure":1016, + "humidity":64, + "dew_point":17.14, + "wind_speed":2.09, + "wind_deg":30, + "weather":[ + { + "id":501, + "main":"Rain", + "description":"moderate rain", + "icon":"10d" + + } + + ], + "clouds":22, + "pop":0.93, + "rain":8.26, + "uvi":7.37 + + }, + { + "dt":1596560400, + "sunrise":1596536041, + "sunset":1596587881, + "temp":{ + "day":21.67, + "min":18.27, + "max":22.01, + "night":18.28, + "eve":18.82, + "morn":18.78 + + }, + "feels_like":{ + "day":18.44, + "night":17.59, + "eve":16.58, + "morn":17.12 + + }, + "pressure":1018, + "humidity":66, + "dew_point":15.08, + "wind_speed":6.94, + "wind_deg":54, + "weather":[ + { + "id":500, + "main":"Rain", + "description":"light rain", + "icon":"10d" + + } + + ], + "clouds":100, + "pop":0.58, + "rain":0.95, + "uvi":7.63 + + }, + { + "dt":1596646800, + "sunrise":1596622507, + "sunset":1596674205, + "temp":{ + "day":24.71, + "min":17.56, + "max":25.59, + "night":17.77, + "eve":22.83, + "morn":17.56 + + }, + "feels_like":{ + "day":25.71, + "night":18.52, + "eve":24.2, + "morn":17 + + }, + "pressure":1017, + "humidity":63, + "dew_point":17.36, + "wind_speed":2.07, + "wind_deg":47, + "weather":[ + { + "id":802, + "main":"Clouds", + "description":"scattered clouds", + "icon":"03d" + + } + + ], + "clouds":47, + "pop":0, + "uvi":7.46 + + } + + ] + } \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3561b8c --- /dev/null +++ b/style.css @@ -0,0 +1,243 @@ +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,900&display=swap'); + +:root { + --gradient: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%); +} + +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + line-height: 1.25em; +} + +.clear { + clear: both; +} + +body { + margin: 0; + width: 100%; + height: 100vh; + font-family: 'Montserrat', sans-serif; + background-color: #343d4b; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.container { + border-radius: 25px; + -webkit-box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 70px -10px rgba(0, 0, 0, 0.2); + background-color: #222831; + color: #ffffff; + height: 400px; +} + +.weather-side { + position: relative; + height: 100%; + border-radius: 25px; + background-image: url("https://images.unsplash.com/photo-1559963110-71b394e7494d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80"); + width: 300px; + -webkit-box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.2); + -webkit-transition: -webkit-transform 300ms ease; + transition: -webkit-transform 300ms ease; + -o-transition: transform 300ms ease; + transition: transform 300ms ease; + transition: transform 300ms ease, -webkit-transform 300ms ease; + -webkit-transform: translateZ(0) scale(1.02) perspective(1000px); + transform: translateZ(0) scale(1.02) perspective(1000px); + float: left; +} + +.weather-side:hover { + -webkit-transform: scale(1.1) perspective(1500px) rotateY(10deg); + transform: scale(1.1) perspective(1500px) rotateY(10deg); +} + +.weather-gradient { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-image: var(--gradient); + border-radius: 25px; + opacity: 0.8; +} + +.date-container { + position: absolute; + top: 25px; + left: 25px; +} + +.date-dayname { + margin: 0; +} + +.date-day { + display: block; +} + +.location { + display: inline-block; + margin-top: 10px; +} + +.location-icon { + display: inline-block; + height: 0.8em; + width: auto; + margin-right: 5px; +} + +.weather-container { + position: absolute; + bottom: 25px; + left: 25px; +} + +.weather-icon.feather { + height: 60px; + width: auto; +} + +.weather-temp { + margin: 0; + font-weight: 700; + font-size: 4em; +} + +.weather-desc { + margin: 0; +} + +.info-side { + position: relative; + float: left; + height: 100%; + padding-top: 25px; +} + +.today-info { + padding: 15px; + margin: 0 25px 25px 25px; +/* box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25); */ + border-radius: 10px; +} + +.today-info>div:not(:last-child) { + margin: 0 0 10px 0; +} + +.today-info>div .title { + float: left; + font-weight: 700; +} + +.today-info>div .value { + float: right; +} + +.week-list { + list-style-type: none; + padding: 0; + margin: 10px 35px; + -webkit-box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25); + box-shadow: 0 0 50px -5px rgba(0, 0, 0, 0.25); + border-radius: 10px; + background: # +} + +.week-list>li { + float: left; + padding: 15px; + cursor: pointer; + -webkit-transition: 200ms ease; + -o-transition: 200ms ease; + transition: 200ms ease; + border-radius: 10px; +} + +.week-list>li:hover { + -webkit-transform: scale(1.1); + -ms-transform: scale(1.1); + transform: scale(1.1); + background: #fff; + color: #222831; + -webkit-box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 40px -5px rgba(0, 0, 0, 0.2) +} + +.week-list>li.active { + background: #fff; + color: #222831; + border-radius: 10px; +} + +.week-list>li .day-name { + display: block; + margin: 10px 0 0 0; + text-align: center; +} + +.week-list>li .day-icon { + display: block; + height: 30px; + width: auto; + margin: 0 auto; +} + +.week-list>li .day-temp { + display: block; + text-align: center; + margin: 10px 0 0 0; + font-weight: 700; +} + +.location-container { + padding: 25px 35px; +} + +.location-button { + outline: none; + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: none; + border-radius: 25px; + padding: 10px; + font-family: 'Montserrat', sans-serif; + background-image: var(--gradient); + color: #ffffff; + font-weight: 700; + -webkit-box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.25); + box-shadow: 0 0 30px -5px rgba(0, 0, 0, 0.25); + cursor: pointer; + -webkit-transition: -webkit-transform 200ms ease; + transition: -webkit-transform 200ms ease; + -o-transition: transform 200ms ease; + transition: transform 200ms ease; + transition: transform 200ms ease, -webkit-transform 200ms ease; +} + +.location-button:hover { + -webkit-transform: scale(0.95); + -ms-transform: scale(0.95); + transform: scale(0.95); +} + +.location-button .feather { + height: 1em; + width: auto; + margin-right: 5px; +} \ No newline at end of file

Today

{{weather.current.temp}}°C

{{weather.current.weather[0].main}}