This is a simple web application that allows users to check the weather for a specific city and displays it in a stylish "weather card." The application fetches weather data from the OpenWeatherMap API and displays it along with a background image from Unsplash. Users can input the name of a city, and the application will provide the current temperature, weather description, and city name.
- Features
- Interface
- Prerequisites
- Getting Started
- Running Locally with XAMPP
- Usage
- Contributing
- Initial Contributor
- Fetches real-time weather data from the OpenWeatherMap API.
- Displays weather information in a visually appealing "weather card."
- Automatically sets a background image related to the weather from Unsplash.
- Responsive design for different screen sizes.
Before you begin, ensure you have met the following requirements:
- You need to have an OpenWeatherMap API Key to fetch weather data.
- You need to have a Unsplash API Access Key to fetch background images.
- Clone the repository to your local machine:
git clone https://github.com/Mabdullahatif/WeatherCard_WebApp.git
- Create a file named
config.php
in the project root directory and add your OpenWeatherMap API key and Unsplash API access key as follows:
<?php
$openWeatherMapApiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
$unsplashApiKey = 'YOUR_UNSPLASH_API_ACCESS_KEY';
Replace YOUR_OPENWEATHERMAP_API_KEY
and YOUR_UNSPLASH_API_ACCESS_KEY
with your API keys.
- Upload the project files to your web server.
To run the application locally using XAMPP, follow these steps:
-
Install XAMPP: If you haven't already, download and install XAMPP from the official website for your operating system:
-
Start XAMPP: After installation, start the XAMPP control panel and ensure that both the Apache (web server) and MySQL (database server) services are running. You can usually start them by clicking the "Start" button next to each service.
-
Create a New Project Folder: Create a new folder in XAMPP's web server directory (usually
htdocs
). You can name the folder anything you like, but for this example, let's call it "weather-app." -
Move Your PHP Code: Move your PHP code and any necessary files (like the
config.php
file with API keys) into the "weather-app" folder you just created withinhtdocs
. -
Access Your Code in a Web Browser: Open your web browser and navigate to the following URL, replacing
"weather-app"
with the actual name of your project folder:http://localhost/weather-app
-
Testing Your PHP Code: You should now see your PHP application running on your local XAMPP server. You can enter a city name and test your weather card application locally.
Remember to configure your config.php
file with the actual API keys you have for OpenWeatherMap and Unsplash.
Open the web application in your browser by accessing the project URL. Enter the name of the city for which you want to check the weather in the input field. Click the "Search" button or press Enter. The weather information will be displayed in a weather card with a background image related to the weather.
Feel free to contribute to this project by submitting bug reports, feature requests, or pull requests. Let's keep the spirit of Assembly programming alive!
So far, all the work in this repository is purely done by me.