Scribd
Upload
33 views3 pages

Weather App Code

The document consists of two main parts: an HTML file for a weather application user interface and a PHP backend script for fetching weather data from the OpenWeatherMap API. The UI allows users to input a city name and retrieve current weather information along with a 3-day forecast. The PHP script handles API requests, processes the data, and returns it in JSON format, including error handling for invalid inputs or failed requests.

Uploaded by

Vinayaka N
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
33 views3 pages

Weather App Code

The document consists of two main parts: an HTML file for a weather application user interface and a PHP backend script for fetching weather data from the OpenWeatherMap API. The UI allows users to input a city name and retrieve current weather information along with a 3-day forecast. The PHP script handles API requests, processes the data, and returns it in JSON format, including error handling for invalid inputs or failed requests.

Uploaded by

Vinayaka N
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

# index.

php (Main UI and API Call)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
.container { max-width: 400px; margin: auto; padding: 20px; border: 1px solid #ddd; border-radius: 10px; }
input { padding: 10px; width: 80%; margin-bottom: 10px; }
button { padding: 10px; cursor: pointer; }
.weather-info { margin-top: 20px; }
</style>
</head>
<body>

<div class="container">
<h2>Weather Application</h2>
<input type="text" id="city" placeholder="Enter city name">
<button onclick="getWeather()">Get Weather</button>
<div class="weather-info" id="weather-info"></div>
</div>

<script>
function getWeather() {
let city = [Link]('city').value;
if (city === '') {
alert('Please enter a city name');
return;
}
fetch('[Link]?city=' + city)
.then(response => [Link]())
.then(data => {
if ([Link]) {
[Link]('weather-info').innerHTML = '<p>' + [Link] + '</p>';
} else {
[Link]('weather-info').innerHTML = `
<h3>${[Link]}, ${[Link]}</h3>
<p>Temperature: ${[Link]}°C</p>
<p>Weather: ${[Link]}</p>
<h4>3-Day Forecast</h4>
${[Link](day => `<p>${[Link]}: ${[Link]}°C, ${[Link]}</p>`).join('')}
`;
}
});
}
</script>

</body>
</html>
# [Link] (Backend API Fetching)

<?php

header('Content-Type: application/json');

$apiKey = 'YOUR_API_KEY_HERE'; // Replace with your OpenWeatherMap API key


$city = isset($_GET['city']) ? $_GET['city'] : '';

if (empty($city)) {
echo json_encode(["error" => "City name is required"]);
exit;
}

$apiUrl = "[Link]
$forecastUrl = "[Link]

$weatherData = file_get_contents($apiUrl);
$forecastData = file_get_contents($forecastUrl);

if ($weatherData === FALSE || $forecastData === FALSE) {


echo json_encode(["error" => "Could not fetch weather data"]);
exit;
}

$weatherArray = json_decode($weatherData, true);


$forecastArray = json_decode($forecastData, true);

if (isset($weatherArray['cod']) && $weatherArray['cod'] != 200) {


echo json_encode(["error" => "City not found"]);
exit;
}

$response = [
"city" => $weatherArray['name'],
"country" => $weatherArray['sys']['country'],
"temp" => $weatherArray['main']['temp'],
"weather" => $weatherArray['weather'][0]['description'],
"forecast" => []
];

foreach ($forecastArray['list'] as $day) {


$response["forecast"][] = [
"date" => date("Y-m-d", $day['dt']),
"temp" => $day['main']['temp'],
"weather" => $day['weather'][0]['description']
];
}

echo json_encode($response);
?>

You might also like