Weather App In Javascript With Source Code

September 7, 2021July 26, 2021 by angel jude suarez

Weather App In Javascript With Source Code

The Weather App In Javascript is a fun project that focuses on simple weather forecasting. The user can examine the current state of the climate probability and forecast whether the day will be sunny or cloudy. In the software, the user can write down the name of any city in the world. This Javascript Project With Source Code was created with JavaScript, CSS, and HTML.

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. This project also includes a significant amount of javascript to ensure the project’s functionality.

Watch the video here to see the full running source code of the Weather App in JavaScript

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 api javascript 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.

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

Time needed: 5 minutes.

These are the steps on how to create Weather App In Javascript With Source Code

Step 1: Create a folder.
First, create a folder and named it.
Step 2: Open the folder in “Sublime Text”.
Second ,after creating a folder, open it in “sublime text“.
Step 3: Create a html file.
Third, create a “html” file and save it as “index.html“

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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

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

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>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

<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) + '°';

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.

Weather App In Javascript Output

ABOUT PROJECT	PROJECT DETAILS
Project Name :	Weather App In Javascript
Project Platform :	JavaScript
Programming Language Used:	php,javascript,html,css
Developer Name :	itsourcecode.com
IDE Tool (Recommended):	Sublime
Project Type :	Web Application
Database:	None
Upload Date:	July 26, 2021

Run Quick Virus Scan for secure Download

Run Quick Scan for secure Download

Downloadable Source Code

Summary

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

Inquiries

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

Leave a Comment Cancel reply