diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index f8b15f4cb..4a67e30e9 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,38 @@ -# Weather App +# The Weatherington – Accessible version -Replace this readme with your own information about your project. +The goal was to use the OpenWeatherMap API to create a weather app that shows the current weather in a city and also a 5-day forecast of that city. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +The goal of the second iteration was to make the app accessible. -## The problem +## The problem – Week #1 -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +Based on my chosen design I started with outlining the HTML in my index file to plan for what I needed. I then started with the current weather, fetching that data and then outputting it on the web page. + +The forecast was trickier to figure out. I first tried to just select 12:00 for each day, but then realized I couldn't get the min and max temp of each day that way. With some help from ChatGPT I figured out how to loop through each day and save the min and max temps. + +I also decided to add a search in order to be able to switch city. I made it inline with the app title, which was a bit tricky to make work. + +If I had more time I would have looked into timezones. Right now the sunrise and sunset times show the local times for the user, and not the city that's been entered. + +## The problem – Week #2 + +I started with doing an accessibilty review of my app. In Lighthouse I got one thing to fix, and that was a label or aria-label attribute on my text field. Easy fix! + +I also decided to enchance my colors (even though they did meet the contrast levels), just to make certain even more people found it readable. + +The biggest hurdle, which I'm still not happy with, is the screen reader experience. I did some enhancements to make it make more sense: + +- Adding todays date at the top, followed by the main title +- A paragraph about todays degrees and weather description +- Clearer copy for the sunrise and sunset times +- Adding a title to the forecast list and full weekday names +- Adding clear copy for the highest and lowest temps of the forecast days +- Aria live region for updating the user of what has changed after they enter a new city + +However, making at least VoiceOver on Mac and iPhone read the H1 with the input inside it in a satisfactory way has proven difficult. Especially on iPhone. I've tried numerous ways, but there is always something that doesn't quite work out. + +Would be fun to ask real screen reader users to test it and get some feedback! ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +[https://accessible-weather.netlify.app//](https://accessible-weather.netlify.app//) diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 000000000..9d5ed0e9b Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/animated/.DS_Store b/assets/animated/.DS_Store new file mode 100644 index 000000000..5008ddfcf Binary files /dev/null and b/assets/animated/.DS_Store differ diff --git a/assets/animated/alert-avalanche-danger.svg b/assets/animated/alert-avalanche-danger.svg new file mode 100644 index 000000000..62859b628 --- /dev/null +++ b/assets/animated/alert-avalanche-danger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/alert-falling-rocks.svg b/assets/animated/alert-falling-rocks.svg new file mode 100644 index 000000000..140e919c2 --- /dev/null +++ b/assets/animated/alert-falling-rocks.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/barometer.svg b/assets/animated/barometer.svg new file mode 100644 index 000000000..1c92d0a8c --- /dev/null +++ b/assets/animated/barometer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/beanie.svg b/assets/animated/beanie.svg new file mode 100644 index 000000000..fa3dfb1a4 --- /dev/null +++ b/assets/animated/beanie.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/celsius.svg b/assets/animated/celsius.svg new file mode 100644 index 000000000..0914adcc2 --- /dev/null +++ b/assets/animated/celsius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/clear-day.svg b/assets/animated/clear-day.svg new file mode 100644 index 000000000..bc2015b3b --- /dev/null +++ b/assets/animated/clear-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/clear-night.svg b/assets/animated/clear-night.svg new file mode 100644 index 000000000..af54a37e2 --- /dev/null +++ b/assets/animated/clear-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/cloud-down.svg b/assets/animated/cloud-down.svg new file mode 100644 index 000000000..0864a7fa0 --- /dev/null +++ b/assets/animated/cloud-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/cloud-up.svg b/assets/animated/cloud-up.svg new file mode 100644 index 000000000..4c38227b9 --- /dev/null +++ b/assets/animated/cloud-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/cloudy.svg b/assets/animated/cloudy.svg new file mode 100644 index 000000000..cd0074006 --- /dev/null +++ b/assets/animated/cloudy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/code-green.svg b/assets/animated/code-green.svg new file mode 100644 index 000000000..9880a0e6e --- /dev/null +++ b/assets/animated/code-green.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/code-orange.svg b/assets/animated/code-orange.svg new file mode 100644 index 000000000..63fecdb28 --- /dev/null +++ b/assets/animated/code-orange.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/code-red.svg b/assets/animated/code-red.svg new file mode 100644 index 000000000..677de5249 --- /dev/null +++ b/assets/animated/code-red.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/code-yellow.svg b/assets/animated/code-yellow.svg new file mode 100644 index 000000000..77a90672e --- /dev/null +++ b/assets/animated/code-yellow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/compass-night.svg b/assets/animated/compass-night.svg new file mode 100644 index 000000000..795d0f200 --- /dev/null +++ b/assets/animated/compass-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/compass.svg b/assets/animated/compass.svg new file mode 100644 index 000000000..ec4c3c8d6 --- /dev/null +++ b/assets/animated/compass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/drizzle.svg b/assets/animated/drizzle.svg new file mode 100644 index 000000000..b7c59fa29 --- /dev/null +++ b/assets/animated/drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/dust-day.svg b/assets/animated/dust-day.svg new file mode 100644 index 000000000..ab910a78c --- /dev/null +++ b/assets/animated/dust-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/dust-night.svg b/assets/animated/dust-night.svg new file mode 100644 index 000000000..72b8e0b8f --- /dev/null +++ b/assets/animated/dust-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/dust-wind.svg b/assets/animated/dust-wind.svg new file mode 100644 index 000000000..957ab2cd9 --- /dev/null +++ b/assets/animated/dust-wind.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/dust.svg b/assets/animated/dust.svg new file mode 100644 index 000000000..d9f914f79 --- /dev/null +++ b/assets/animated/dust.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-drizzle.svg b/assets/animated/extreme-day-drizzle.svg new file mode 100644 index 000000000..aa5394f38 --- /dev/null +++ b/assets/animated/extreme-day-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-fog.svg b/assets/animated/extreme-day-fog.svg new file mode 100644 index 000000000..3d5ba2d2e --- /dev/null +++ b/assets/animated/extreme-day-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-hail.svg b/assets/animated/extreme-day-hail.svg new file mode 100644 index 000000000..423eda165 --- /dev/null +++ b/assets/animated/extreme-day-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-haze.svg b/assets/animated/extreme-day-haze.svg new file mode 100644 index 000000000..5c4e7a0f1 --- /dev/null +++ b/assets/animated/extreme-day-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-rain.svg b/assets/animated/extreme-day-rain.svg new file mode 100644 index 000000000..35741dd3d --- /dev/null +++ b/assets/animated/extreme-day-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-sleet.svg b/assets/animated/extreme-day-sleet.svg new file mode 100644 index 000000000..76f98f696 --- /dev/null +++ b/assets/animated/extreme-day-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-smoke.svg b/assets/animated/extreme-day-smoke.svg new file mode 100644 index 000000000..bd67f6822 --- /dev/null +++ b/assets/animated/extreme-day-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day-snow.svg b/assets/animated/extreme-day-snow.svg new file mode 100644 index 000000000..17bb13a49 --- /dev/null +++ b/assets/animated/extreme-day-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-day.svg b/assets/animated/extreme-day.svg new file mode 100644 index 000000000..d2aef46a7 --- /dev/null +++ b/assets/animated/extreme-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-drizzle.svg b/assets/animated/extreme-drizzle.svg new file mode 100644 index 000000000..897c8155e --- /dev/null +++ b/assets/animated/extreme-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-fog.svg b/assets/animated/extreme-fog.svg new file mode 100644 index 000000000..321356f07 --- /dev/null +++ b/assets/animated/extreme-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-hail.svg b/assets/animated/extreme-hail.svg new file mode 100644 index 000000000..8cff3e7f1 --- /dev/null +++ b/assets/animated/extreme-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-haze.svg b/assets/animated/extreme-haze.svg new file mode 100644 index 000000000..9e9bfeb8e --- /dev/null +++ b/assets/animated/extreme-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-drizzle.svg b/assets/animated/extreme-night-drizzle.svg new file mode 100644 index 000000000..db79e3017 --- /dev/null +++ b/assets/animated/extreme-night-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-fog.svg b/assets/animated/extreme-night-fog.svg new file mode 100644 index 000000000..5ed2f6ff8 --- /dev/null +++ b/assets/animated/extreme-night-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-hail.svg b/assets/animated/extreme-night-hail.svg new file mode 100644 index 000000000..dbf6c1b55 --- /dev/null +++ b/assets/animated/extreme-night-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-haze.svg b/assets/animated/extreme-night-haze.svg new file mode 100644 index 000000000..2b039549c --- /dev/null +++ b/assets/animated/extreme-night-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-rain.svg b/assets/animated/extreme-night-rain.svg new file mode 100644 index 000000000..48081c389 --- /dev/null +++ b/assets/animated/extreme-night-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-sleet.svg b/assets/animated/extreme-night-sleet.svg new file mode 100644 index 000000000..70d5bbc9a --- /dev/null +++ b/assets/animated/extreme-night-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-smoke.svg b/assets/animated/extreme-night-smoke.svg new file mode 100644 index 000000000..757104aa2 --- /dev/null +++ b/assets/animated/extreme-night-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night-snow.svg b/assets/animated/extreme-night-snow.svg new file mode 100644 index 000000000..9606b4076 --- /dev/null +++ b/assets/animated/extreme-night-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-night.svg b/assets/animated/extreme-night.svg new file mode 100644 index 000000000..86265f350 --- /dev/null +++ b/assets/animated/extreme-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-rain.svg b/assets/animated/extreme-rain.svg new file mode 100644 index 000000000..16be34883 --- /dev/null +++ b/assets/animated/extreme-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-sleet.svg b/assets/animated/extreme-sleet.svg new file mode 100644 index 000000000..f93b1c5c0 --- /dev/null +++ b/assets/animated/extreme-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-smoke.svg b/assets/animated/extreme-smoke.svg new file mode 100644 index 000000000..124a87f8c --- /dev/null +++ b/assets/animated/extreme-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme-snow.svg b/assets/animated/extreme-snow.svg new file mode 100644 index 000000000..546e341a1 --- /dev/null +++ b/assets/animated/extreme-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/extreme.svg b/assets/animated/extreme.svg new file mode 100644 index 000000000..50cd85c22 --- /dev/null +++ b/assets/animated/extreme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/fahrenheit.svg b/assets/animated/fahrenheit.svg new file mode 100644 index 000000000..eee481abf --- /dev/null +++ b/assets/animated/fahrenheit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/falling-stars.svg b/assets/animated/falling-stars.svg new file mode 100644 index 000000000..cb8244300 --- /dev/null +++ b/assets/animated/falling-stars.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/flag-gale-warning.svg b/assets/animated/flag-gale-warning.svg new file mode 100644 index 000000000..7191aba37 --- /dev/null +++ b/assets/animated/flag-gale-warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/flag-hurricane-warning.svg b/assets/animated/flag-hurricane-warning.svg new file mode 100644 index 000000000..e01417794 --- /dev/null +++ b/assets/animated/flag-hurricane-warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/flag-small-craft-advisory.svg b/assets/animated/flag-small-craft-advisory.svg new file mode 100644 index 000000000..8853b286b --- /dev/null +++ b/assets/animated/flag-small-craft-advisory.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/flag-storm-warning.svg b/assets/animated/flag-storm-warning.svg new file mode 100644 index 000000000..7298c1601 --- /dev/null +++ b/assets/animated/flag-storm-warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/fog-day.svg b/assets/animated/fog-day.svg new file mode 100644 index 000000000..8cf79c44b --- /dev/null +++ b/assets/animated/fog-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/fog-night.svg b/assets/animated/fog-night.svg new file mode 100644 index 000000000..94649b6df --- /dev/null +++ b/assets/animated/fog-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/fog.svg b/assets/animated/fog.svg new file mode 100644 index 000000000..a73b29056 --- /dev/null +++ b/assets/animated/fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/glove.svg b/assets/animated/glove.svg new file mode 100644 index 000000000..97a610288 --- /dev/null +++ b/assets/animated/glove.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/hail.svg b/assets/animated/hail.svg new file mode 100644 index 000000000..c8afc2a87 --- /dev/null +++ b/assets/animated/hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/haze-day.svg b/assets/animated/haze-day.svg new file mode 100644 index 000000000..7118308ac --- /dev/null +++ b/assets/animated/haze-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/haze-night.svg b/assets/animated/haze-night.svg new file mode 100644 index 000000000..002dc22dd --- /dev/null +++ b/assets/animated/haze-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/haze.svg b/assets/animated/haze.svg new file mode 100644 index 000000000..94b754f45 --- /dev/null +++ b/assets/animated/haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/horizon.svg b/assets/animated/horizon.svg new file mode 100644 index 000000000..a040ff2b6 --- /dev/null +++ b/assets/animated/horizon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/humidity.svg b/assets/animated/humidity.svg new file mode 100644 index 000000000..81ecd29b1 --- /dev/null +++ b/assets/animated/humidity.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/hurricane.svg b/assets/animated/hurricane.svg new file mode 100644 index 000000000..719ea1f39 --- /dev/null +++ b/assets/animated/hurricane.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/lightning-bolt.svg b/assets/animated/lightning-bolt.svg new file mode 100644 index 000000000..4ca650b87 --- /dev/null +++ b/assets/animated/lightning-bolt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/mist-night.svg b/assets/animated/mist-night.svg new file mode 100644 index 000000000..9bde7c25f --- /dev/null +++ b/assets/animated/mist-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/mist.svg b/assets/animated/mist.svg new file mode 100644 index 000000000..ee12632c0 --- /dev/null +++ b/assets/animated/mist.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-first-quarter.svg b/assets/animated/moon-first-quarter.svg new file mode 100644 index 000000000..fda73d4aa --- /dev/null +++ b/assets/animated/moon-first-quarter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-full.svg b/assets/animated/moon-full.svg new file mode 100644 index 000000000..f99fe93fc --- /dev/null +++ b/assets/animated/moon-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-last-quarter.svg b/assets/animated/moon-last-quarter.svg new file mode 100644 index 000000000..6a626199c --- /dev/null +++ b/assets/animated/moon-last-quarter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-new.svg b/assets/animated/moon-new.svg new file mode 100644 index 000000000..3105a4c7b --- /dev/null +++ b/assets/animated/moon-new.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-waning-crescent.svg b/assets/animated/moon-waning-crescent.svg new file mode 100644 index 000000000..7843eb8e7 --- /dev/null +++ b/assets/animated/moon-waning-crescent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-waning-gibbous.svg b/assets/animated/moon-waning-gibbous.svg new file mode 100644 index 000000000..1d04b626a --- /dev/null +++ b/assets/animated/moon-waning-gibbous.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-waxing-crescent.svg b/assets/animated/moon-waxing-crescent.svg new file mode 100644 index 000000000..41e1b7e67 --- /dev/null +++ b/assets/animated/moon-waxing-crescent.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moon-waxing-gibbous.svg b/assets/animated/moon-waxing-gibbous.svg new file mode 100644 index 000000000..78f4a8b7c --- /dev/null +++ b/assets/animated/moon-waxing-gibbous.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moonrise.svg b/assets/animated/moonrise.svg new file mode 100644 index 000000000..c9221c1c4 --- /dev/null +++ b/assets/animated/moonrise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/moonset.svg b/assets/animated/moonset.svg new file mode 100644 index 000000000..b22a57a4b --- /dev/null +++ b/assets/animated/moonset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/not-available.svg b/assets/animated/not-available.svg new file mode 100644 index 000000000..615c07c06 --- /dev/null +++ b/assets/animated/not-available.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-drizzle.svg b/assets/animated/overcast-day-drizzle.svg new file mode 100644 index 000000000..9a83dbf65 --- /dev/null +++ b/assets/animated/overcast-day-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-fog.svg b/assets/animated/overcast-day-fog.svg new file mode 100644 index 000000000..75e192b33 --- /dev/null +++ b/assets/animated/overcast-day-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-hail.svg b/assets/animated/overcast-day-hail.svg new file mode 100644 index 000000000..afb6cce3d --- /dev/null +++ b/assets/animated/overcast-day-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-haze.svg b/assets/animated/overcast-day-haze.svg new file mode 100644 index 000000000..d5e318f07 --- /dev/null +++ b/assets/animated/overcast-day-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-rain.svg b/assets/animated/overcast-day-rain.svg new file mode 100644 index 000000000..676c60126 --- /dev/null +++ b/assets/animated/overcast-day-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-sleet.svg b/assets/animated/overcast-day-sleet.svg new file mode 100644 index 000000000..8a45bfb2f --- /dev/null +++ b/assets/animated/overcast-day-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-smoke.svg b/assets/animated/overcast-day-smoke.svg new file mode 100644 index 000000000..f57c8d030 --- /dev/null +++ b/assets/animated/overcast-day-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day-snow.svg b/assets/animated/overcast-day-snow.svg new file mode 100644 index 000000000..051b410c4 --- /dev/null +++ b/assets/animated/overcast-day-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-day.svg b/assets/animated/overcast-day.svg new file mode 100644 index 000000000..f3f1c74d8 --- /dev/null +++ b/assets/animated/overcast-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-drizzle.svg b/assets/animated/overcast-drizzle.svg new file mode 100644 index 000000000..3c133dcd2 --- /dev/null +++ b/assets/animated/overcast-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-fog.svg b/assets/animated/overcast-fog.svg new file mode 100644 index 000000000..074fe9729 --- /dev/null +++ b/assets/animated/overcast-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-hail.svg b/assets/animated/overcast-hail.svg new file mode 100644 index 000000000..da697645c --- /dev/null +++ b/assets/animated/overcast-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-haze.svg b/assets/animated/overcast-haze.svg new file mode 100644 index 000000000..5bad0d427 --- /dev/null +++ b/assets/animated/overcast-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-drizzle.svg b/assets/animated/overcast-night-drizzle.svg new file mode 100644 index 000000000..318b229e7 --- /dev/null +++ b/assets/animated/overcast-night-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-fog.svg b/assets/animated/overcast-night-fog.svg new file mode 100644 index 000000000..5cdf8a9d6 --- /dev/null +++ b/assets/animated/overcast-night-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-hail.svg b/assets/animated/overcast-night-hail.svg new file mode 100644 index 000000000..5352dbae0 --- /dev/null +++ b/assets/animated/overcast-night-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-haze.svg b/assets/animated/overcast-night-haze.svg new file mode 100644 index 000000000..13f3da913 --- /dev/null +++ b/assets/animated/overcast-night-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-rain.svg b/assets/animated/overcast-night-rain.svg new file mode 100644 index 000000000..13cb96724 --- /dev/null +++ b/assets/animated/overcast-night-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-sleet.svg b/assets/animated/overcast-night-sleet.svg new file mode 100644 index 000000000..9960ff0f7 --- /dev/null +++ b/assets/animated/overcast-night-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-smoke.svg b/assets/animated/overcast-night-smoke.svg new file mode 100644 index 000000000..1fb7bd4bb --- /dev/null +++ b/assets/animated/overcast-night-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night-snow.svg b/assets/animated/overcast-night-snow.svg new file mode 100644 index 000000000..9fc98a4e1 --- /dev/null +++ b/assets/animated/overcast-night-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-night.svg b/assets/animated/overcast-night.svg new file mode 100644 index 000000000..0b57cdefa --- /dev/null +++ b/assets/animated/overcast-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-rain.svg b/assets/animated/overcast-rain.svg new file mode 100644 index 000000000..52dfdb1ca --- /dev/null +++ b/assets/animated/overcast-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-sleet.svg b/assets/animated/overcast-sleet.svg new file mode 100644 index 000000000..11bccd87a --- /dev/null +++ b/assets/animated/overcast-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-smoke.svg b/assets/animated/overcast-smoke.svg new file mode 100644 index 000000000..36bafb4a4 --- /dev/null +++ b/assets/animated/overcast-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast-snow.svg b/assets/animated/overcast-snow.svg new file mode 100644 index 000000000..880961cf5 --- /dev/null +++ b/assets/animated/overcast-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/overcast.svg b/assets/animated/overcast.svg new file mode 100644 index 000000000..64170d2af --- /dev/null +++ b/assets/animated/overcast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-drizzle.svg b/assets/animated/partly-cloudy-day-drizzle.svg new file mode 100644 index 000000000..b86ea7ba0 --- /dev/null +++ b/assets/animated/partly-cloudy-day-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-fog.svg b/assets/animated/partly-cloudy-day-fog.svg new file mode 100644 index 000000000..1f484cc2c --- /dev/null +++ b/assets/animated/partly-cloudy-day-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-hail.svg b/assets/animated/partly-cloudy-day-hail.svg new file mode 100644 index 000000000..45850ed5b --- /dev/null +++ b/assets/animated/partly-cloudy-day-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-haze.svg b/assets/animated/partly-cloudy-day-haze.svg new file mode 100644 index 000000000..96bfaadb8 --- /dev/null +++ b/assets/animated/partly-cloudy-day-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-rain.svg b/assets/animated/partly-cloudy-day-rain.svg new file mode 100644 index 000000000..6b01d0ff0 --- /dev/null +++ b/assets/animated/partly-cloudy-day-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-sleet.svg b/assets/animated/partly-cloudy-day-sleet.svg new file mode 100644 index 000000000..7d84b51b0 --- /dev/null +++ b/assets/animated/partly-cloudy-day-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-smoke.svg b/assets/animated/partly-cloudy-day-smoke.svg new file mode 100644 index 000000000..a7e4e0c65 --- /dev/null +++ b/assets/animated/partly-cloudy-day-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day-snow.svg b/assets/animated/partly-cloudy-day-snow.svg new file mode 100644 index 000000000..95535631d --- /dev/null +++ b/assets/animated/partly-cloudy-day-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-day.svg b/assets/animated/partly-cloudy-day.svg new file mode 100644 index 000000000..33c11000a --- /dev/null +++ b/assets/animated/partly-cloudy-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-drizzle.svg b/assets/animated/partly-cloudy-night-drizzle.svg new file mode 100644 index 000000000..796738df1 --- /dev/null +++ b/assets/animated/partly-cloudy-night-drizzle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-fog.svg b/assets/animated/partly-cloudy-night-fog.svg new file mode 100644 index 000000000..00466d65f --- /dev/null +++ b/assets/animated/partly-cloudy-night-fog.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-hail.svg b/assets/animated/partly-cloudy-night-hail.svg new file mode 100644 index 000000000..2afa4f986 --- /dev/null +++ b/assets/animated/partly-cloudy-night-hail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-haze.svg b/assets/animated/partly-cloudy-night-haze.svg new file mode 100644 index 000000000..521c122ce --- /dev/null +++ b/assets/animated/partly-cloudy-night-haze.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-rain.svg b/assets/animated/partly-cloudy-night-rain.svg new file mode 100644 index 000000000..b35cc0165 --- /dev/null +++ b/assets/animated/partly-cloudy-night-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-sleet.svg b/assets/animated/partly-cloudy-night-sleet.svg new file mode 100644 index 000000000..5f540096d --- /dev/null +++ b/assets/animated/partly-cloudy-night-sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-smoke.svg b/assets/animated/partly-cloudy-night-smoke.svg new file mode 100644 index 000000000..98493b710 --- /dev/null +++ b/assets/animated/partly-cloudy-night-smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night-snow.svg b/assets/animated/partly-cloudy-night-snow.svg new file mode 100644 index 000000000..d000665ce --- /dev/null +++ b/assets/animated/partly-cloudy-night-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/partly-cloudy-night.svg b/assets/animated/partly-cloudy-night.svg new file mode 100644 index 000000000..645bcd279 --- /dev/null +++ b/assets/animated/partly-cloudy-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pollen-flower.svg b/assets/animated/pollen-flower.svg new file mode 100644 index 000000000..dc5d42484 --- /dev/null +++ b/assets/animated/pollen-flower.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pollen-grass.svg b/assets/animated/pollen-grass.svg new file mode 100644 index 000000000..adf58486f --- /dev/null +++ b/assets/animated/pollen-grass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pollen-tree.svg b/assets/animated/pollen-tree.svg new file mode 100644 index 000000000..c873d868f --- /dev/null +++ b/assets/animated/pollen-tree.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pollen.svg b/assets/animated/pollen.svg new file mode 100644 index 000000000..f55733fa0 --- /dev/null +++ b/assets/animated/pollen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pressure-high-alt.svg b/assets/animated/pressure-high-alt.svg new file mode 100644 index 000000000..00439f352 --- /dev/null +++ b/assets/animated/pressure-high-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pressure-high.svg b/assets/animated/pressure-high.svg new file mode 100644 index 000000000..8d806db69 --- /dev/null +++ b/assets/animated/pressure-high.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pressure-low-alt.svg b/assets/animated/pressure-low-alt.svg new file mode 100644 index 000000000..1d2ebd781 --- /dev/null +++ b/assets/animated/pressure-low-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/pressure-low.svg b/assets/animated/pressure-low.svg new file mode 100644 index 000000000..958ec2fdc --- /dev/null +++ b/assets/animated/pressure-low.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/rain.svg b/assets/animated/rain.svg new file mode 100644 index 000000000..1cbb22ba7 --- /dev/null +++ b/assets/animated/rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/rainbow-clear.svg b/assets/animated/rainbow-clear.svg new file mode 100644 index 000000000..469f342f5 --- /dev/null +++ b/assets/animated/rainbow-clear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/rainbow.svg b/assets/animated/rainbow.svg new file mode 100644 index 000000000..ddf8ff32a --- /dev/null +++ b/assets/animated/rainbow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/raindrop-measure.svg b/assets/animated/raindrop-measure.svg new file mode 100644 index 000000000..c03b458cd --- /dev/null +++ b/assets/animated/raindrop-measure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/raindrop.svg b/assets/animated/raindrop.svg new file mode 100644 index 000000000..a262133e2 --- /dev/null +++ b/assets/animated/raindrop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/raindrops.svg b/assets/animated/raindrops.svg new file mode 100644 index 000000000..bdb911274 --- /dev/null +++ b/assets/animated/raindrops.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/sleet.svg b/assets/animated/sleet.svg new file mode 100644 index 000000000..2bd0ba1d5 --- /dev/null +++ b/assets/animated/sleet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/smoke-particles.svg b/assets/animated/smoke-particles.svg new file mode 100644 index 000000000..d9311dc1c --- /dev/null +++ b/assets/animated/smoke-particles.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/smoke.svg b/assets/animated/smoke.svg new file mode 100644 index 000000000..4a6285ee7 --- /dev/null +++ b/assets/animated/smoke.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/snow.svg b/assets/animated/snow.svg new file mode 100644 index 000000000..e6d62ebce --- /dev/null +++ b/assets/animated/snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/snowflake.svg b/assets/animated/snowflake.svg new file mode 100644 index 000000000..820682fe5 --- /dev/null +++ b/assets/animated/snowflake.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/snowman.svg b/assets/animated/snowman.svg new file mode 100644 index 000000000..f041f719a --- /dev/null +++ b/assets/animated/snowman.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/solar-eclipse.svg b/assets/animated/solar-eclipse.svg new file mode 100644 index 000000000..568e70618 --- /dev/null +++ b/assets/animated/solar-eclipse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/star.svg b/assets/animated/star.svg new file mode 100644 index 000000000..0c44ca230 --- /dev/null +++ b/assets/animated/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/starry-night.svg b/assets/animated/starry-night.svg new file mode 100644 index 000000000..666955373 --- /dev/null +++ b/assets/animated/starry-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/sun-hot.svg b/assets/animated/sun-hot.svg new file mode 100644 index 000000000..402e16487 --- /dev/null +++ b/assets/animated/sun-hot.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/sunrise.svg b/assets/animated/sunrise.svg new file mode 100644 index 000000000..dabb941fd --- /dev/null +++ b/assets/animated/sunrise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/sunset.svg b/assets/animated/sunset.svg new file mode 100644 index 000000000..595ead3e4 --- /dev/null +++ b/assets/animated/sunset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-celsius.svg b/assets/animated/thermometer-celsius.svg new file mode 100644 index 000000000..73f7e33e3 --- /dev/null +++ b/assets/animated/thermometer-celsius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-colder.svg b/assets/animated/thermometer-colder.svg new file mode 100644 index 000000000..484d7ccc3 --- /dev/null +++ b/assets/animated/thermometer-colder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-fahrenheit.svg b/assets/animated/thermometer-fahrenheit.svg new file mode 100644 index 000000000..c98a38e52 --- /dev/null +++ b/assets/animated/thermometer-fahrenheit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-glass-celsius.svg b/assets/animated/thermometer-glass-celsius.svg new file mode 100644 index 000000000..3d9fc4a37 --- /dev/null +++ b/assets/animated/thermometer-glass-celsius.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-glass-fahrenheit.svg b/assets/animated/thermometer-glass-fahrenheit.svg new file mode 100644 index 000000000..1820314fb --- /dev/null +++ b/assets/animated/thermometer-glass-fahrenheit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-glass.svg b/assets/animated/thermometer-glass.svg new file mode 100644 index 000000000..d8e87b3ed --- /dev/null +++ b/assets/animated/thermometer-glass.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-mercury-cold.svg b/assets/animated/thermometer-mercury-cold.svg new file mode 100644 index 000000000..bc77bb899 --- /dev/null +++ b/assets/animated/thermometer-mercury-cold.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-mercury.svg b/assets/animated/thermometer-mercury.svg new file mode 100644 index 000000000..073fa7868 --- /dev/null +++ b/assets/animated/thermometer-mercury.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-moon.svg b/assets/animated/thermometer-moon.svg new file mode 100644 index 000000000..8bc657f15 --- /dev/null +++ b/assets/animated/thermometer-moon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-raindrop.svg b/assets/animated/thermometer-raindrop.svg new file mode 100644 index 000000000..14cde92fd --- /dev/null +++ b/assets/animated/thermometer-raindrop.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-snow.svg b/assets/animated/thermometer-snow.svg new file mode 100644 index 000000000..d3e365879 --- /dev/null +++ b/assets/animated/thermometer-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-sun.svg b/assets/animated/thermometer-sun.svg new file mode 100644 index 000000000..7d3597b42 --- /dev/null +++ b/assets/animated/thermometer-sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-warmer.svg b/assets/animated/thermometer-warmer.svg new file mode 100644 index 000000000..3c3e22a1f --- /dev/null +++ b/assets/animated/thermometer-warmer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer-water.svg b/assets/animated/thermometer-water.svg new file mode 100644 index 000000000..d4b93e21f --- /dev/null +++ b/assets/animated/thermometer-water.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thermometer.svg b/assets/animated/thermometer.svg new file mode 100644 index 000000000..1d4df7543 --- /dev/null +++ b/assets/animated/thermometer.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-extreme-rain.svg b/assets/animated/thunderstorms-day-extreme-rain.svg new file mode 100644 index 000000000..86ca3fd0e --- /dev/null +++ b/assets/animated/thunderstorms-day-extreme-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-extreme-snow.svg b/assets/animated/thunderstorms-day-extreme-snow.svg new file mode 100644 index 000000000..5e063a6d8 --- /dev/null +++ b/assets/animated/thunderstorms-day-extreme-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-extreme.svg b/assets/animated/thunderstorms-day-extreme.svg new file mode 100644 index 000000000..4a4c82f35 --- /dev/null +++ b/assets/animated/thunderstorms-day-extreme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-overcast-rain.svg b/assets/animated/thunderstorms-day-overcast-rain.svg new file mode 100644 index 000000000..e1ef885a3 --- /dev/null +++ b/assets/animated/thunderstorms-day-overcast-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-overcast-snow.svg b/assets/animated/thunderstorms-day-overcast-snow.svg new file mode 100644 index 000000000..1e4d09f7c --- /dev/null +++ b/assets/animated/thunderstorms-day-overcast-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-overcast.svg b/assets/animated/thunderstorms-day-overcast.svg new file mode 100644 index 000000000..1e3686463 --- /dev/null +++ b/assets/animated/thunderstorms-day-overcast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-rain.svg b/assets/animated/thunderstorms-day-rain.svg new file mode 100644 index 000000000..595595d9b --- /dev/null +++ b/assets/animated/thunderstorms-day-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day-snow.svg b/assets/animated/thunderstorms-day-snow.svg new file mode 100644 index 000000000..d19209034 --- /dev/null +++ b/assets/animated/thunderstorms-day-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-day.svg b/assets/animated/thunderstorms-day.svg new file mode 100644 index 000000000..fccc8060e --- /dev/null +++ b/assets/animated/thunderstorms-day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-extreme-rain.svg b/assets/animated/thunderstorms-extreme-rain.svg new file mode 100644 index 000000000..cf51b2703 --- /dev/null +++ b/assets/animated/thunderstorms-extreme-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-extreme-snow.svg b/assets/animated/thunderstorms-extreme-snow.svg new file mode 100644 index 000000000..54913a50c --- /dev/null +++ b/assets/animated/thunderstorms-extreme-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-extreme.svg b/assets/animated/thunderstorms-extreme.svg new file mode 100644 index 000000000..36af054dc --- /dev/null +++ b/assets/animated/thunderstorms-extreme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-extreme-rain.svg b/assets/animated/thunderstorms-night-extreme-rain.svg new file mode 100644 index 000000000..573e2d456 --- /dev/null +++ b/assets/animated/thunderstorms-night-extreme-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-extreme-snow.svg b/assets/animated/thunderstorms-night-extreme-snow.svg new file mode 100644 index 000000000..ba7357edf --- /dev/null +++ b/assets/animated/thunderstorms-night-extreme-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-extreme.svg b/assets/animated/thunderstorms-night-extreme.svg new file mode 100644 index 000000000..d8a32bd17 --- /dev/null +++ b/assets/animated/thunderstorms-night-extreme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-overcast-rain.svg b/assets/animated/thunderstorms-night-overcast-rain.svg new file mode 100644 index 000000000..a6547369f --- /dev/null +++ b/assets/animated/thunderstorms-night-overcast-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-overcast-snow.svg b/assets/animated/thunderstorms-night-overcast-snow.svg new file mode 100644 index 000000000..70851afd9 --- /dev/null +++ b/assets/animated/thunderstorms-night-overcast-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-overcast.svg b/assets/animated/thunderstorms-night-overcast.svg new file mode 100644 index 000000000..20a61e776 --- /dev/null +++ b/assets/animated/thunderstorms-night-overcast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-rain.svg b/assets/animated/thunderstorms-night-rain.svg new file mode 100644 index 000000000..21ad69060 --- /dev/null +++ b/assets/animated/thunderstorms-night-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night-snow.svg b/assets/animated/thunderstorms-night-snow.svg new file mode 100644 index 000000000..650b2b69b --- /dev/null +++ b/assets/animated/thunderstorms-night-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-night.svg b/assets/animated/thunderstorms-night.svg new file mode 100644 index 000000000..ec510873d --- /dev/null +++ b/assets/animated/thunderstorms-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-overcast-rain.svg b/assets/animated/thunderstorms-overcast-rain.svg new file mode 100644 index 000000000..f5af7b795 --- /dev/null +++ b/assets/animated/thunderstorms-overcast-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-overcast-snow.svg b/assets/animated/thunderstorms-overcast-snow.svg new file mode 100644 index 000000000..756e560a9 --- /dev/null +++ b/assets/animated/thunderstorms-overcast-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-overcast.svg b/assets/animated/thunderstorms-overcast.svg new file mode 100644 index 000000000..ebb158922 --- /dev/null +++ b/assets/animated/thunderstorms-overcast.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-rain.svg b/assets/animated/thunderstorms-rain.svg new file mode 100644 index 000000000..878e116d4 --- /dev/null +++ b/assets/animated/thunderstorms-rain.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms-snow.svg b/assets/animated/thunderstorms-snow.svg new file mode 100644 index 000000000..c920b6a1d --- /dev/null +++ b/assets/animated/thunderstorms-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/thunderstorms.svg b/assets/animated/thunderstorms.svg new file mode 100644 index 000000000..53cc12a42 --- /dev/null +++ b/assets/animated/thunderstorms.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/tide-high.svg b/assets/animated/tide-high.svg new file mode 100644 index 000000000..99aa01ae3 --- /dev/null +++ b/assets/animated/tide-high.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/tide-low.svg b/assets/animated/tide-low.svg new file mode 100644 index 000000000..6f0d2ddcb --- /dev/null +++ b/assets/animated/tide-low.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-afternoon.svg b/assets/animated/time-afternoon.svg new file mode 100644 index 000000000..0c842e04a --- /dev/null +++ b/assets/animated/time-afternoon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-evening.svg b/assets/animated/time-evening.svg new file mode 100644 index 000000000..8b17c529b --- /dev/null +++ b/assets/animated/time-evening.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-late-afternoon.svg b/assets/animated/time-late-afternoon.svg new file mode 100644 index 000000000..e36969367 --- /dev/null +++ b/assets/animated/time-late-afternoon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-late-evening.svg b/assets/animated/time-late-evening.svg new file mode 100644 index 000000000..683dff2d2 --- /dev/null +++ b/assets/animated/time-late-evening.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-late-morning.svg b/assets/animated/time-late-morning.svg new file mode 100644 index 000000000..d62719d7c --- /dev/null +++ b/assets/animated/time-late-morning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-late-night.svg b/assets/animated/time-late-night.svg new file mode 100644 index 000000000..e81ea50bd --- /dev/null +++ b/assets/animated/time-late-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-morning.svg b/assets/animated/time-morning.svg new file mode 100644 index 000000000..c36dec89a --- /dev/null +++ b/assets/animated/time-morning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/time-night.svg b/assets/animated/time-night.svg new file mode 100644 index 000000000..f968f0938 --- /dev/null +++ b/assets/animated/time-night.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/tornado.svg b/assets/animated/tornado.svg new file mode 100644 index 000000000..b049d2e8e --- /dev/null +++ b/assets/animated/tornado.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/umbrella-wind-alt.svg b/assets/animated/umbrella-wind-alt.svg new file mode 100644 index 000000000..fbaf23193 --- /dev/null +++ b/assets/animated/umbrella-wind-alt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/umbrella-wind.svg b/assets/animated/umbrella-wind.svg new file mode 100644 index 000000000..370b2e3dd --- /dev/null +++ b/assets/animated/umbrella-wind.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/umbrella.svg b/assets/animated/umbrella.svg new file mode 100644 index 000000000..6ac49c369 --- /dev/null +++ b/assets/animated/umbrella.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-1.svg b/assets/animated/uv-index-1.svg new file mode 100644 index 000000000..ed8da4ad8 --- /dev/null +++ b/assets/animated/uv-index-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-10.svg b/assets/animated/uv-index-10.svg new file mode 100644 index 000000000..745ec2156 --- /dev/null +++ b/assets/animated/uv-index-10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-11.svg b/assets/animated/uv-index-11.svg new file mode 100644 index 000000000..9fdb61ef1 --- /dev/null +++ b/assets/animated/uv-index-11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-2.svg b/assets/animated/uv-index-2.svg new file mode 100644 index 000000000..6cf1a2e0d --- /dev/null +++ b/assets/animated/uv-index-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-3.svg b/assets/animated/uv-index-3.svg new file mode 100644 index 000000000..b889f715b --- /dev/null +++ b/assets/animated/uv-index-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-4.svg b/assets/animated/uv-index-4.svg new file mode 100644 index 000000000..611a42ad8 --- /dev/null +++ b/assets/animated/uv-index-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-5.svg b/assets/animated/uv-index-5.svg new file mode 100644 index 000000000..2011bc14b --- /dev/null +++ b/assets/animated/uv-index-5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-6.svg b/assets/animated/uv-index-6.svg new file mode 100644 index 000000000..5d68226fd --- /dev/null +++ b/assets/animated/uv-index-6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-7.svg b/assets/animated/uv-index-7.svg new file mode 100644 index 000000000..fec87d8e2 --- /dev/null +++ b/assets/animated/uv-index-7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-8.svg b/assets/animated/uv-index-8.svg new file mode 100644 index 000000000..b405be7b7 --- /dev/null +++ b/assets/animated/uv-index-8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index-9.svg b/assets/animated/uv-index-9.svg new file mode 100644 index 000000000..e13460fe1 --- /dev/null +++ b/assets/animated/uv-index-9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/uv-index.svg b/assets/animated/uv-index.svg new file mode 100644 index 000000000..f5b55b32e --- /dev/null +++ b/assets/animated/uv-index.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-alert.svg b/assets/animated/wind-alert.svg new file mode 100644 index 000000000..850b0ada8 --- /dev/null +++ b/assets/animated/wind-alert.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-0.svg b/assets/animated/wind-beaufort-0.svg new file mode 100644 index 000000000..2f4c52c5c --- /dev/null +++ b/assets/animated/wind-beaufort-0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-1.svg b/assets/animated/wind-beaufort-1.svg new file mode 100644 index 000000000..97dc106cb --- /dev/null +++ b/assets/animated/wind-beaufort-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-10.svg b/assets/animated/wind-beaufort-10.svg new file mode 100644 index 000000000..ae673ac13 --- /dev/null +++ b/assets/animated/wind-beaufort-10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-11.svg b/assets/animated/wind-beaufort-11.svg new file mode 100644 index 000000000..ecc7d4e8c --- /dev/null +++ b/assets/animated/wind-beaufort-11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-12.svg b/assets/animated/wind-beaufort-12.svg new file mode 100644 index 000000000..0f6b142af --- /dev/null +++ b/assets/animated/wind-beaufort-12.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-2.svg b/assets/animated/wind-beaufort-2.svg new file mode 100644 index 000000000..2af7136b8 --- /dev/null +++ b/assets/animated/wind-beaufort-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-3.svg b/assets/animated/wind-beaufort-3.svg new file mode 100644 index 000000000..1d23f9575 --- /dev/null +++ b/assets/animated/wind-beaufort-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-4.svg b/assets/animated/wind-beaufort-4.svg new file mode 100644 index 000000000..cf75506d6 --- /dev/null +++ b/assets/animated/wind-beaufort-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-5.svg b/assets/animated/wind-beaufort-5.svg new file mode 100644 index 000000000..8cf02e32e --- /dev/null +++ b/assets/animated/wind-beaufort-5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-6.svg b/assets/animated/wind-beaufort-6.svg new file mode 100644 index 000000000..db016a23a --- /dev/null +++ b/assets/animated/wind-beaufort-6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-7.svg b/assets/animated/wind-beaufort-7.svg new file mode 100644 index 000000000..8e7214c10 --- /dev/null +++ b/assets/animated/wind-beaufort-7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-8.svg b/assets/animated/wind-beaufort-8.svg new file mode 100644 index 000000000..49ceb4c7a --- /dev/null +++ b/assets/animated/wind-beaufort-8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-beaufort-9.svg b/assets/animated/wind-beaufort-9.svg new file mode 100644 index 000000000..2442597ea --- /dev/null +++ b/assets/animated/wind-beaufort-9.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-offshore.svg b/assets/animated/wind-offshore.svg new file mode 100644 index 000000000..446d5e25f --- /dev/null +++ b/assets/animated/wind-offshore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-onshore.svg b/assets/animated/wind-onshore.svg new file mode 100644 index 000000000..cc3b92531 --- /dev/null +++ b/assets/animated/wind-onshore.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind-snow.svg b/assets/animated/wind-snow.svg new file mode 100644 index 000000000..221525f4c --- /dev/null +++ b/assets/animated/wind-snow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/wind.svg b/assets/animated/wind.svg new file mode 100644 index 000000000..1f8e31ef1 --- /dev/null +++ b/assets/animated/wind.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/windsock-weak.svg b/assets/animated/windsock-weak.svg new file mode 100644 index 000000000..4e98428e4 --- /dev/null +++ b/assets/animated/windsock-weak.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/animated/windsock.svg b/assets/animated/windsock.svg new file mode 100644 index 000000000..d7b3f7f68 --- /dev/null +++ b/assets/animated/windsock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/design-1/Group16.png b/assets/design-1/Group16.png deleted file mode 100644 index c2d0e3f5a..000000000 Binary files a/assets/design-1/Group16.png and /dev/null differ diff --git a/assets/design-1/Group34.png b/assets/design-1/Group34.png deleted file mode 100644 index f7e90e552..000000000 Binary files a/assets/design-1/Group34.png and /dev/null differ diff --git a/assets/design-1/Group36.png b/assets/design-1/Group36.png deleted file mode 100644 index ce9c147cf..000000000 Binary files a/assets/design-1/Group36.png and /dev/null differ diff --git a/assets/design-1/Group37.png b/assets/design-1/Group37.png deleted file mode 100644 index ce9c147cf..000000000 Binary files a/assets/design-1/Group37.png and /dev/null differ diff --git a/assets/design-1/Group38.png b/assets/design-1/Group38.png deleted file mode 100644 index ce9c147cf..000000000 Binary files a/assets/design-1/Group38.png and /dev/null differ diff --git a/assets/design-2/noun_Cloud_1188486.svg b/assets/design-2/noun_Cloud_1188486.svg deleted file mode 100644 index c2375e901..000000000 --- a/assets/design-2/noun_Cloud_1188486.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/assets/design-2/noun_Sunglasses_2055147.svg b/assets/design-2/noun_Sunglasses_2055147.svg deleted file mode 100644 index a1fcd7e8b..000000000 --- a/assets/design-2/noun_Sunglasses_2055147.svg +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/design-2/noun_Umbrella_2030530.svg b/assets/design-2/noun_Umbrella_2030530.svg deleted file mode 100644 index 8a414b15f..000000000 --- a/assets/design-2/noun_Umbrella_2030530.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - - - - - - diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 000000000..bd486fa63 --- /dev/null +++ b/favicon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..1b3ed3be5 --- /dev/null +++ b/index.html @@ -0,0 +1,40 @@ + + + + + + + + The Weatherington + + + + + +
+
+
+ +

