Weather App in JavaScript With Source Code

The Weather App in JavaScript is a simple web-based application design and created to predict a weather using a (Weather API) from the different services which provide a weather forecast, we will just need the (Weather API Key) in order to access there services.

Furthermore, the user can check the current weather condition in there specific places or other places nearby and predict whether it will be sunny or cloudy in that day.

The user can enter the name of any city in the world into this weather app.

Lastly, the JavaScript, CSS, and HTML were used to build this weather app project.

What is API weather data?

A weather (API) is a programming interface application which allows you to queried JavaScript code.

In addition, A good weather application can provide a better weather data and (Forecast) data in a easiest way.

What is Weather App in JavaScript?

In JavaScript, Weather App is a simple weather app which is really great project that can be helpful in the prediction of the weather in any location.

In addition, this JavaScript code can be really helpful in your studies as well as if you want to develop your own weather application in the future.

I will provide the entire source code of this project so that you can easily copy and paste it to you favorite IDE or you can download these project below just look the download button.

index.html

<html>

    <head>
        <title>Weather App (Source Code Hero)</title>
    </head>

    <body>
        <h1 id="intro"><center>Welcome to Weather App</center></h1>
      
        <div id="searchContainer">
            <input class="searchControl" type="text" placeholder="Please Enter City Name" id="searchInput">
            <button class="searchControl" id="searchBtn">Go!</button>
        </div>
          <div id="weatherContainer">
            <div id="weatherDescription">
                <h1 id="cityHeader"></h1>
                <div id="weatherMain">
                    <div id="temperature"></div>
                    <div id="weatherDescriptionHeader"></div>
                    <div><img id="documentIconImg"></div>
                </div>
                <hr>
                <div id="windSpeed" class="bottom-details"></div>
                <div id="humidity" class="bottom-details"></div>

            </div>

        </div>
    </body>
</html>
<style>
    body {
    background-color: grey;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    color: white;
    text-shadow: 2px 2px 1px black;
    font-family: "Palatino", "Book Antiqua", serif;
}

#intro {
    
    padding: 15px 25px;
    position: center;
    background-color: skyblue;
}

#weatherContainer {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 5px black;
    padding: 25px;
    width: auto;
    border-radius: 10px;
    visibility: hidden;
}
#weatherContainer h1 {
    margin: 5px;
    font-size: 42px;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#searchContainer {
    padding: 20px;
    margin-left: 37%;
}
#searchContainer input {
    width: 200px;
}
#searchContainer button {
    background-color:skyblue;
    color: white;
    width: 75px;
}
.searchControl {
    box-shadow: 2px 2px 5px skyblue;
    border: none;
    border-radius: 5px;
    padding: 8px;
}
@media (min-width: 768px) {

    #searchContainer input{
        width: 50vh;
        height: 10vh;
    }
    #searchContainer button {
        width: 10vh;
        height: 10vh;
        
    }
}
#weatherMain {
    display: block;
    margin-bottom: 20px;
}
#weatherMain div {
    display: inline-block;
}
#weatherDescriptionHeader {
    font-size: 28px;
    vertical-align: 50%;
}
#temperature {
    font-size: 38px;
    vertical-align: 25%;
}
.bottom-details {
    display: block;
    font-size: 24px;
    text-align: right;
}
hr {
    margin-bottom: 20px;
}
</style>
<script>
    let appId = '71f6779186cc32448b4c412eea65b982';
let units = 'metric'; 
let searchMethod; // q means searching as a string.

function getSearchMethod(searchTerm) {
    if(searchTerm.length === 5 && Number.parseInt(searchTerm) + '' === searchTerm)
        searchMethod = 'zip';
    else 
        searchMethod = 'q';
}

function searchWeather(searchTerm) {
    getSearchMethod(searchTerm);
    fetch(`http://api.openweathermap.org/data/2.5/weather?${searchMethod}=${searchTerm}&APPID=${appId}&units=${units}`)
        .then((result) => {
            return result.json();
        }).then((res) => {
            init(res);
    });
}

