Weather Dashboard

https://weather.aniqa.dev/

🌤️ A detailed light and dark mode dashboard with a complete overview of live weather conditions in the specified city. Option to toggle weather data between Celsius and Fahrenheit units. Sidebar with random major cities weather. Built using the OpenWeather API.

Light Mode

Dark Mode

Tech

• HTML5
• CSS3
• Bootstrap
• JavaScript
• Axios
• OpenWeather API

Key Features

Design

• Fully responsive without using any media queries
• Layout and responsive achieved using Bootstrap
• Styling done through custom CSS
• Light and dark mode themes using CSS variables
• Custom animated icons (https://bas.dev/work/meteocons)
• Custom loading spinner animation that will appear until all data has been downloaded
• Minimalistic and cohesive design
• Subtle shadow usage to increase contrast between certain text elements and icons
• Custom scrollbar styling

Interactive Elements

• Search cities from a database of over 200,000 cities with dynamic autosuggestions
• Geolocation button fetches the user’s current location and updates all content based on user’s city
• Toggle weather data between imperial and metric
• ‘Forecast In Other Cities’ section shows current weather data for 5 random cities from around the world; clicking on the city will update the weather dashboard with that city’s weather data

Additional Functionality/Behind-the-Scenes

• Save user’s last selected city to localStorage
• Save user’s last selected theme to localStorage
• Display custom animated icons using the JSON file that I wrote to integrate with the data received through OpenWeather API
• Reusable functions to make API calls for search, geolocation or clicking on a city in the sidebar panel
• Use forEach() and for loops to display icons, city information, and daily forecast dynamically
• Set the icons alt attribute matching to the weather description
• Formatted UNIX timestamps to display sunset, sunrise and current time are local to the city that is selected
• Change the landscape background image for sunset/sunrise card based on time
• Utilized Axios to make HTTP requests to API

Future Features

• ✅ Autosuggestions for search input
• ✅ Refactor code (after learning new concepts)
• ✅ Add option to download as PWA

Changelog

11/07/2023

• Custom Search Suggestions: Implemented a feature where search suggestions are dynamically generated and appear as the user types, enhancing the user experience by providing immediate, relevant suggestions to aid in the discovery of weather for over 200K cities; additionally, added searchManager object to handle user queries from
• WeatherService Class: Enhanced API handling within the WeatherService class to streamline data fetching processes
• ThemeManager Object: Simplified theme management in the themeManager
• TimeManager Object - Centralized all time-related manipulations within the timeManager object to enhance performance and maintainability of time data transformations
• Objects for SelectedLocationWeather and GlobalWeather - Improved handling of all weather-related data (both for the selected location and the randomized cities in the sidebar)

11/08/2023

• Enabled PWA functionality to improve offline usage and performance on mobile devices:
  • Implemented service worker caching for faster load times and offline access
  • Added manifest file with application icons for a full-screen immersive experience on supported devices
  • Configured metadata for adding to homescreen on mobile devices.