weather app in javascript

Weather App in JavaScript With Source Code

|

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

Furthermore, the user can check the current weather conditions in their 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, JavaScript, CSS, and HTML were used to build this weather app project.

What is API weather data?

Weather (API) is a programming interface application that allows you to query JavaScript code.

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

What is a 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 your favorite IDE or you can download these projects below just by clicking 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 the API key in JavaScript?

The (API Key) is a combination of letters and numbers that can be accessed or given if you acquire it from a weather service.

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

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

Why creating the Weather App is Important?

The weather app in JS is very important to our daily lives because it provides accurate data on the weather that can be helpful and informative to the people who will use 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’s purpose is to provide instant (Forecasts), a real-time warning, and other information about the future weather.

In addition, this Weather App can provide the public with the best forecasts that can serve as our awareness in our daily lives.

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, can assist users in making informed decisions.

Lastly, you can build a weather app 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 in our daily life because it can be helpful in decision-making we encounter in whether we can decide for ourselves 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 heavy rain or something that can cause danger to humans.

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 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 ensure 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 the Source Code below

Download

Summary

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

I hope that this article has helped you a lot to understand the concept and how to apply these to 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