function init(resultFromServer) {
    switch (resultFromServer.weather[0].main) {
        case 'Clear':
            document.body.style.backgroundImage = "url('clearPicture.jpg')";
            break;
        
        case 'Clouds':
            document.body.style.backgroundImage = "url('cloudyPicture.jpg')";
            break;

        case 'Rain':
        case 'Drizzle':
            document.body.style.backgroundImage = "url('rainPicture.jpg')";
            break;

        case 'Mist':
            document.body.style.backgroundImage = "url('mistPicture.jpg')";
            break;    
        
        case 'Thunderstorm':
            document.body.style.backgroundImage = "url('stormPicture.jpg')";
            break;
        
        case 'Snow':
            document.body.style.backgroundImage = "url('snowPicture.jpg')";
            break;

        default:
            break;
    }

    let weatherDescriptionHeader = document.getElementById('weatherDescriptionHeader');
    let temperatureElement = document.getElementById('temperature');
    let humidityElement = document.getElementById('humidity');
    let windSpeedElement = document.getElementById('windSpeed');
    let cityHeader = document.getElementById('cityHeader');

    let weatherIcon = document.getElementById('documentIconImg');
    weatherIcon.src = 'http://openweathermap.org/img/w/' + resultFromServer.weather[0].icon + '.png';

    let resultDescription = resultFromServer.weather[0].description;
    weatherDescriptionHeader.innerText = resultDescription.charAt(0).toUpperCase() + resultDescription.slice(1);
    temperatureElement.innerHTML = Math.floor(resultFromServer.main.temp) + '&#176;';
    windSpeedElement.innerHTML = 'Wind Speed: ' + Math.floor(resultFromServer.wind.speed) + ' meter/s';
    cityHeader.innerHTML = resultFromServer.name;
    humidityElement.innerHTML = 'Humidity levels: ' + resultFromServer.main.humidity +  '%';

    setPositionForWeatherInfo();
}

function setPositionForWeatherInfo() {
    let weatherContainer = document.getElementById('weatherContainer');
    let weatherContainerHeight = weatherContainer.clientHeight;
    let weatherContainerWidth = weatherContainer.clientWidth;

    weatherContainer.style.left = `calc(50% - ${weatherContainerWidth/2}px)`;
    weatherContainer.style.top = `calc(50% - ${weatherContainerHeight/1.3}px)`;
    weatherContainer.style.visibility = 'visible';
}

document.getElementById('searchBtn').addEventListener('click', () => {
    let searchTerm = document.getElementById('searchInput').value;
    if(searchTerm)
        searchWeather(searchTerm);
});
</script>

What is API key in JavaScript?

The (API Key) is a combination of letters and numbers this can be access or can given if you acquire it to a weather services.

You can easily avail the API Key if you register yourself or register to get the key you want to access there weather services and apply it or install to your weather app project.

Lastly, this key can easily installed once you have a some basic knowledge on computer programming.

Why creating the Weather App is Important?

The weather app in JS is very important to our daily living because it provides an accurate data of the weather that can be helpful and informative to the people who will used this kind of application.

Real-time and on-the-go weather forecasts have become a basic expectation for most people as smartphones provide quicker and faster access to information than ever before.

People are significantly more concerned about their health and the influence it has on the environment in the post-pandemic world.

What is the purpose of this Weather App?

The Weather App JS purpose is to provide an instant (Forecasts), provide a real-time warnings and other information about the future weather.

In addition, this Weather App can provide the public a best forecasts that can served as our awareness in our daily living.

This Weather App using JS, HTML and CSS is something that everyone has to deal with, and correct information about it, such as what we expected, which can assist users in making informed decisions.

Lastly, you can build a weather app in your so that people may use your weather applications for any device to know exactly when the weather is going to change.

Why do I need the Weather app?

This JavaScript Weather App is very needed to our daily life because it can be helpful in decision making we encounter in weather we can make a decision to our self whether we need to go outside or not.

What does the Weather app do?

A Weather App in JS simply works by providing a quick and reliable weather forecast, with some weather apps they can deliver a severe weather forecast which is really helpful if that location can have a heavy rain or something that can cause danger to human.

About the Project

The following method demonstrates how to develop a Weather Application in Vanilla JavaScript that uses the Open Weather Map API to retrieve weather data for each coordinate.

In addition, you can create your own unique weather app you just need to have a basic knowledge on JavaScript as the Scripting language, you can use different functions such as const temp, span class as well as different API such as openweathermap api and fetch API.

In order to function well your weather app you need to get the latitude and longitude of the specific places you want to know.

Project Details and Technology

Project Name:Weather App In JavaScript
AbstractMaking a weather app in JavaScript is a great project for beginners. It covers the basics of the DOM as well as how to use the fetch weather app API javascript to call and obtain data from a third-party service.
Language/s Used:JavaScript
JavaScript version (Recommended):ES2015
Database:N/A
Type:Web Application
Developer:Source Code Hero
Updates:0

To assure the project’s functionality, it also includes a substantial amount of javascript.

Steps how to run the project

Time needed: 3 minutes.

PROCEDURE

  • Step 1: Download Source Code

    To begin, locate the downloaded source code file below and click to begin the download process.

    online clinic management system in php

  • Step 2: Extract File


    When you’ve completed downloading the file, go to its location and right-click it to extract it.

    Puzzle Game In Python Extract File

  • Step 3: Run the system


    To begin executing the project, double-click the index.html file inside the folder.
    registration form in html with javascript validation download

Download Source Code below

Summary

This system is a fully functional project for Online developers interested in learning more about web application.

I hope that this article has help you a lot to really understand the concept and how to apply these on your future weather application project. If you have any questions just comment below so that we can address your problem. Have a nice day and God bless.

Inquiries

Please leave a comment below if you have any questions or comments about Weather App In JavaScript.

Leave a Comment