PHP Animated Weather Dashboard
Build a weather dashboard with animated weather icons (rain, sun, clouds, snow) and PHP cURL API integration.
PHPCSSAnimationAPIDashboard
Overview
Create a weather dashboard with CSS-animated weather icons. PHP fetches real weather data from an API and renders animated conditions.
Weather Fetcher (weather.php)
php
<?php
function getWeather(string $city): array {
$url = "https://wttr.in/" . urlencode($city) . "?format=j1";
$ch = curl_init($url);
curl_setopt_array($ch, [
CURLOPT_RETURNTRANSFER => true,
CURLOPT_TIMEOUT => 10,
CURLOPT_USERAGENT => 'PHP Weather App',
]);
$response = curl_exec($ch);
curl_close($ch);
$data = json_decode($response, true);
$current = $data['current_condition'][0] ?? [];
return [
'temp' => $current['temp_C'] ?? 'N/A',
'feels' => $current['FeelsLikeC'] ?? 'N/A',
'humidity' => $current['humidity'] ?? 'N/A',
'wind' => $current['windspeedKmph'] ?? 'N/A',
'desc' => $current['weatherDesc'][0]['value'] ?? 'Unknown',
];
}
?>Main Dashboard (index.php)
php
<?php
require 'weather.php';
$city = $_GET['city'] ?? 'New York';
$weather = getWeather($city);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Dashboard</title>
<style>
body { background: linear-gradient(135deg, #1a1a2e, #16213e); color: #fff; font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.card { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); padding: 3rem; border-radius: 24px; text-align: center; min-width: 350px; }
.temp { font-size: 5rem; font-weight: bold; }
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.detail div { background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 12px; }
.sun { width: 60px; height: 60px; background: #ffd32a; border-radius: 50%; margin: 0 auto; animation: glow 2s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 30px #ffd32a, 0 0 60px #ffd32a; } }
</style>
</head>
<body>
<div class="card">
<div class="sun"></div>
<h2><?= htmlspecialchars($city) ?></h2>
<div class="temp"><?= $weather['temp'] ?>°C</div>
<p style="opacity:0.7"><?= htmlspecialchars($weather['desc']) ?></p>
<div class="detail">
<div>������ <?= $weather['humidity'] ?>%<br><small>Humidity</small></div>
<div>������ <?= $weather['wind'] ?> km/h<br><small>Wind</small></div>
<div>������ <?= $weather['feels'] ?>°C<br><small>Feels like</small></div>
</div>
<form style="margin-top:2rem" method="GET">
<input name="city" placeholder="Enter city..." value="<?= htmlspecialchars($city) ?>" style="padding:10px 16px;border-radius:10px;border:none;font-size:1rem;width:70%">
<button style="padding:10px 20px;background:#6c63ff;color:#fff;border:none;border-radius:10px;cursor:pointer">Search</button>
</form>
</div>
</body>
</html>Technologies
- PHP — cURL API integration, data mapping - CSS — animated weather icons, glassmorphism - JavaScript — optional live updates
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!