Loading weather...

+
+
+
+ +
+
+ + + diff --git a/instructions.md b/instructions.md index 42fc411ce..ea4570105 100644 --- a/instructions.md +++ b/instructions.md @@ -1,14 +1,17 @@ # Instructions + Start out with signing up for a [free Open Weather Map](https://home.openweathermap.org/users/sign_up "free Open Weather Map") account, as it can take up to a few hours for the API key to be activated. ## Step by step instructions + ### Step 1 - Get started with the weather API + [Sign up for a free Open Weather Map account](https://home.openweathermap.org/users/sign_up). Once signed in, go to "My API keys". You find that in the menu if you click your username. Copy the API Key. You can use the API Key in the APPID parameter when making calls to the openweathermap API. For example, to get the current weather in Stockholm, you can use the URL below. Remember to replace YOUR_API_KEY with the API key you copied from your dashboard. ``` -https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=YOUR_API_KEY +https://api.openweathermap.org/data/2.5/weather?q=Stockholm,Sweden&units=metric&APPID=f1eb0732aa36b48c85267620f68aa926 ``` The response should look something like this (this has been run through jsonlint.com to add newlines and indentation): @@ -63,12 +66,15 @@ You will need to use the `fetch()` function in JavaScript to load the weather da Read the [endpoint documentation](https://openweathermap.org/current) for the current weather. ### Step 2 - Present some data on your web app + Your task is to present some data on your web app. Start with: + - the city name - the temperature (rounded to 1 decimal place) - and what type of weather it is (the "description" in the JSON) ### Step 3 - Features + **Feature: Sunrise and sunset πŸŒ…** Show the time for sunrise and sunset in a readable time format (Example: 13:00 or 1 PM). You will have to format the date from milliseconds to a readable format. [Here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date "Here") is a useful resource for how to do this. @@ -76,10 +82,10 @@ Show the time for sunrise and sunset in a readable time format (Example: 13:00 o Show a forecast for the next 4 days. You can choose how to display the forecast - perhaps you want to show the min and max temperature for each day, or perhaps you want to show the temperature from the middle of the day, or the humidity, what it feels like and so on. Just make sure to make it all fit nicely with your chosen design. ``` -https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=YOUR_API_KEY +https://api.openweathermap.org/data/2.5/forecast?q=Stockholm,Sweden&units=metric&APPID=f1eb0732aa36b48c85267620f68aa926 ``` -The API gives us the next 4-5 days but for every third hour. So a good idea could be to only use the weather data from the same time every day. You can filter the forecast list array to only get the info from 12:00 each day for example. +The API gives us the next 4-5 days but for every third hour. So a good idea could be to only use the weather data from the same time every day. You can filter the forecast list array to only get the info from 12:00 each day for example. Read the [endpoint documentation](https://openweathermap.org/forecast5 "endpoint documentation") for the forecast. @@ -87,6 +93,7 @@ Read the [endpoint documentation](https://openweathermap.org/forecast5 "endpoint Style it to look like one of the provided designs. ## Requirements + - You should fetch data from the API using `fetch()` in JavaScript - The app should have: city name, current temperature, weather description, sunrise/sunset time, 4-day forecast - The presentation of the data should be in the specified format @@ -95,9 +102,11 @@ Style it to look like one of the provided designs. - Follow the guidelines on how to write clean code ## Stretch goals + So you’ve completed the requirements? Great job! Make sure you've committed and pushed a version of your project before starting on the stretch goals. Remember that the stretch goals are optional. ### Intermediate Stretch Goals + **Feature: Styling warm/cold πŸŒžβ„οΈ** Change the colours of the page based on the weather. If the weather is warm – use warm colours. If the weather is colder, use cold colours. If you really want to push your CSS muscles you can even make a background gradient. @@ -107,6 +116,7 @@ Another alternative is to include visual indicators for the type of weather, clo Give the user the option to choose between a couple of your favourite cities, or create a searchbar where the user can search for a specific city. ### Advanced Stretch Goals + **Feature: Use your location πŸ—ΊοΈ** Use the [Geolocation API](https://www.w3schools.com/html/html5_geolocation.asp "Geolocation API") that is built into your browser to fetch the city that you are located in at the moment and show the weather for your location. diff --git a/pull_request_template.md b/pull_request_template.md deleted file mode 100644 index 70fa177f7..000000000 --- a/pull_request_template.md +++ /dev/null @@ -1,3 +0,0 @@ -## Netlify link -Add your Netlify link here. -PS. Don't forget to add it in your readme as well. diff --git a/script.js b/script.js new file mode 100644 index 000000000..2c8f78d8e --- /dev/null +++ b/script.js @@ -0,0 +1,801 @@ +/* ********************************* + Constants +********************************* */ + +// API key for OpenWeatherMap API +const API_KEY = "f1eb0732aa36b48c85267620f68aa926"; + +// Base URLs for current weather and forecast APIs +const BASE_URL_WEATHER = "https://api.openweathermap.org/data/2.5/weather"; +const BASE_URL_FORECAST = "https://api.openweathermap.org/data/2.5/forecast"; + +// Array of weekdays for easy reference +const weekdaysShort = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; +const weekdaysLong = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", +]; + +/* ********************************* + Global Variables +********************************* */ + +let apiQueryCity = "Stockholm"; // Default city for initial weather display +let displayedCityName = "Stockholm"; // Displayed city name (may differ in case or spelling) +let weatherTypeToday = ""; // Current weather type (e.g., "Clouds", "Clear") +let weatherDescriptionToday = ""; // Current weather description +let userCityInput = ""; // User input city name during a search +let userHasInteracted = false; // Flag to track if the user has interacted + +/* ********************************* + Testing Configuration +********************************* */ + +// Set to true to use mock data instead of real API data +const useMockData = false; // Change to false to use real data +const simulateNighttime = false; // Set to true to force nighttime for testing + +/* ********************************* + DOM Selectors +********************************* */ + +const app = document.getElementById("app"); // Main app container +const weatherTodayContainer = document.getElementById("weather-today"); // Container for today's weather +const weatherForecastTitle = document.getElementById("weather-forecast__title"); // Container for weather forecast title +const forecastList = document.getElementById("weather-forecast__list"); // List element for the forecast data + +/* ********************************* + Weather Types +********************************* */ + +/** + * An object mapping weather types to their corresponding UI classes and messages. + * Each key represents a weather condition and contains properties for class names, + * messages, and image sources for day and night. + */ +const weatherTypes = { + clouds: { + className: "is-cloudy", + dayMessage: "Light a fire and get cozy. {city} is looking grey today.", + dayImgSrc: "./assets/animated/cloudy.svg", + nightMessage: "The clouds linger over {city} creating a calm, moody night.", + nightImgSrc: "./assets/animated/partly-cloudy-night.svg", + }, + clear: { + className: "is-clear", + dayMessage: "Get your sunnies on. {city} is looking rather great today.", + dayImgSrc: "./assets/animated/clear-day.svg", + nightMessage: "It's a clear and beautiful night in {city}.", + nightImgSrc: "./assets/animated/clear-night.svg", + }, + drizzle: { + className: "is-drizzly", + dayMessage: "There's a light drizzle in {city}. Keep your raincoat handy!", + dayImgSrc: "./assets/animated/drizzle.svg", + nightMessage: "A soft drizzle falls over {city} this night.", + nightImgSrc: "./assets/animated/extreme-night-drizzle.svg", + }, + rain: { + className: "is-rainy", + dayMessage: "Get your umbrella! {city} is looking rather rainy today.", + dayImgSrc: "./assets/animated/rain.svg", + nightMessage: "The rain pours down in {city}. A perfect night to stay in.", + nightImgSrc: "./assets/animated/extreme-night-rain.svg", + }, + snow: { + className: "is-snowy", + dayMessage: "Time for snow boots! {city} is a winter wonderland today.", + dayImgSrc: "./assets/animated/snow.svg", + nightMessage: "Snow falls on {city} tonight. A peaceful winter night.", + nightImgSrc: "./assets/animated/extreme-night-snow.svg", + }, + thunderstorm: { + className: "is-thunderstorm", + dayMessage: + "Stay safe indoors! {city} is rumbling with a thunderstorm today.", + dayImgSrc: "./assets/animated/thunderstorms-day-overcast-rain.svg", + nightMessage: "Thunder rolls through the night sky in {city}.", + nightImgSrc: "./assets/animated/thunderstorms-night-extreme-rain.svg", + }, + mist: { + className: "is-misty", + dayMessage: "It's foggy in {city} today.", + dayImgSrc: "./assets/animated/mist.svg", + nightMessage: "A thick mist settles over {city} on this mysterious night.", + nightImgSrc: "./assets/animated/mist-night.svg", + }, + default: { + className: "is-default", + dayMessage: "The weather in {city} can't be determined today.", + dayImgSrc: "./assets/animated/compass.svg", + nightMessage: + "It's hard to tell what the weather is like tonight in {city}.", + nightImgSrc: "./assets/animated/compass-night.svg", + }, +}; + +const weatherClassNames = [ + "is-cloudy", + "is-clear", + "is-drizzly", + "is-rainy", + "is-snowy", + "is-thunderstorm", + "is-misty", + "is-default", +]; + +/* ********************************* + Mock Data for Testing +********************************* */ + +// Mock data for different weather types to use during testing. +// These mock responses simulate the structure returned by the API, +// including weather conditions, temperatures, and sunrise/sunset times. +const mockWeatherData = { + clear: { + weather: [{ main: "Clear" }], + main: { temp: 25 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + clouds: { + weather: [{ main: "Clouds" }], + main: { temp: 18 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + rain: { + weather: [{ main: "Rain" }], + main: { temp: 15 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + snow: { + weather: [{ main: "Snow" }], + main: { temp: -5 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + thunderstorm: { + weather: [{ main: "Thunderstorm" }], + main: { temp: 20 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + drizzle: { + weather: [{ main: "Drizzle" }], + main: { temp: 17 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + mist: { + weather: [{ main: "Mist" }], + main: { temp: 12 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, + default: { + weather: [{ main: "Default" }], + main: { temp: 12 }, + sys: { + sunrise: Math.floor(Date.now() / 1000) - 7200, // 2 hours ago + sunset: Math.floor(Date.now() / 1000) - 3600, // 1 hour ago, it's night + }, + name: "Mock City", + }, +}; + +/* ********************************* + Helper Functions +********************************* */ + +/** + * Generates the API URL for current weather of a given city. + * + * @param {string} city - The name of the city. + * @returns {string} The complete API URL for fetching current weather data. + */ +const getWeatherUrl = (city) => { + return `${BASE_URL_WEATHER}?q=${encodeURIComponent( + city + )}&units=metric&APPID=${API_KEY}`; +}; + +/** + * Generates the API URL for weather forecast of a given city. + * + * @param {string} city - The name of the city. + * @returns {string} The complete API URL for fetching weather forecast data. + */ +const getForecastUrl = (city) => { + return `${BASE_URL_FORECAST}?q=${encodeURIComponent( + city + )}&units=metric&APPID=${API_KEY}`; +}; + +/** + * Updates the document title to include the currently displayed city name. + */ +const updateDocumentTitle = () => { + document.title = `Weatherington – Currently showing the weather in ${displayedCityName}`; +}; + +/** + * Gets the computed background color of the body element. + * @returns {string} The computed background color in hex or rgb format. + */ +const getBodyBackgroundColor = () => + window.getComputedStyle(document.body).backgroundColor; + +/** + * Updates the meta theme color based on the body background color. + */ +const updateMetaThemeColor = () => { + const metaThemeColor = document.querySelector("meta[name='theme-color']"); + if (metaThemeColor) { + const backgroundColor = getBodyBackgroundColor(); + metaThemeColor.setAttribute("content", backgroundColor); + } +}; + +/** + * Returns the weekday name for a given date string. + * @param {string} dateString - The date string to convert. + * @param {boolean} [isLong=false] - Whether to return the full weekday name. + * @returns {string} - The weekday name. + */ +const getWeekdayName = (dateString, isLong = false) => { + const date = new Date(dateString); + if (isNaN(date)) return ""; // Handle invalid date + const options = { weekday: isLong ? "long" : "short" }; + return date.toLocaleDateString("en-US", options); +}; + +/** + * Formats the temperature by appending the degree symbol. + * @param {number|string} temp - The temperature value. + * @returns {string} - The formatted temperature. + */ +const formatTemperature = (temp) => { + const temperature = parseFloat(temp); + return isNaN(temperature) ? "-" : `${Math.round(temperature)}Β°`; +}; + +/** + * Updates the width of the input field based on its content's pixel width. + * @param {HTMLInputElement} inputElement - The input element to resize. + */ +const updateInputWidth = (inputElement) => { + const temporarySpan = document.createElement("span"); + temporarySpan.style.visibility = "hidden"; + temporarySpan.style.position = "absolute"; + temporarySpan.style.whiteSpace = "pre"; + temporarySpan.style.font = getComputedStyle(inputElement).font; + temporarySpan.textContent = + inputElement.value || inputElement.placeholder || ""; + document.body.appendChild(temporarySpan); + const width = temporarySpan.getBoundingClientRect().width + 2; + document.body.removeChild(temporarySpan); + inputElement.style.width = width + "px"; +}; + +/** + * Updates the ARIA live region to announce changes to screen reader users. + * @param {string} message - The message to announce. + */ +const updateAriaNotification = (message) => { + if (!userHasInteracted) { + // Do not announce if the user hasn't interacted yet + return; + } + + const ariaNotification = document.getElementById("aria-notification"); + if (ariaNotification) { + // Clear the content to ensure the screen reader detects the change + ariaNotification.textContent = ""; + setTimeout(() => { + ariaNotification.textContent = message; + }, 100); + } +}; + +/** + * Fetches weather data from the given API URL or returns mock data for testing + * @param {string} weatherUrl - The API URL for fetching weather data + * @param {string} [mockType] - The weather type to mock (optional) + * @returns {Promise} - The weather data as a JavaScript object + */ +const fetchWeather = async (weatherUrl, mockType = null) => { + // If mockType is provided, return the corresponding mock data + if (useMockData && mockType && mockWeatherData[mockType]) { + // Simulate a network request using a Promise to mimic the behavior of fetching data asynchronously. + return new Promise((resolve) => { + setTimeout(() => { + resolve(mockWeatherData[mockType]); + }, 100); // Simulate a short delay + }); + } + + // Existing fetch logic + try { + const response = await fetch(weatherUrl); + + if (!response.ok) { + let errorMessage = `HTTP error! Status: ${response.status}`; + + // Attempt to parse the error response + try { + const errorData = await response.json(); + if (errorData && errorData.message) { + errorMessage = errorData.message; + } + } catch (parseError) { + // If parsing fails, keep the default message + } + + throw new Error(errorMessage); + } + + const data = await response.json(); + return data; + } catch (error) { + if (error.name === "TypeError" && error.message === "Failed to fetch") { + // Network error + throw new Error("Network error. Please check your internet connection."); + } else { + throw error; // Re-throw the error to be handled later + } + } +}; + +/** + * Creates the city input field in the DOM. + * @param {HTMLElement} parentElement - The parent element to append the input to. + * @param {string} inputValue - The value to set in the input field. + */ +const createCityInput = (parentElement, inputValue = displayedCityName) => { + // Create the input element + const cityInput = document.createElement("input"); + cityInput.type = "text"; + cityInput.id = `city-input`; + cityInput.value = inputValue; + cityInput.autocomplete = "off"; + cityInput.setAttribute("aria-label", `${displayedCityName}`); + + // Disable common Password Managers from injecting themselves in the input field + cityInput.setAttribute("data-1p-ignore", ""); + cityInput.setAttribute("data-bwignore", ""); + cityInput.setAttribute("data-lpignore", "true"); + cityInput.setAttribute("data-form-type", "other"); + + // Append the input to the parentElement + parentElement.appendChild(cityInput); + + // Event listener for 'input' to adjust the width dynamically + cityInput.addEventListener("input", () => { + updateInputWidth(cityInput); + }); + + // Event listener for 'keydown' to handle Enter key press + cityInput.addEventListener("keydown", (event) => { + if (event.key === "Enter") { + handleSearch(event); // Update the city when Enter is pressed + } + }); + + // Event listener for 'click' to select the entire text in the input field + cityInput.addEventListener("click", () => { + cityInput.select(); + }); + + // Event listener for 'blur' to handle when the input loses focus + cityInput.addEventListener("blur", (event) => { + handleSearch(event); // Update the city when input loses focus + }); + + // Wait for fonts to be loaded before adjusting the width + if (document.fonts && document.fonts.ready) { + document.fonts.ready.then(() => { + updateInputWidth(cityInput); + }); + } else { + // Fallback for browsers that do not support document.fonts + window.addEventListener("load", () => { + updateInputWidth(cityInput); + }); + } +}; + +/** + * Determines the type of weather and returns corresponding data + * @param {string} weatherType - The current weather type (e.g., "Clouds") + * @param {boolean} isDaytime - Whether it's currently daytime + * @returns {object} - An object containing the main title, image source, and image alt text + */ +const typeOfWeather = (weatherType, isDaytime) => { + const type = weatherTypes[weatherType.toLowerCase()] || weatherTypes.default; + + // Remove all previous weather classes + app.classList.remove(...weatherClassNames); + + // Add the new weather class if it exists + if (type.className) { + app.classList.add(type.className); + } + + // Add is-nighttime as class on the app container when sun is down + isDaytime + ? app.classList.remove("is-nighttime") + : app.classList.add("is-nighttime"); + + // Update the theme color after class changes + updateMetaThemeColor(); + + // Select message and image based on isDaytime + const mainTitle = isDaytime ? type.dayMessage : type.nightMessage; + const imgSrc = isDaytime ? type.dayImgSrc : type.nightImgSrc; + + return { + mainTitle, + imgSrc, + }; +}; + +/** + * Handles the search functionality when the user inputs a city name. + * @param {Event} event - The event object. + */ +const handleSearch = (event) => { + event.preventDefault(); + + const inputElement = event.target; + let city = inputElement.value.trim(); + + // Save user's input to a global variable + userCityInput = city; + + if (city && city !== apiQueryCity) { + apiQueryCity = city; + + // Set the flag indicating the user has interacted + userHasInteracted = true; + + // Fetch new data + getCurrentWeather(); + getForecast(); + } +}; + +/* ********************************* + Main Functions +********************************* */ + +/** + * Helper to format times based on local time in the city + */ +const formatLocalTime = (timestamp, timezone, options = {}) => { + return new Date((timestamp + timezone) * 1000).toLocaleTimeString("en-GB", { + hour: "2-digit", + minute: "2-digit", + hour12: false, + timeZone: "UTC", + ...options, + }); +}; + +/** + * Helper to set weather today content + */ +const setWeatherTodayContent = ( + temp, + description, + mainTitle, + imgSrc, + sunrise, + sunset +) => { + // Define the sunrise and sunset icons + const sunriseIcon = ` + + + + + + + `; + + const sunsetIcon = ` + + + + + + + + + + + + + + `; + + weatherTodayContainer.innerHTML = ` +
+ +

