Scribd
Upload
11 views2 pages

Weather App Project

The document outlines a Weather App project built using HTML, CSS, and PHP. It includes an HTML form for users to input a city name, CSS for styling the app, and PHP code to fetch and display weather data from the OpenWeatherMap API. The app provides temperature, humidity, wind speed, and weather conditions based on user input.

Uploaded by

Mohit Thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views2 pages

Weather App Project

The document outlines a Weather App project built using HTML, CSS, and PHP. It includes an HTML form for users to input a city name, CSS for styling the app, and PHP code to fetch and display weather data from the OpenWeatherMap API. The app provides temperature, humidity, wind speed, and weather conditions based on user input.

Uploaded by

Mohit Thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Weather App Project (HTML, CSS, PHP)

HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Weather App</h1>
<form method="post">
<input type="text" name="city" placeholder="Enter city name" required>
<button type="submit">Get Weather</button>
</form>
<?php include 'weather.php'; ?>
</div>
</body>
</html>

CSS (style.css):
body {
font-family: Arial, sans-serif;
background: linear-gradient(to top right, #00aaff, #00ffaa);
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.container {
background: white;
padding: 20px 30px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
text-align: center;
}

input, button {
padding: 10px;
margin: 10px;
font-size: 16px;
}

PHP (weather.php):
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$city = htmlspecialchars($_POST['city']);
$apiKey = "YOUR_API_KEY_HERE";
$apiUrl =
"https://api.openweathermap.org/data/2.5/weather?q={$city}&appid={$apiKey}&units=metric"
;

$weather_data = file_get_contents($apiUrl);
$weather = json_decode($weather_data);

if ($weather && $weather->cod == 200) {


$celsius = $weather->main->temp;
$fahrenheit = ($celsius * 9/5) + 32;
$description = $weather->weather[0]->description;
$humidity = $weather->main->humidity;
$wind = $weather->wind->speed;
$icon = $weather->weather[0]->icon;
echo "<div class='weather-info'>";
echo "<h2>Weather in {$city}</h2>";
echo "<img src='https://openweathermap.org/img/wn/{$icon}@2x.png'>";
echo "<p>Condition: {$description}</p>";
echo "<p>Temperature: {$celsius}&deg;C / {$fahrenheit}&deg;F</p>";
echo "<p>Humidity: {$humidity}%</p>";
echo "<p>Wind Speed: {$wind} m/s</p>";
echo "</div>";
} else {
echo "<p>City not found. Please try again.</p>";
}
}
?>

You might also like