Welcome to my weather dashboard app! With this app, you can view the current and forecasted weather conditions for any city in the world.
This app was built to help improve my skills with working with APIs and accessing data from a back-end server. I learned how to use the OpenWeatherMap API to fetch weather data and use it to dynamically update a webpage's HTML and CSS. I also learned how to work with Leaflet, a map data framework, and Geoapify, a location-based API that I used to add an autocomplete feature for city searches.
While working on this project, I gained valuable experience in front-end development using HTML, CSS, and JavaScript. I hope you enjoy using the app as much as I enjoyed building it!
To access the app, navigate to the link below in a browser on a device that supports a wide layout (or alternatively on mobile).
https://cozy-sprinkles-a45830.netlify.app/
You can search for a city by using the search bar at the top left of the page or by clicking on a recently searched city below the search bar. To make your search more specific, you can follow the city name with a comma and its country code (please refer to ISO 3166 for codes).
You can also limit your searches to UK cities by checking the 'UK' radio button below the search bar, and if the API is unable to find a city that matches your search term, you will receive appropriate feedback.
If the API is able to find a city that matches your search term, you will be presented with the weather conditions for that city.
The weather conditions are displayed in two sections: the current weather conditions and the forecasted weather conditions.
In the current weather conditions section, you can view current weather information (including wind speed and direction), the current date and time, and the location via an interactive map.
In the forecast section, you can view information about the weather for every third hour for the next 5-6 days. You can view the forecast for a specific day by clicking on one of the day 'tabs'. Each tab displays the maximum and minimum temperature for that day.
Successful city searches are stored on your local browser storage and are used to dynamically update the Recent Searches section of the webpage. A maximum of eight recent searches are displayed, listed in order of most recent to least recent. You can remove a single recent search from local storage by clicking the 'x' in the top right corner of its button.
The weather dashboard is now mobile-friendly! The following image demonstrates the functionality on mobile.
There is a smart city search feature which uses autocomplete to provide suggestions as you type, making it easy to find the city you're looking for. Simply click on a suggestion to initiate a search.
Get the weather information for any city in the world, displayed in terms of the local time. This means you can get accurate and timely weather forecasts no matter where you are.
When you make a search, you'll get a map of the city's location. You can zoom in and out to explore the area.
Forecasts are only available every third hour, with a maximum of 40 forecasts (up to 5-6 days). It is not currently possible to include a chance of precipitation in the forecasts due to the limited data available (only rain volume in mm for 3 hours is provided).
The web app currently has limited support for browser sizes other than wide desktop or mobile. It may not display or function correctly on browsers with intermediate sizes.
The icon image quality is poor, which makes it difficult to increase its size, and the icons themselves are quite dated.
Right now, the app chains together a series of get requests before using the modified data to call another function. In the future, I want to use promises and handle asynchronous calls better by breaking the get requests into separate functions. This will make the app easier to maintain and perhaps faster as well.
Another thing I'd like to improve is the app's support for intermediate browser sizes. Currently, it works well on wide desktop browsers and mobile devices, but there's not much support for sizes in between. I want to make the app more responsive and look good on all browser sizes. I found a solution for making a container scrollable to help with mobile layouts, but I think it can be done better, using CSS Grid or Flexbox.
The app's layout and design work fine, but I would like to make it nicer and more modern. I will work on the layout and color scheme in future to make it more attractive and sleek. I also think it would be a good idea to use higher quality weather icons to make for a better overall experience, and this resource looks like it might help.
The weather icons provided by the OpenWeatherMap API are grouped into the following: Thunderstorm, Drizzle, Rain, Snow, Atmosphere, Clear, Clouds. It might be worth finding images to represent each of these groups and then use them as a background image for the forecast section for that day. At the moment a golden colour is used to highlight the day tabs, but to the untrained eye, this might indicate sunny weather. Instead, if these tabs were coloured neutrally but its background was an image representing the group (e.g. a rainy image to represent rain, a snowy image to represent snow) then this might improve both the look and intuitiveness of the app.
Three sites were a big help for understanding how the weather data could be presented.
Other credits:
- OpenWeatherMap
- Geocoding API for getting latitude and longitude to use with the following two APIs
- Current Weather API
- 5 day / 3 hour API
- Fields in API response
- Weather conditions / Weather icons
- Font Awesome
- jQuery Docs
- Autocomplete - jQuery UI Docs, in particular grafting a
.select()event listener - Leaflet for including an interactive map
- Geoapify API for helping to include an autocomplete feature
- Google Fonts for importing Lato
- Changing IMG SVG styles with CSS [Stack Overflow] for understanding how to use the CSS rule
filter: invert() sepia() saturate() hue-rotate();to adjust the colour of an svg image - Colin Lord - How To Create Horizontal Scrolling Containers [codeburst]
- Chrome Capture [Chrome Webstore] gif-making tool
- GIF Optimizer compressing gifs
- Poole Yacht Club for this nifty wind direction svg
- Kevin Powell - The closest thing we have to a CSS parent selector [YouTube] for understanding
focus-within - Erik Flowers - Weather Icons
- How to calculate wind speed and wind direction for understanding what 'meteorological' wind means
- How do we measure precipitation [Windy.app] for helping to understand chance of rain percentage in forecasts
- Building a Weather App using JavaScript & CSS for cool relevant design ideas
- Shachee Swadia - A Beginner's Guide to Creating a Map Using Leaflet.js [sitepoint]
- OpenStreetMap used by Leaflet for the map
- [jQuery Themes]