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

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 DownloadDownloadable 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
- 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
Inquiries
If you have any questions or suggestions about Weather App In Javascript With Source Code , please feel free to leave a comment below.