Build A Weather App in HTML CSS & JavaScript

Create a Weather App in HTML Bootstrap & 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 speed, description, etc.

Preview Image:

Approach:

Create the Weather App UI Structure using the HTML elements like <div>, <h1>, <input> and <button>. Embed all the essential CDN links for Icons, Fonts, etc.
Once the structure is created, the styling properties for each element like padding, box-shadow, transition, attractive effects like hovering, etc are been applied.
In the main JavaScript file, the overall behavior of the application is been defined.
Firstly, we are specifying the API URL of OpenWeatherMap. Then we are specifying the unique API key. By defaul,t the Weather of the Pune location is been shown when the application is loaded.
Then by using the async function, we are returning the wwather of the city which is entered by the user. If the city is not valid, then an error message is been shown to the user.
Once the details are fetched, then these details are been represented in the weatherShowFn().

Example: This example describes the basic implementation for a Weather App in HTML CSS and JavaScript,

Javascript

const url =
    'https://api.openweathermap.org/data/2.5/weather';
const apiKey =
    'f00c38e0279b7bc85480c3fe775d518c';
 
$(document).ready(function () {
    weatherFn('Pune');
});
 
async function weatherFn(cName) {
    const temp =
        `${url}?q=${cName}&appid=${apiKey}&units=metric`;
    try {
        const res = await fetch(temp);
        const data = await res.json();
        if (res.ok) {
            weatherShowFn(data);
        } else {
            alert('City not found. Please try again.');
        }
    } catch (error) {
        console.error('Error fetching weather data:', error);
    }
}
 
function weatherShowFn(data) {
    $('#city-name').text(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',
            `...`);
    $('#weather-info').fadeIn();
}

HTML

<!DOCTYPE html>
 
<head>
    <link rel="stylesheet" href="style2.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 rel="stylesheet" href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap">
    <title>GFG App</title>
</head>
 
<body>
    <div class="container">
        <div class="weather-card">
            <h1 style="color: green;">
                w3wiki
            </h1>
            <h3>
                Weather App
            </h3>
            <input type="text" id="city-input"
                   placeholder="Enter city name">
            <button id="city-input-btn"
                    onclick="weatherFn($('#city-input').val())">
                    Get Weather
            </button>
            <div id="weather-info"
                 class="animate__animated animate__fadeIn">
                <h3 id="city-name"></h3>
                <p id="date"></p>
                <img id="weather-icon" src="" alt="Weather Icon">
                <p id="temperature"></p>
                <p id="description"></p>
                <p id="wind-speed"></p>
            </div>
        </div>
    </div>
    <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="script2.js"></script>
</body>
 
</html>

CSS

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(to right, #4CAF50, #2196F3);
}
 
.container {
    text-align: center;
}
 
.weather-card {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    width: 450px;
}
 
.weather-card:hover {
    transform: scale(1.05);
}
 
#city-input {
    padding: 15px;
    margin: 10px 0;
    width: 70%;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
 
#city-input:focus {
    outline: none;
    border-color: #2196F3;
}
 
#city-input::placeholder {
    color: #aaa;
}
 
#city-input-btn {
    padding: 10px;
    background-color: #2196F3;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}
 
#city-input-btn:hover {
    background-color: #1565C0;
}
 
#weather-info {
    display: none;
}
 
#weather-icon {
    width: 100px;
    height: 100px;
}
 
#temperature {
    font-size: 24px;
    font-weight: bold;
    margin: 8px 0;
}
 
#description {
    font-size: 18px;
    margin-bottom: 10px;
}
 
#wind-speed {
    font-size: 16px;
    color: rgb(255, 0, 0);
}
 
#date {
    font-size: 14px;
    color: rgb(255, 0, 0);
}

Output:

Tags:

#Dev Scripter 2024 #JavaScript-Projects #Dev Scripter #JavaScript #Project #Web Technologies