A weather app contains a user input field for the user, which takes the input of the city name. Once the user enters the city name and clicks on the button, then the API Request is been sent to the OpenWeatherMap and the response is been retrieved in the application which consists of weather, wind speed, description, humidity, pressure etc.
Preview Image:
Approach:
- First, create the HTML structure add a title for the webpage, and link external Bootstrap CDN links.
- Use Container Class from Bootstrap 5 to create a responsive card component in which the UI elements like the Input field and Button are embedded.
- Create <div> elements to represent the Weather information which is fetched through an API request.
- In the JavaScript code, define the function to retrieve the Weather information of the searched city by handling the input.
- Additionally, define the functions to represent the data in UI, and functions to make the application dynamic by adding various effects.
Example: To demonstrate the basic implementation for a Weather App in HTML, Bootstrap and JavaScript.
HTML
<!DOCTYPE html> <head>
<title>GeeksforGeeks Weather App</title>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link href=
rel="stylesheet">
</head>
<body class="bg-gradient">
<div class="container mt-5">
<div class="card mx-auto text-center
p-4 shadow-lg rounded-3
animate__animated animate__fadeInDown"
style="background: linear-gradient(to right, #f3a37e, #292e49);
max-width: 500px;">
<h2 class="card-title mb-4 display-5 fw-bold"
style="font-family: 'Montserrat',
sans-serif; color: rgb(46, 230, 61);">
GeeksforGeeks Weather
App
</h2>
<div class="mb-3">
<label for="city-input" class="form-label visually-hidden">
Enter City
</label>
<div class="input-group">
<input type="text" class="form-control form-control-lg" id="city-input" placeholder="Enter City">
<button class="btn btn-primary" onclick="getWeather()"
style="background-color: #FF6347; border-color: #FF6347;">
Get Weather
</button>
</div>
</div>
<div id="weather-info" class="mt-4 d-none animate__animated animate__fadeIn">
<h3 id="city-name" class="mb-0 fs-7 fw-bold" style="color: #FFD700;"></h3>
<p id="date" class="text-muted mb-3 fs-6"></p>
<img id="weather-icon" class="mb-3" alt="Weather Icon" style="width: 90px; height: 90px;">
<p id="temperature" class="mb-1 fs-2 text-white fw-bold" style="color: #FFD700;"></p>
<p id="description" class="mb-3 fs-4 text-white" style="color: #FFD700;"></p>
<p id="wind-speed" class="fs-5 text-white" style="color: #FFD700;"></p>
<div id="extra-info" class="mt-4">
</div>
</div>
</div>
</div>
<script src=
</script>
<script src=
</script>
<script src=
</script>
<script src="app.js"></script>
</body>
</html>
|
Javascript
const url = const apiKey = 'f00c38e0279b7bc85480c3fe775d518c';
$(document).ready(function () {
getWeather('Noida');
}); function getWeather() {
const cityName = $('#city-input').val() || 'Noida';
const fullUrl = `${url}?q=${cityName}&appid=${apiKey}&units=metric`;
fetch(fullUrl)
.then(response => response.json())
.then(data => {
if (data.cod === 200) {
displayWeather(data);
} else {
alert('City not found. Please try again.');
}
})
.catch(error => console.error('Error fetching weather data:', error));
} function displayWeather(data) {
$('#city-name').text(`Weather in ${data.name}`);
$('#date').text(moment().format('MMMM Do YYYY, h:mm:ss a'));
$('#temperature').html(`${data.main.temp}°C`);
$('#description').text(data.weather[0].description);
$('#wind-speed').html(`Wind Speed: ${data.wind.speed} m/s`);
$('#weather-icon').attr('src', `http://openweathermap.org/img/w/${data.weather[0].icon}.png`);
$('#weather-info').removeClass('d-none');
$('#extra-info').html(`
<p style="font-weight: bold; font-size: 18px; color: white;">Humidity: ${data.main.humidity}%</p>
<p style="font-weight: bold; font-size: 18px; color: white;">Pressure: ${data.main.pressure} hPa</p>
`);
addWeatherEffects(data.weather[0].main);
} function addWeatherEffects(weatherMain) {
const extraInfo = $('#extra-info');
switch (weatherMain.toLowerCase()) {
case 'rain':
extraInfo.append('<p class="text-info fw-bold">
<i class="fas fa-umbrella"></i>
Rainy day, bring an umbrella!</p>');
break;
case 'clear':
extraInfo.append('<p class="text-success fw-bold">
<i class="fas fa-sun"></i> Cle
ar skies, enjoy the sunshine!</p>');
break;
case 'clouds':
extraInfo.append('<p class="text-warning fw-bold">
<i class="fas fa-cloud"></i> Part
ly cloudy, a comfortable day.</p>');
break;
default:
extraInfo.append('<p class="text-warning fw-bold">
<i class="fas fa-question"></i>
Weather conditions may vary.</p>');
}
} |