This weather app allows users to check current weather information and forecasts based on either city names or geographical coordinates (latitude and longitude). It utilizes modern JavaScript features like async/await, Promises, and fetch to retrieve weather data from the OpenWeatherMap API. The application is styled using SCSS, making use of variables, mixins, and nested rules for better maintainability and customization.
The app is built with a responsive design to work smoothly across different devices, and it hides sensitive API keys by leveraging serverless functions hosted on Netlify. This approach keeps the API key secure and prevents unauthorized access.
- JavaScript (ES6+): The app leverages modern JavaScript features such as
async/await,Promises, andfetchfor asynchronous programming and efficient API handling. - SCSS: SCSS is used for styling the application. It provides features like variables, nesting, and mixins for clean, reusable, and scalable styles.
- Serverless Functions (Netlify): Sensitive API keys are securely handled by serverless functions, ensuring that they are not exposed in the client-side code.
- OpenWeatherMap API: The app fetches weather data from the OpenWeatherMap API for current weather and forecast information.
- Weather Search: Users can search for weather data by city name or geographical coordinates (latitude and longitude).
- Responsive Design: The app adapts to different screen sizes, ensuring it works well on mobile, tablet, and desktop devices.
- Serverless API Key Handling: The app hides the OpenWeatherMap API key by using serverless functions, keeping sensitive information secure.
- SCSS Styling: SCSS is used for efficient, maintainable styles with features like variables, mixins, and nesting.
You can access the live demo of the app here. Test the app live here.
