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.
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.
<!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=
rel="stylesheet">
<!-- Include Bootstrap Icons -->
<link href=
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=
</body>
</html>
|
Output: