Weather App In JavaScript With Source Code

The Weather App In JavaScript is a web-based application that can monitor the entire weather condition of a place.

In addition, this simple weather app can be really helpful to our daily living, Because with the help of this we can easily monitor the condition of the weather outside or any specific places.

What is Weather App?

In JavaScript, Weather App is a web project which focuses mainly on gathering weather data.

The user can examine the current state of the climate probability and forecast whether the day will be sunny or cloudy. The user can write down the name of any city in the world.

This JavaScript code was created with JavaScript, CSS, and HTML we can get the weather condition of the place by their latitude and longitude, In order for us to build this kind of web program we just need to register to a weather company so that they will provide an (API Key).

In addition, there are many weather API (Application Programming Interface) that can be used to access the weather and apply to your system such as openweathermap api and fetch API.

Choosing a Weather API

When it comes to weather APIs, there are several options available in the market, including popular ones like OpenWeatherMap and Tomorrow.io. However, many developers prefer using the weather API from Tomorrow.io. This preference stems from its comprehensive features and ease of integration into various applications. Their API provides developers with access to accurate and reliable weather data, allowing them to retrieve current weather conditions, forecasts, and more. Most importantly,  their extensive documentation makes it a preferred choice for developers seeking reliable weather data for their projects.

In terms of the Weather App Using JavaScript features, the user can estimate the current-day climatic probability and determine whether the day will be cloudy or sunny. In the software, the user can write down the name of any city in the world.

Project Output:

This project also includes a significant amount of JavaScript to ensure the project’s functionality.

What is API key in JavaScript?

An API KEY is a (Application Programming Interface) which serve as your permanent access key token that can be define and lets you permit to access or grant by the application to used there weather services.

In addition, you can simply get an API Key by only registering to any weather services. Once you are done in signing in or registered the API Key (APPID) will be sent to your email that been use and you have to confirm it.

Lastly, your weather API can be found always on your account page, which allows you to generate additional (API Keys) if you want.

Project details and technology:

What is a weather API key?

The Weather API is a weather service which used to securely connect to any developed applications which has been created by the developers.

Lastly, some of weather services provide a free API key to be access and use on your web or application development.

What is the best weather data source?

Based on the performance results recognized by New Proof of Performance Results the AccuWeather is considered as the most reliable and accurate source of weather forecast and warning in the entire world.

Furthermore, AccuWeather is an (AMERICAN) weather company which provides a accurate and reliable weather forecasting in the world. The estimated company used worldwide can be around 500 thousands business and government.

How To Build Weather App In JavaScript?

For novices, creating a weather app in JavaScript is a great project. It explains how to utilize the retrieve weather app to call and get data from a third-party service, as well as the fundamentals of the DOM.

This JavaScript Project With Source Code also includes a downloadable JavaScript source code for free, just find the downloadable source code below and click to start downloading.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

To start executing a  Weather App In JavaScript With Source Code , makes sure that you have any platform in creating a JavaScript, CSS, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Importance of Weather App

A web-based weather app is important because it deals with a reliable weather condition and data on weather which is accurate that can be helpful on the users to know an informative condition outside.

In addition, weather monitoring provides an information to each users about weather updates to have an effective planning and immediate response if there is a strong or extreme weather and bad climate events.

Weather App In JavaScript With Source Code: Steps on how to create the project

The code given below is for the html module

<html>

    <head>
        <title>Weather App (IT SOURCECODE)</title>
    </head>

    <body>
        <h1 id="intro">Welcome to Weather App</h1>
        <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>
        <div id="searchContainer">
            <input class="searchControl" type="text" placeholder="Please Enter City Name" id="searchInput">
            <button class="searchControl" id="searchBtn">Go!</button>
        </div>
    </body>
</html>

In the code above given which is the html module of the project.

The code given below is for the css module

<style>
    body {
    background-color: grey;
    background-size: cover;
    background-repeat: no-repeat;
   <!-- icon 2x.png, span class and font weight -->
    background-position: center center;
    color: white;
    text-shadow: 2px 2px 1px black;
    font-family: "Palatino", "Book Antiqua", serif;
}

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

#weatherContainer {
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 1px 1px 5px black;
    padding: 35px;
    border-radius: 10px;
    position: absolute;
    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>

In the code above given which is the css module of the project.

The code given below is for the javascript module

<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>

In the code above given which is the javascript module of the project.

Downloadable Source Code

Summary

Weather Forecasts are widely used and one of the important information that needs to be provided in our daily living, and you now have a clear example to utilize for yourself. I hope you found this lesson helpful, and I wish you luck in coming up with creative applications for them!

This JavaScript Project With Source Code is simply in HTML, CSS, and JavaScript. To start creating this Simple JavaScript Project With Source Code, make sure that you have basic knowledge in HTML, CSS and JavaScript. In this JavaScript project also includes a downloadable source code for free.

Related Articles

• Todo List In JavaScript With Source Code
• Currency Converter Project in JavaScript with Source Code
• Calculator In JavaScript Source Code
• [SOLVED] How To Make A Live Chat In JavaScript With Source Code
• Weather Forecast Project In Python With Source Code

Inquiries

If you have any questions or suggestions about Weather App In JavaScript With Source Code, please feel free to leave a comment below.