Create a Weather Template App using CSS & Bootstrap

Create a Weather App in HTML Bootstrap & JavaScript

Last Updated : 23 Jul, 2025

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:

Screenshot-2024-02-14-at-16-19-08-GeeksforGeeks-Weather-App-min

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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" 
          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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
      </script>
    <script src=
"https://momentjs.com/downloads/moment.min.js">
      </script>
    <script src="app.js"></script>
</body>

</html>

JavaScript

const url = 
    'https://api.openweathermap.org/data/2.5/weather';
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/$%7Bdata.weather%5B0%5D.icon%7D.png%60);
    $('#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>');
    }
}

Output:

Create a Weather App in HTML Bootstrap & JavaScript

Create a Weather Template App using CSS & Bootstrap

G

gpancomputer

Improve

Article Tags :

Similar Reads

Build A Weather App in HTML CSS & JavaScript

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 s

Create a Weather Template App using CSS & Bootstrap

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.PrerequisitesHTMLCSSBootstrapApproachThis We

How to create notes taking site using HTML, Bootstrap and JavaScript ?

We are going to make a website that will take our notes and saves them for our future use using HTML, CSS and JavaScript .Prerequisite:Basic understanding of HTML, Bootstrap, and JavaScript.Approach:HTML: We will create the basic framework of the website using HTML.Bootstrap: makes our work easier a

How to Create ToDo App using HTML, CSS, JS and Bootstrap ?

We will create a basic todo app to understand the basics of JavaScript. In this web app, one can create a todo list and can remove specific elements from the list.Features or Functionalities to implement:Â Â Interactive and Responsive designResponsive Grid SystemStore and Delete itemsPrerequisites: Ba

Create a Build A Simple Alarm Clock in HTML CSS & JavaScript

In this article, we will develop an interactive simple Alarm Clock application using HTML, CSS, and JavaScript languages.Develop an alarm application featuring date and time input fields for setting alarms. Implement comprehensive validation to prevent duplicate alarms and enforce a maximum limit of

Create a Weather app using React and Tailwind

React JS is a very famous library for front-end development. In this article, we will walk through the process of building a weather app using React, a popular JavaScript library for building user interfaces(UI). Here we also use Tailwind CSS, a utility-first CSS framework. Here we also use a weathe