Create a Weather Template App using CSS & Bootstrap

Last Updated : 30 Jul, 2024

The Weather Template App showcases a simple weather card layout with input for city names. It dynamically updates weather details such as temperature, weather conditions, humidity, wind speed, and visibility, complemented by a sun icon for sunny forecasts.

Screenshot-2024-02-24-113919

Prerequisites

Approach

This Weather App template provides a user-friendly interface for checking weather conditions. Users can input a city name to retrieve real-time weather data. The layout features a clean design with a weather card displaying temperature, weather condition, humidity, wind speed, and visibility. A sun icon is positioned at the top right corner to indicate sunny weather. The app utilizes Bootstrap for styling and icons, ensuring responsiveness across devices. JavaScript enables dynamic content display and interaction

Example: This example shows the implementation of the above-explained approach.

HTML

<!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>
	<!-- Include Bootstrap CSS -->
	<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
		rel="stylesheet">
	<!-- Include Bootstrap Icons -->
	<link href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"
		rel="stylesheet">
	<style>
		body {
			background-color: #f0f2f5;
		}

		.weather-card {
			max-width: 400px;
			margin: 50px auto;
			padding: 20px;
			border-radius: 10px;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			background-color: #fff;
			position: relative;
			/* To position the sun icon */
		}

		.weather-title {
			font-size: 24px;
			font-weight: bold;
			color: #333;
			margin-bottom: 20px;
		}

		.input-group-text {
			background-color: #fff;
			border: none;
		}

		.weather-icon {
			font-size: 48px;
			margin-bottom: 20px;
		}

		.weather-info {
			font-size: 18px;
			color: #555;
			margin-bottom: 10px;
		}

		.weather-btn {
			background-color: #007bff;
			border: none;
		}

		.weather-btn:hover {
			background-color: #0056b3;
		}

		.sunny-icon {
			position: absolute;
			top: 10px;
			right: 10px;
			color: #ffce00;
			font-size: 48px;
		}
	</style>
</head>

<body>
	<div class="weather-card">
		<div class="row justify-content-end">
			<div class="col-auto">
				<div class="sunny-icon">
					<i class="bi bi-sun-fill"></i>
				</div>
			</div>
		</div>
		<h1 class="weather-title text-center mb-4">
		Weather App</h1>
		<div class="input-group mb-3">
			<input type="text" class="form-control"
				placeholder="Enter Your City Name"
				aria-label="City Name"
				aria-describedby="basic-addon2">
			<button class="btn btn-primary weather-btn"
					type="button" id="button-addon2">Get Weather</button>
		</div>
		<div id="weatherInfo">
			<div class="weather-icon text-center">
				<i class="bi bi-cloud-sun"></i>
			</div>
			<div class="weather-info text-center">
				<p>Temperature: 20°C</p>
				<p>Weather: Sunny</p>
				<p>Humidity: 60%</p>
				<p>Wind Speed: 5 m/s</p>
				<p>Visibility: 10 km</p>
			</div>
		</div>
	</div>

	<!-- Include Bootstrap JS -->
	<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

Output:

Screenshot-2024-02-24-113919

Create a Weather Template App using CSS & Bootstrap

geekcoder2298

Improve

Article Tags :

Create a Weather Template App using CSS & Bootstrap

Prerequisites

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?