Modern Weather App Using HTML, CSS & JavaScript (With API Integration)
Demo :
Click Video 👇👇👇
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Weather App - FuzzuTech</title>
<style>
body { font-family: Arial, background: #282c34; color: white; text-align: center; padding: 20px; }
.weather-card { background: #3c4048; padding: 20px; border-radius: 15px; max-width: 400px; margin: auto; }
input { padding: 10px; width: 80%; border-radius: 10px; margin-bottom: 10px; }
button { padding: 10px 20px; background: #61dafb; border: none; border-radius: 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>🌦️ Weather App - FuzzuTech</h1>
<div class="weather-card">
<input type="text" id="city" placeholder="Enter City Name">
<button onclick="getWeather()">Get Weather</button>
<div id="result"></div>
</div>
<script>
async function getWeather() {
const city = document.getElementById('city').value;
const apiKey = 'YOUR_API_KEY';
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
const data = await response.json();
document.getElementById('result').innerHTML =
data.cod === 200
? `<h2>${data.name}</h2><p>${data.weather[0].description}</p><p>🌡️ ${data.main.temp}°C</p>`
: `<p>City not found.</p>`;
}
</script>
</body>
</html>
Comments
Post a Comment