Weather Card Web App

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.

Table of Contents

• Features
• Interface
• Prerequisites
• Getting Started
• Running Locally with XAMPP
• Usage
• Contributing
• Initial Contributor

Features

• 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.

Interface

• Search Element:
  

  

• Weather Card:
  

• Weather Cards Sample outputs:
  

Prerequisites

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.

Getting Started

1. Clone the repository to your local machine:

git clone https://github.com/Mabdullahatif/WeatherCard_WebApp.git

2. 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.

3. Upload the project files to your web server.

Running Locally with XAMPP

To run the application locally using XAMPP, follow these steps:

1. Install XAMPP: If you haven't already, download and install XAMPP from the official website for your operating system:

   • XAMPP for Windows
   • XAMPP for macOS
   • XAMPP for Linux

2. 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.

3. 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."

4. 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 within htdocs.

5. 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

6. 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.

Usage

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.

Contributing

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!

Initial Contributor

So far, all the work in this repository is purely done by me.

LinkedIn             Facebook             Instagram             Twitter