Create a Weather App in HTML Bootstrap & JavaScript

Create a Weather App in HTML Bootstrap & JavaScript

Last Updated : 05 Aug, 2024

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/bootstrap@5.3.0/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/bootstrap@5.3.0/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/${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>');
    }
}

Output:

Create a Weather App in HTML Bootstrap & JavaScript

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 Multi Step Form in Bootstrap 5 & JavaScript

Forms are the gateway for interaction between users and web services. As the complexity of data collection increases, so does the need for more user-friendly form interfaces. A multi-step form, by breaking down the data collection process into manageable chunks, enhances user experience and improves

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

Create a Stopwatch using Bootstrap & JavaScript

A stopwatch tracks elapsed time, typically in hours, minutes, seconds, and fractions of a second. It can be started, stopped, and reset, providing precise timing for various activities, such as sports, experiments, or productivity tracking. PrerequisitesHTML BootstrapJavaScriptApproachHTML, Bootstra

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

Create a Math Sprint Game in HTML CSS & JavaScript

The math sprint game presents random math questions with four options. Players click the correct answer, and if correct, it's acknowledged; otherwise, an incorrect answer message is shown. A 20-second timer adds urgency, ending the game. The score (High Score) is displayed, along with buttons to sta

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

How to Create a Pricing Table in Bootstrap?

Pricing tables are essential for showcasing different pricing plans or subscription options for products or services to the user. With the help of the pricing tables plans users can avail their plans accordingly. We will focus on the steps to create a pricing table in Bootstrap. ApproachFirst, creat

Create ChatGPT Template using HTML CSS & JavaScript

Create a customizable ChatGPT interface using HTML, CSS, and JavaScript. Implement features like message input, display area, and toggle buttons for themes. Customize styles and interactions to suit your preferences and requirements. Prerequisites:HTMLCSSJavaScriptApproachCreate a new HTML file and