+

+

It is ${temp}Β° and ${description}.

+
+
+

Time of sunrise today is ${sunrise}

+ +

Time of sunset today is ${sunset}

+ +
+ `; +}; + +/** + * Simplified version of the getCurrentWeather function + */ +const getCurrentWeather = async (mockType = null) => { + try { + const weatherRightNow = await fetchWeather( + getWeatherUrl(apiQueryCity), + mockType + ); + if (!weatherRightNow) { + weatherTodayContainer.innerHTML = ` +

Rain check on the weather!

+

Looks like today’s forecast is a no-show. Check back in a bit!

+ `; + return; + } + + // Update global variables + const { name, weather, main, sys, timezone } = weatherRightNow; + displayedCityName = name; + weatherTypeToday = weather[0].main; + weatherDescriptionToday = weather[0].description; + const temp = Math.round(main.temp); + //updateDocumentTitle(); + + // Determine sunrise, sunset, and current time + const sunrise = formatLocalTime(sys.sunrise, timezone); + const sunset = formatLocalTime(sys.sunset, timezone); + const timeNow = formatLocalTime(Date.now() / 1000, timezone); + + // Determine if it's currently daytime by checking if the current time is between sunrise and sunset. + const isDaytime = timeNow >= sunrise && timeNow < sunset; + const { mainTitle, imgSrc } = typeOfWeather(weatherTypeToday, isDaytime); + + // Update weather container + setWeatherTodayContent( + temp, + weatherDescriptionToday, + mainTitle, + imgSrc, + sunrise, + sunset + ); + + // Update H1 input + const parts = mainTitle.split("{city}"); + const visualH1 = document.getElementById("h1-visual"); + visualH1.innerHTML = parts[0]; + createCityInput(visualH1); // Append the city input field + visualH1.appendChild(document.createTextNode(parts[1])); + + // Announce the updated weather information to screen reader users + const announcement = `${parts[0]}${displayedCityName}${parts[1]} It is ${temp} degrees and ${weatherDescriptionToday}.`; + updateAriaNotification(announcement); + } catch (error) { + console.log(error); + weatherTodayContainer.innerHTML = ` +
+ +

