A single-page weather application built using React, that provides the current weather conditions of your location.
This weather application is designed to provide users with live weather information of their current location. The app uses the Geolocation API to retrieve the user's current location and the OpenWeatherMap API to retrieve weather data based on the latitude and longitude obtained from the Geolocation API. The user is presented with the current temperature, humidity, weather conditions, sunrise, and sunset times of their location.
Additionally, the app provides a visually appealing user experience by incorporating background images from the Lorem Picsum API and music control features using the React Audio Player dependency. The images change dynamically based on the weather conditions, and users can play, pause, and control the volume of the music with ease.
This project is designed to provide users with a source of inspiration every time they visit the app. The Inspiration API is used to retrieve quotes and present them to the users in the form of a JSON dump of the author and quote. The API uses a cache that expires every hour to ensure that quotes do not get updated during this period.
The application also includes an error message in case the Geolocation API is not supported by the user's browser or if there was an error retrieving the user's location or weather data.
- Clone the repository to your local machine:
git clone https://github.com/<username>/10.4-weather-app.git
- Navigate to the project directory:
cd weather-app
- Install the dependencies:
npm install
- npm install --save react-audio-player
- Start the development server:
npm start
- Open your browser and navigate to http://localhost:3000 to view the app.
Once the project is up and running, the user can allow the browser to access their location to retrieve weather information. The background image and quote will change dynamically based on the weather conditions. The user can also control the music functions using the React Audio Player.
Note: Before you can use the app, you will need to sign up for a free API key from OpenWeatherMap.
- Utilizes the Geolocation API to retrieve the user's current location
- Uses the OpenWeatherMap API to retrieve weather data based on the user's location
- Dynamic background images from the Lorem Picsum API: https://picsum.photos
- Inspiration API provides motivational quotes to the users
- React Audio Player for music control functions
- Built with JavaScript, HTML, and CSS
- AJAX: Asynchronous JavaScript and XML used to make API requests and dynamically update the user interface
