WhetherWeatherApp

A web app to display the weather and forecast for the next 7 days for cities all over the world.

Getting Started

Install Eleventy

npm install -g @11ty/eleventy

Run Eleventy

eleventy --serve

Install Bulma

npm install bulma

Now navigate to http://localhost:8080 to see your site.

Hot reloading is enabled, so any changes you make to your files will be reflected in the browser.

Features

Has a number of features, so you can check the weather across the globe.

1. Has a clear Dashboard that shows all the cities that can be checked at the time
2. City Icons are clickable in order to access a more focused view - all cities are clickable
3. City Focused view includes:
   • The current temperature and wind speed for that location
   • Maximum Temperature for the day
   • Maximum WindSpeeds for the day
   • A 7-Day weather forecast with icons
   • And a dashboard navigation button to get you back to the home page
     • This can also be done by clicking the WhetherWeather Icon

Site Prive

WhetherWeather Site

Sample Image

My Learnings

• How to access data from a file, and include the most up to date information in my website
• Getting to use Bulma as a CSS alternative, definitely had some pros and cons.
• Starting to use JavaScript to make my sites more dynamic.

Author

This project was created by Leanne Ahern.

Icons

Cloud Favicon - Clouds icons created by judanna - Flaticon Copyright C - in footer - Copyright icons created by Prosymbols Premium - Flaticon Sun Icon - Sun icons created by Freepik - Flaticon Clouds and Sun Icon - Sun icons created by Freepik - Flaticon Wind Icon - Wind icons created by Freepik - Flaticon Rain Icon - Rain icons created by Freepik - Flaticon Snowflake Icon - Snow icons created by Freepik - Flaticon Sleet Icon - Sleet icons created by Freepik - Flaticon Thunder Icon - Thunder icons created by Freepik - Flaticon Meterology Vector - Image by vectorjuice on Freepik

Technologies

• Eleventy

• Bulma

• Weather Data pulled from Open-Meteo.com API