Sorry, we couldn't find a matching city. Please try another:

+

We pray the weather gods are with you this time.

+
+ `; + const h1 = weatherTodayContainer.querySelector( + "#weather-today__greeting h1" + ); + createCityInput(h1, userCityInput); + document.title = `Weatherington – City not found`; + + updateAriaNotification( + `Sorry, we couldn't find a city called ${userCityInput}. Please try another.` + ); + } +}; + +/** + * Fetches and displays the weather forecast for the selected city + */ +const getForecast = async (mockType = null) => { + // Inline helper function to generate the forecast list + const generateForecastList = (dailyTemperatures) => { + const forecastListItem = document.createDocumentFragment(); + + dailyTemperatures.forEach((day) => { + const li = document.createElement("li"); + li.innerHTML = ` + + +

${day.weekdayLong}

+ + + +

Highest temp of the day is ${formatTemperature( + day.highestTempMax + )}

+ + +

Lowest temp of the day is ${formatTemperature( + day.lowestTempMin + )}

+ + `; + forecastListItem.appendChild(li); + }); + + forecastList.innerHTML = ""; // Clear previous list items + forecastList.appendChild(forecastListItem); + }; + + try { + // Fetch weather forecast data for the city + const forecastUrl = getForecastUrl(apiQueryCity); + const forecastData = await fetchWeather(forecastUrl, mockType); + + // Add the forecast title + const forecastTitle = document.createElement("h2"); + forecastTitle.textContent = "5-day forecast"; + forecastTitle.setAttribute("id", "forecast-title"); + weatherForecastTitle.innerHTML = ""; // Clear previous content + weatherForecastTitle.prepend(forecastTitle); + + if (!forecastData) { + // If no data, generate days with dashes directly + const today = new Date(); + let dailyTemperatures = []; + + for (let i = 1; i <= 5; i++) { + let nextDay = new Date(today); + nextDay.setDate(today.getDate() + i); + const weekdayShort = getWeekdayName(nextDay.toISOString()); + const weekdayLong = getWeekdayName(nextDay.toISOString(), true); + dailyTemperatures.push({ + weekdayShort: weekdayShort, + weekdayLong: weekdayLong, + lowestTempMin: "–", + highestTempMax: "–", + }); + } + + generateForecastList(dailyTemperatures); + return; + } + + // Get today's date in 'YYYY-MM-DD' format + const todayDateString = new Date().toISOString().split("T")[0]; + + // Filter out entries that have today's date + const forecastArray = forecastData.list.filter( + (item) => item.dt_txt.slice(0, 10) !== todayDateString + ); + + // Initialize an array to store the results for each day + let dailyTemperatures = []; + + // Loop over forecastArray in steps of 8 to process each day + for (let i = 0; i < forecastArray.length; i += 8) { + // Initialize variables to store the lowest temp_min and highest temp_max for the day + let lowestTempMin = Infinity; + let highestTempMax = -Infinity; + + // Get the weekday + const weekdayShort = getWeekdayName(forecastArray[i].dt_txt); + const weekdayLong = getWeekdayName(forecastArray[i].dt_txt, true); + + // Loop through each of the 8 items for the current day + for (let j = i; j < i + 8 && j < forecastArray.length; j++) { + let tempMin = forecastArray[j].main.temp_min; + let tempMax = forecastArray[j].main.temp_max; + + // Update the lowest temp_min if a lower value is found + if (tempMin < lowestTempMin) { + lowestTempMin = tempMin; + } + + // Update the highest temp_max if a higher value is found + if (tempMax > highestTempMax) { + highestTempMax = tempMax; + } + } + + // Store the results for the current day + dailyTemperatures.push({ + weekdayShort: weekdayShort, + weekdayLong: weekdayLong, + lowestTempMin: Math.round(lowestTempMin), + highestTempMax: Math.round(highestTempMax), + }); + } + + // Generate the forecast list with actual data + generateForecastList(dailyTemperatures); + } catch (error) { + console.log(error); + // Generate days with dashes + const today = new Date(); + let dailyTemperatures = []; + + for (let i = 1; i <= 5; i++) { + let nextDay = new Date(today); + nextDay.setDate(today.getDate() + i); + const weekdayShort = getWeekdayName(nextDay.toISOString()); + const weekdayLong = getWeekdayName(nextDay.toISOString(), true); + dailyTemperatures.push({ + weekdayShort: weekdayShort, + weekdayLong: weekdayLong, + lowestTempMin: "–", + highestTempMax: "–", + }); + } + + // Generate the forecast list with placeholders + generateForecastList(dailyTemperatures); + } +}; + +/* ********************************* + Initial Function Calls +********************************* */ + +if (useMockData) { + // Test with different weather types + const testWeatherType = "snow"; // Change to test different types + getCurrentWeather(testWeatherType); + getForecast(testWeatherType); +} else { + // Use real API data + getCurrentWeather(); + getForecast(); +} diff --git a/style.css b/style.css new file mode 100644 index 000000000..c6d415e19 --- /dev/null +++ b/style.css @@ -0,0 +1,273 @@ +:root { + --blue-light: #bfecff; + --blue-dark: #123e57; + --yellow-light: #fef3cf; + --yellow-dark: #174b4d; + --brown-light: #f1eaea; + --brown-dark: #383a4a; + --gray-light: #eeeeee; + --gray-dark: #464646; +} + +*, +:after, +:before { + box-sizing: border-box; +} + +body { + padding: 0; + margin: 0; + + display: flex; + justify-content: center; + align-items: center; + min-height: 100svh; +} + +body.is-rainy, +body.is-snowy, +body.is-drizzly { + color: var(--blue-dark); + background-color: var(--blue-light); + + &.is-nighttime { + color: var(--blue-light); + background-color: var(--blue-dark); + } +} + +body.is-clear, +body.is-thunderstorm { + color: var(--yellow-dark); + background-color: var(--yellow-light); + + &.is-nighttime { + color: var(--yellow-light); + background-color: var(--blue-dark); + } +} + +body.is-cloudy, +body.is-atmosphere, +body.is-misty { + color: var(--brown-dark); + background-color: var(--brown-light); + + &.is-nighttime { + color: var(--brown-light); + background-color: var(--brown-dark); + } +} + +body.is-default { + color: var(--gray-dark); + background-color: var(--gray-light); + + &.is-nighttime { + color: var(--gray-light); + background-color: var(--gray-dark); + } +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + white-space: nowrap; /* Added to prevent text from wrapping */ +} + +main { + padding: 0.5rem 1.5rem 1.5rem; + max-width: 500px; + display: flex; + flex-direction: column; + min-height: 100svh; + align-items: stretch; + justify-content: space-between; + + @media (min-width: 375px) { + padding: 0.5rem 2rem 2rem; + } + + @media (min-width: 668px) { + min-height: fit-content; + } +} + +h1 { + font-size: 1.75rem; + margin-top: 0; + margin-bottom: 1.5rem; + text-wrap: balance; + + @media (min-width: 375px) { + font-size: 2rem; + } + + @media (min-width: 668px) { + font-size: 2.25rem; + margin-top: 1.25rem; + } +} + +h2 { + font-size: 1.25rem; +} + +p { + font-size: 1.125rem; + margin-top: 0.5rem; +} + +.text-large { + font-size: 1.375rem; + margin-bottom: 1.5em; + + @media (min-width: 668px) { + font-size: 1.5rem; + } +} + +.weather-today__meta { + display: flex; + flex-flow: row; + gap: 0.75rem; + margin-bottom: 2.5rem; + + @media (min-width: 668px) { + margin-bottom: 2.5rem; + } + + .badge { + display: flex; + align-items: center; + gap: 0.5rem; + + font-size: 0.875rem; + font-weight: 600; + + border: 1px solid currentColor; + border-radius: 0.5rem; + padding: 0.375rem 0.75rem 0.375rem 0.6rem; + margin: 0; + + @media (min-width: 375px) { + font-size: 1rem; + } + } + + span { + margin: 0 0.25rem; + } + + .icon path { + fill: currentColor; + } +} + +.weather-today__greeting { + position: relative; + img { + max-width: 12rem; + position: relative; + left: -0.875rem; + } +} + +.weather-forecast__list { + display: flex; + flex-direction: column; + gap: 1rem; + list-style: none; + padding: 0; + margin: 0; + + li { + display: flex; + justify-content: space-between; + position: relative; + + .list-section { + display: flex; + gap: 0.5rem; + + * { + font-weight: 400; + font-size: 1rem; + margin: 0; + + @media (min-width: 375px) { + font-size: 1.25rem; + } + } + } + + &:after { + position: absolute; + content: ""; + width: 100%; + bottom: -10px; + border-bottom: 1px dashed; + } + + &:last-of-type:after { + border-bottom: none; + } + } +} + +.error-message { + &::first-letter { + text-transform: capitalize; + } +} + +[id^="city-input"] { + background: transparent; + border: none; + border-radius: 0; + border-bottom: 2px dashed; + font-size: 1.75rem; + font-weight: 700; + color: currentColor; + padding: 0; + cursor: pointer; + + @media (min-width: 375px) { + font-size: 2rem; + } + + @media (min-width: 678px) { + font-size: 2.25rem; + } + + &:hover { + border-bottom-style: solid; + } + + &::selection { + background-color: #fff; + } + + .is-nighttime & { + &:focus { + background-color: #000; + } + &::selection { + background-color: #000; + } + } + + &:focus { + outline: none; + background-color: #fff; + border-color: transparent; + border-radius: 0.5rem; + } +}