{"id":21334642,"url":"https://github.com/zayedrais/weatherapp","last_synced_at":"2026-02-06T05:02:09.089Z","repository":{"id":219560926,"uuid":"144883500","full_name":"zayedrais/WeatherApp","owner":"zayedrais","description":"Weather App with Nodejs","archived":false,"fork":false,"pushed_at":"2018-09-13T13:27:54.000Z","size":1735,"stargazers_count":1,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T19:46:47.498Z","etag":null,"topics":["demo","nodejs","openweather-api","openweathermap","temperature","tutorial","weather","weather-data","weatherapi","weatherapp","webapp"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zayedrais.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-08-15T17:32:32.000Z","updated_at":"2021-01-16T17:36:08.000Z","dependencies_parsed_at":"2024-01-28T13:06:20.928Z","dependency_job_id":null,"html_url":"https://github.com/zayedrais/WeatherApp","commit_stats":null,"previous_names":["zayedrais/weatherapp"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zayedrais/WeatherApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zayedrais%2FWeatherApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zayedrais%2FWeatherApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zayedrais%2FWeatherApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zayedrais%2FWeatherApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zayedrais","download_url":"https://codeload.github.com/zayedrais/WeatherApp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zayedrais%2FWeatherApp/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29151558,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","nodejs","openweather-api","openweathermap","temperature","tutorial","weather","weather-data","weatherapi","weatherapp","webapp"],"created_at":"2024-11-21T23:24:10.881Z","updated_at":"2026-02-06T05:02:09.072Z","avatar_url":"https://github.com/zayedrais.png","language":"JavaScript","readme":"\u003ch2\u003eBUILD A WEATHER WEBSITE WITH NODE.JS + EXPRESS + GOOGLEMAP + OPENWEATHER\u003c/h2\u003e\r\nIn this tutorial you’ll learn, how to make call Google maps API to get the latitude and longitude of the city and pass to the Openweather API and display the current temperature of the city.\r\n\r\nHere we are making a web app, where users can type in a city name and get real-time weather data instantly displayed on their screen.\r\n\r\nBefore going to this tutorial, we need pre-setup for the project build.\r\n\r\nLive project Demo here \u003ca href=https://weather-nodejs.herokuapp.com \u003eWeather App \u003c/a\u003e\r\n\u003c/br\u003e\r\n\u003cb\u003eFile structure look like-\u003c/b\u003e\r\n\u003cpre\u003e\r\n|WeatherApp\r\n |--WeatherApi\r\n   |--getWeather.js\r\n |--geocode\r\n   |--geocode.js\r\n |--public\r\n   |--js\r\n      |--postrequest.js\r\n |--views\r\n    |--index.html\r\n |--app.js\r\n |--package.json\r\n \u003c/pre\u003e\r\n\u003ch3\u003ePre-Project Setup\u003c/h3\u003e\r\n\r\nHere’s what you’ll need:\r\n\r\n  \u003cli\u003e  OpenWeatherMap.org account. It’s a quick signup.\u003c/li\u003e\r\n  \u003cli\u003e  Node.js: Visit the official Node.js website to download and install Node, if you haven’t already. If you want to know, what is a node, how to install, check here my previous post? Why Node.js is favourite among developers.\r\n   \u003c/li\u003e \r\n\u003ch3\u003eStep 1: OpenWeatherMap\u003c/h3\u003e\r\n\r\nif you want to play with APIs, OpenWeatherMap is a good place to start. They actually provide 11 different APIs all related to weather that you can access.\r\n\r\nFor this project, we are using the Free ‘Current Weather’ API. go to this link and sign up for an account.\r\n\r\nOnce signed in, select the API keys tab. Here you can Create a Key on the right-hand side of the page. Enter a name anything works and select Generate. Your API Key will appear on the left. Copy this key for later.\r\n\r\nNow go to the API tab to know the details knowledge of API, and select API doc of the current weather data. and come to “By geographic coordinates” section, see once how API will show the data.\r\n\u003ch3\u003eStep 2: Setting up the project\u003c/h3\u003e\r\n\r\n\u003cli\u003eCreate an empty directory named WeatherApp and run: \u003c/li\u003e \r\n\r\n\u003cpre\u003enpm init\u003c/pre\u003e\r\n\r\n\u003cli\u003e  Fill out the required information to initialize the project. \u003c/li\u003e \r\n\u003cli\u003e  Create a file named app.js — this file will have the main code for our application. \u003c/li\u003e \r\n\r\nBuilding the API call\r\n\r\nTo make our API call, we’ll be using a popular npm module called request. the request has millions of downloads and is a module that simplifies the code needed to make an HTTP request in a node.\r\n\r\nInstall request by running:\r\n\r\n\u003cpre\u003enpm install request --save \u003c/pre\u003e\r\n\r\nNow have to install express npm module.\r\n\r\nExpress.js is a web application framework for Node.js. It provides various features that make web application development fast and easy.\r\n\r\n\u003cpre\u003enpm install express --save\u003c/pre\u003e\r\n\r\nIf you want to install the latest version of a module of npm.\r\n\r\n\u003cpre\u003enpm install Modulename@VerionNo. --save \u003c/pre\u003e\r\n\r\nCreate a new folder inside your project directory give a name as “geocode” and add filegecode.js and add below code here.\r\n\u003cpre\u003e\r\nconst request = require('request'); \r\nvar geocodeAddress =(address,callback) =\u003e {\r\nvar encodeAddress = encodeURIComponent(address); \r\nrequest ({\r\nurl:`https://maps.googleapis.com/maps/api/geocode/json?address=${encodeAddress}`, \r\njson:true \r\n},(error,response,body)=\u003e {\r\nif(error) \r\n{\r\ncallback('Unable to conncet google Servers');\r\n}\r\nelse if(body.status === 'ZERO_RESULTS')\r\n{\r\ncallback('Unable to find address');\r\n}\r\nelse if(body.status === 'OK')\r\n{\r\ncallback(undefined,{ \r\naddress: body.results[0].formatted_address, \r\nlatitude: body.results[0].geometry.location.lat, \r\nlongitude: body.results[0].geometry.location.lng \r\n});\r\n} \r\n}); \r\n} \r\nmodule.exports.getAddress = geocodeAddress;\r\n\u003c/pre\u003e\r\n\r\nCreate a new folder inside your project directory as “WeatherApi” and add file getWeather.jsfile and add below code here.\r\n\u003cpre\u003e\r\n////weather api call\r\nconst request =require('request'); \r\nvar getWeather = (lat,lon,callback) =\u003e { \r\nrequest ({ \r\nurl: ​https://api.openweathermap.org/data/2.5/weather?lat=${lat}\u0026lon=${lon}\u0026appid=KEYID`, \r\njson: true\r\n},(error,response,body)=\u003e\r\n{\r\n if(!error \u0026\u0026 response.statusCode === 200) \r\n{ \r\ncallback(undefined,{ \r\nTemp: body.main.temp \r\n});\r\n} \r\nelse {\r\ncallback('unable to fetch weather'); \r\n} \r\n}); \r\n}; \r\nmodule.exports.getWeather = getWeather; \r\n////\r\n\u003c/pre\u003e\r\nThe above code has to paste your key which is copied from Openweather API key\r\n\u003cpre\u003e\r\nhttps://api.openweathermap.org/data/2.5/weather?lat=${lat}\u0026lon=${lon}\u0026appid=KEYID\r\n\u003c/pre\u003e\r\n\r\nand KEYID replaced by your API KeyID.\r\n\r\nNow create a new folder for “view” to type the city name and get the current weather data and add file index.html and add below code here.\r\ncode be find in view folder index.html\r\nFor this project, we are using an AJAX post method to display the temperature of the city. create new folder “public “and add new folder JS and add new file name as postrequest.js. and add the below code here.\r\n\u003cpre\u003e\r\n$(document).ready(function () { \r\n// SUBMIT FORM \r\n$(\"#weatherForm\").submit( (event) =\u003e {\r\n// Prevent the form from submitting via the browser. \r\nevent.preventDefault(); \r\najaxPost();\r\n});\r\nfunction ajaxPost() { \r\n// PREPARE FORM DATA\r\nvar formData = {\r\n cityname: $(\"#cityname\").val(),\r\n}\r\n// DO POST \r\n$.ajax({\r\ntype: \"POST\",\r\n contentType: \"application/json\",\r\nurl: window.location + \"api/customers/save\",\r\ndata: JSON.stringify(formData),\r\ndataType: 'json',\r\nsuccess: (output)=\u003e { \r\n$(\"#postResultDiv\").html(\"\u003cp\u003e\" +\r\n\"\u003cbr\u003e\" +\r\n\"\" + JSON.stringify(`\u003ccode\u003e ${output.addname} \u003c/code\u003e Current Tempeature is \u003ccode\u003e${output.temp}\u003csup\u003eo\u003c/sup\u003eC \u003c/code\u003e`) + \"\u003c/p\u003e\"); \r\n},\r\nerror: (e) =\u003e {\r\nalert(\"Error!\"); \r\nconsole.log(\"ERROR: \", e); \r\n}\r\n}); \r\n// Reset FormData after Posting \r\nresetData(); \r\n} \r\nfunction resetData() {\r\n$(\"#citytname\").val(\"\"); \r\n}\r\n})\r\n\u003c/pre\u003e\r\nRun your code\r\n\r\nNow app is ready for a run.\r\n\r\nType the below code for a run the app from project root directory\r\n\u003cpre\u003e\r\nnode app.js\r\n\u003c/pre\u003e\r\nNow open your browser and visit:- localhost:8081, type a city name into the field and hit submit! You would see the current temperature of the city.\r\n\u003cpre\u003e\r\nhttp://localhost:8081/\r\n\u003c/pre\u003e\r\nApp demo: Live \u003ca href=https://weather-nodejs.herokuapp.com \u003eWeather App site \u003ca\u003e\r\n  \u003cbr\u003e\r\nFull tutorial in \u003ca href=http://www.tecoquest.com/2018/09/08/build-a-weather-website-with-node-js-express-googlemap-openweather\u003eTecoquest\u003c/a\u003e\r\n\r\n\r\n \r\n\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzayedrais%2Fweatherapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzayedrais%2Fweatherapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzayedrais%2Fweatherapp/lists"}