Weather App 🌤

This weather app lets you search for cities and provide the current weather for the location.

How to Use ☂️

To use the website:

1. Please create an ApiKey.js file in the same directory as index.js.
2. Store your own OpenWeather API Key in the OPEN_WEATHER_API_KEY constant as well as your own Unsplash API key in the UNSPLASH_API_KEY constant.
3. Place both constants inside the ApiKey.js file.

Features 🖋

This weather app:

• Provides the current weather data (temperature, perceived temperature, humidity, wind speed) for the user specified city
• Displays different weather icons based on the weather descriptions
• Alerts the user with error messages if the input is empty or the city does not exist
• Toggles between metric and imperial unit system (celsius & m/s vs. fahrenheit & mph)
• Changes the background image based on the user's city input
• Informs the user of the full country name for the city, rather than an abbreviation
• Utilizes the OpenWeather and Unsplash API for weather data and background image, respectively
• Responds to different screen sizes such as tablet and cellphone

Learning Outcomes 👩🏻‍💻

• Practice Asynchronous JavaScript using Promises, Fetch API, Async/Await, .catch error handler
• Understand how to use third party libraries and APIs by reading the documentation
• Practice DOM manipulation and conditional rendering using JavaScript
• Protect sensitive credentials such as API keys
• Modularize code for better readability and the Single Responsibility Principle
• Bundle modules using webpack5 and use webpack loaders and plugins

Demo

Weather App

Demo Usage

Handle the empty input error

Handle the no-city-found error

Responsive design - tablet size

Responsive design - mobile size