How to make Weather App using Openweathermap API | Javascript - Responsive Website

Sdílet
Vložit
  • čas přidán 26. 08. 2024

Komentáře • 196

  • @teenii9453
    @teenii9453 Před rokem +9

    hi, I can't use API. now, "One Call API" is updated to version 3.0, and it seems I must pay for use.

  • @himabimdimwim
    @himabimdimwim Před 2 lety +22

    Incredible video. I can tell that a lot of work and effort went into creating this project and sharing it on CZcams. You managed to cover the html, css, javascript, and API's in a single video. Good stuff!

  • @joshuajohnk1198
    @joshuajohnk1198 Před 10 měsíci +2

    your video helped me lots mate, i have to submit my weather app project tomo, gonna pull an all nighter, and your tutorial gave me the hope and motivation i needed. keep uploading champ!!!

  • @PankajKumar-tu9nv
    @PankajKumar-tu9nv Před 2 lety +4

    awesome bhai.. great work.. I am very dissapointed as your subscribers are below 2k.. you deserve atleast 500k subscribers.. btw keep up good work brother.. you will shine one day.

  • @rutvikbhoj4737
    @rutvikbhoj4737 Před rokem

    Best! For those who are not able to use the API as it is not free now. Just sign up as Student and you will get the API free for 6 months.

  • @LOSTCLOUD_
    @LOSTCLOUD_ Před 2 lety +2

    Hello ashis sir ! Thanks for tge video ... now im gonna use this on my minor project...lots of love keep creating 💙💙💙.... i want another hot video on my major project

  • @tahzib1451
    @tahzib1451 Před 2 lety +5

    having a search city option and translating the latitudes and longitudes to city name would be nice....

    • @kevinwaag9976
      @kevinwaag9976 Před rokem

      there is an api that does it for you. a quick search will tell you the name but it does exist!

  • @sayyidnaeemulhaquemayankak1627

    Super Explanation ,Thanks Sir 🥰🥰🥰. I got an Assignment Task Make Weather App by Fetchto Weather API...I done By another CZcams Video.if i saw this video Before I definitely use this Video to My Assignment.....
    But I do One thing For me As well ass Our Classmates .I share this link to WhatsApp Group....As well As i follow your video fore future Web Development Projects..
    Thanks Sir from Heart 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

  • @ekamjyotsinghnalwa7828
    @ekamjyotsinghnalwa7828 Před 2 lety +1

    can u help me please?
    I have created a search button but am unable to show the furure forecast for the cities I am searching.
    I have a viva on 5th, plz help me!!!

  • @ashishgarg5232
    @ashishgarg5232 Před rokem +1

    Hi asish my api is not showing in console and not working how can I fix this... please reply...I have tried current weather api aslo but that also not working

  • @achalgupta8053
    @achalgupta8053 Před 2 lety +2

    Thank you so much bro this is very helpful video for my project 😊

  • @hope_less
    @hope_less Před rokem +2

    hey asish great tutorial . I'm not able to use the api and it is giving me an error 401 can you make a video on that or please just help me with this

  • @paowiicarina
    @paowiicarina Před 2 lety +1

    where is the search bar and the last code doesnt work!! please update this tutorial!!

  • @peytoncastillo4508
    @peytoncastillo4508 Před 2 lety

    best weather tutorial I've found! Subscribed!

  • @ankurverma8792
    @ankurverma8792 Před 2 lety +1

    its for only particular city we want it for another city also

  • @debojitmandal8670
    @debojitmandal8670 Před měsícem

    There a flaw here it just shows ur current location wht if i want to search a location

  • @rishabhgaur3181
    @rishabhgaur3181 Před rokem

    I don't understand where this info came from src and integrity

  • @jhefersonp.gavilancenteno5259

    Dude you are the best. It is safe and 100% works

  • @BL4Z3-eq1cm
    @BL4Z3-eq1cm Před 2 měsíci +1

    what is the name of your API_KEY

  • @user-vv6lg8wd4j
    @user-vv6lg8wd4j Před 7 měsíci +1

    Thanks to sharing

  • @himanshukumar-gc9lb
    @himanshukumar-gc9lb Před měsícem

    Sir but how we can change the city

  • @alara3407
    @alara3407 Před rokem

    i have followed all the steps but from 45m i started having issues that i cant fix pls help no matter what i did i could not fix the issues it gives error or doesnt run and nothing shows up on console either

  • @sarthakmoriya541
    @sarthakmoriya541 Před rokem +1

    is location dynamic too?? or always kolkata?????

  • @saicharan3520
    @saicharan3520 Před 2 lety +7

    Sir plz provide the code down so that we can easily copy and paste it 😁

  • @harshsaroi9932
    @harshsaroi9932 Před rokem

    Thanks bro 👍 your video helped me a lot doing my project

  • @coreykingjr
    @coreykingjr Před 2 měsíci

    Open with live server isn't a option for me

  • @LOSTCLOUD_
    @LOSTCLOUD_ Před 2 lety +3

    Hey big bro... my proposal was accepted today in the title weather app (your) in minor project...Now hope your code runs smooth...🙂 but my supervisor said me i should store the data of several days in database but i dont know how to do this ... No worries i am gonna try..

  • @origamisiler2897
    @origamisiler2897 Před rokem

    Thank you very much. Good this mission is done. Thanks.

  • @GigglingGumba
    @GigglingGumba Před rokem

    Hi, my future-forecast box is too big. It overlaps with "others". What should I do?

  • @mr_devilclash725
    @mr_devilclash725 Před 23 dny

    Not able to use API please help

  • @LalitKumar-uf7bz
    @LalitKumar-uf7bz Před rokem

    hello sir ,there is a problem during completing this project, the problem is " problem is to take subscription for one Api call use". please tell me how to handle it as quiqly as

  • @nicobonora4093
    @nicobonora4093 Před 2 lety

    Thanks man, i was struggling figuring out why the hell my fetch wasn't working and I realized I didn't include in the link lol

  • @igu642
    @igu642 Před rokem

    so i can purchase api only include cirrent and daily?

  • @pandu2535
    @pandu2535 Před 2 lety

    you didnt show how you change the image src to match the api JSON response. how to do it?

  • @divyarawat5611
    @divyarawat5611 Před 2 lety

    hey, time-zone offset is keep getting 19800 which is Asia/Kolkata even lat n longitude is correct after accessing the location. Why is this keep happening? I used my account's API key

  • @shipraagrawal1759
    @shipraagrawal1759 Před rokem

    hey I am not able to use the open weather api!

  • @575csed7
    @575csed7 Před rokem

    I am not getting modifications in time what i should do?

  • @purvikajagtap3859
    @purvikajagtap3859 Před 9 měsíci

    It shows the status as 401 Unauthorized. Please tell me if you have any solution..also I think this version is not free

  • @Enter_vikram
    @Enter_vikram Před 2 lety

    Thanks for making this vedio.
    rather than typing the entire code can i just copy it for my final year project (does it gona work if i copy)

  • @kumarshubham3110
    @kumarshubham3110 Před rokem

    where the option to change the city

  • @vikshithrd4380
    @vikshithrd4380 Před rokem

    How to find weather of other city??

  • @clementmassy3248
    @clementmassy3248 Před 2 lety

    How can we convert day in French for weather forecast ?

  • @ayushdaharia9609
    @ayushdaharia9609 Před 3 lety +2

    Sir please make a video of how to get weather of different location

  • @gurtejsingh6690
    @gurtejsingh6690 Před 2 lety +4

    Hi Asish, was wondering if you had added a search input element into the weather app or were planning to do so? Would love to learn how to do that.

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      Hi Gurtej. Sorry for the delayed response. You can use the weather api’s get weather by location endpoint to get the information. Also the weather based on location is limited for open weather map api. So there is limitation on search. You would have to deep dive into api documentation to make it work.

    • @nj10018
      @nj10018 Před rokem

      hi , have you solve the problem of location, if yes please replay me

  • @shrayanshitomar3555
    @shrayanshitomar3555 Před 3 lety +1

    I have made a different weather app with a search bar using the same openweathermap api but when I deploy it on netlify, it won't work like it is working locally. The api have stopped working and I am not getting any details. What shall I do ?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety

      Do you have any errors in console? Nd what is the api response?

  • @coreykingjr
    @coreykingjr Před 2 měsíci

    There is no update to the web site after making changes in the style.css file

  • @chamith_z1298
    @chamith_z1298 Před rokem

    thank bro
    good luck

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 Před rokem

    Great tutorial thanks!

    • @ashishgarg5232
      @ashishgarg5232 Před rokem

      Hii can you tell me how fix api issue .. my api is not working( not showing in console)

  • @rokuroaion5686
    @rokuroaion5686 Před rokem

    Do you have this kind of weather on mobile using android studio?

  • @tirumalahugar2633
    @tirumalahugar2633 Před rokem

    Bro I'm 401 error why it is showing anyobe guide me

  • @rjdadagaming9886
    @rjdadagaming9886 Před rokem

    do you have a weather forecast project report

  • @igu642
    @igu642 Před rokem

    ❤❤❤❤

  • @pragatikumar5362
    @pragatikumar5362 Před rokem

    api invalid it shows why ???

  • @melpodrougou9178
    @melpodrougou9178 Před rokem

    very helpfull

  • @olanrewajurasheed3040

    Please can you recommend any free weatherAPI, the new version of this requires an update

  • @alexbarasa3816
    @alexbarasa3816 Před 2 lety +1

    Just what I was looking for. Please can I use your design?

  • @devvtravels5760
    @devvtravels5760 Před rokem

    It is showing invalid api key

  • @shrivatsasanatani
    @shrivatsasanatani Před 2 lety

    how can I change location????

  • @kingpro8437
    @kingpro8437 Před rokem

    The weather elements under the function part doesn't work for me.

  • @nuresamahendra7864
    @nuresamahendra7864 Před 2 lety

    can i use the learning results on your youtube channel for my portfolio ?

  • @user-vi5wn3wk3g
    @user-vi5wn3wk3g Před 2 lety

    can you please teach me another way without using the geo location in same code

  • @malektrabelsi8500
    @malektrabelsi8500 Před 2 lety

    it said "Cannot read properties of undefined (reading 'forEach')"
    please can someone tell me why

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      you may have used array.forEach method.
      the array that you used to loop is undefined and not an array… check where the array is being loaded.

  • @ayushdaharia9609
    @ayushdaharia9609 Před 3 lety +1

    which location details is showing ? and can you also help me i have added a search bar and a search button but how should i use to get weather details of any particular location
    please help me

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety +1

      To use search with this there are two options.
      1. Find an api that supports getting weather details using the text. Then implement that here.
      2. Use another api to convert the location typed into search bar into longitude and latitude. Then use that to get the weather.
      Hope this helps!!

    • @ayushdaharia9609
      @ayushdaharia9609 Před 3 lety +1

      @@AsishGeorgeTech can we use 2 api at the same time ?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety +1

      Yes you can make the request to the second api based on the response from the first.

  • @vaishnavibhosale2272
    @vaishnavibhosale2272 Před rokem

    Anyone have a report on weather forecasting

  • @qaw392
    @qaw392 Před rokem

    Thank you

  • @muhmenparvaze5223
    @muhmenparvaze5223 Před 3 lety +1

    Hey there
    Do the data get updated by itself? The weather Data

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety +1

      When the api is called, after the response is received a function is called. It updates the data.

  • @madhakuday8057
    @madhakuday8057 Před 2 lety

    thanks bro

  • @Teddinotteddy
    @Teddinotteddy Před 3 lety +1

    I'm not really sure how you were able to call next day weather data so can you go a little more in depth on how you did that in a future video?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety +3

      Sorry for the late response. I did not have to call next day weather data. It was already present in that particular api response itself. That is the reason why I chose one call api. One call Api has data of the current day and the data for the upcoming week. So by just one api call you can have all the data.

    • @tahzib1451
      @tahzib1451 Před 2 lety +1

      the weather data comes from the API that u need to insert in your .js file before starting the script....

    • @chhavimanichoubey9437
      @chhavimanichoubey9437 Před 11 měsíci

      yes in daily data below hourly data @@AsishGeorgeTech

  • @unknown-vq8so
    @unknown-vq8so Před 2 lety

    If we want to display hourly data with that, how can we display it? Without refreshing the browser

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      You would have to create a timer function that calls the api every ine hour. When the api call is gets the response it will load the ui without refreshing

  • @letsvibeinfinite
    @letsvibeinfinite Před 7 měsíci

    thanks

  • @buddireethikachovudary938

    Incredible video. Sir, if u don't mind could you give any suggestion what should I do if my function getWeatherData is not working.??

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety +1

      1. Check if the function is being triggered.
      2. Check if parameters are sent properly
      3. API key is set or not.
      4. If there is any error on calling axios, check why the errror might have happened.

  • @shwethamahendrakar4384

    if u can share images it will help us a lot

  • @louzynerd129
    @louzynerd129 Před 2 lety +1

    Hi, I'm getting this error
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'daily')
    at showWeatherData
    I looked at your code and it's the same in that section and i can't find another "daily" that you typed somewhere else

    • @heathology
      @heathology Před rokem +1

      I had a similar issue but for the data.current in the showWeatherData() function.

    • @irfankobber7097
      @irfankobber7097 Před rokem +1

      @@heathology how did you fix the data.current error?

    • @ArjunaPandava
      @ArjunaPandava Před rokem

      guys i used API_KEY.. it worked for me instead of data.current

    • @rheyasharma2548
      @rheyasharma2548 Před 7 měsíci

      how did you fix it
      @@heathology

  • @koppipochi
    @koppipochi Před 3 lety +2

    Hello sir, can I ask if the visual studio is the only available for coding this weather app? Is it possible if I use sublime? Thank you

  • @sarthakvaghela4477
    @sarthakvaghela4477 Před 2 lety

    at 43:13 my console gives me an error on ur codes 19th line saying weather.js:19
    Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
    pls help!

  • @BikashAdhikari
    @BikashAdhikari Před 2 lety

    It looks like the API is no longer free. Can you please check and let me know. It says my API key is invalid.

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety +1

      If you are using my api key, its usage limit has exceeded.. maybe that’s why.

  • @sakshiprajapati7897
    @sakshiprajapati7897 Před 2 lety

    i am facing problem while setting background url..it's not working no image is showing in background even I am following properly guidance to your vedio...please help ..tell me....please proper instructions....one by one

    • @ненад-1
      @ненад-1 Před 2 lety

      If you use Visual Studio, if you press the crtl button and click on a link in the editor, it should open image for you if you wrote the link correctly.

    • @sakshiprajapati7897
      @sakshiprajapati7897 Před 2 lety

      @@ненад-1 thank you done

  • @shreenithirscse9031
    @shreenithirscse9031 Před rokem

    it was a great way of approach but I ran into this error
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'forEach')
    at showWeatherData (home.js:71:20)
    at home.js:38:13
    what do I do...? i have followed exactly what you've said in this video and I have used current weather data API since one call api was not available.

  • @bijayghosh6128
    @bijayghosh6128 Před 2 lety +1

    I tried so many times, but status code : 401 unauthorized.

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      Api key may be missing

    • @bijayghosh6128
      @bijayghosh6128 Před 2 lety

      @@AsishGeorgeTech but I pasted the exact API key from my profile. And reviewed several times.

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety +1

      Are you using that api key while calling the api? Can you use postman to test the api call externally?

    • @rheyasharma2548
      @rheyasharma2548 Před 7 měsíci

      I did it shows the same error still.@@AsishGeorgeTech

  • @Will-xl7xp
    @Will-xl7xp Před 2 lety +1

    5:37 - any one know whats the hotkey to select all those p elements and replacement with div's so quick?. good stuff!

  • @erey2790
    @erey2790 Před 2 lety

    great

  • @ankurverma8792
    @ankurverma8792 Před 2 lety

    is this google looking ui

  • @abegabeg22
    @abegabeg22 Před 2 lety

    Hi, I’m having an error on the console showing 401 unauthorized which states I have INVALID API Key and my API Key is correctly imputed. Waiting patiently for your reply

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      Its the API Key itself the issue. Either you may have missed some characters or added some invisible characters or the api key might have become invalid. If that’s the latter is the case, try to generate a new api key and try.

    • @tomkingg
      @tomkingg Před 2 lety

      @@AsishGeorgeTech I also have the same problem. Read somewhere that maybe its cause of the free plan

  • @poojitha9906
    @poojitha9906 Před 3 lety +2

    Hello Sir, Can you help me how to get the weather of different locations by adding an api. I am new to the coding

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety

      Ok Poojitha will try to make the video that gets weather of different locations.
      If you want an overall idea, you need to add a search bar to get the input from the user. Based on that input you have to check the latitude and longitude of the location. And then get the weather data.
      Or you would have to search an api that gives the response to the location entered.
      Try to read through some docs on how to do that. Will try to make a video on this later next week!

    • @poojitha9906
      @poojitha9906 Před 3 lety +1

      @@AsishGeorgeTech Ok Sir, thankyou

    • @ayushdaharia9609
      @ayushdaharia9609 Před 3 lety

      Did you find how to get weather of different location ?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety

      As I said above, I did not do that. That is yet to be done.

    • @poojitha9906
      @poojitha9906 Před 3 lety

      @@AsishGeorgeTech Sir , I had given the input to search the location but unable to get the api for the location entered..Can you guide me

  • @tummalaashritha9978
    @tummalaashritha9978 Před 2 lety

    sir have u done a video for different location

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      Hey! I have done it for New York but it is with React Native. You can check it out.
      czcams.com/video/H5xIWY7pL-k/video.html

  • @cryptocrazeee4672
    @cryptocrazeee4672 Před rokem

    Anyone know how to add a search function to this so you can search any city?

  • @BoredBricks
    @BoredBricks Před 2 lety

    You never got the icons to work properly to the current weather...

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      True. But it was pretty straightforward though.

    • @vortex4900
      @vortex4900 Před 2 lety +2

      Can you please tell me a way to get the night icons working properly ?

  • @muhammeteminhamsioglu2566

    which design pattern did you use on this project?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      Not used any design pattern as this was just a small application that was not for production.

  • @arunaraje3820
    @arunaraje3820 Před 2 lety

    Does this project have backend ?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      No. It uses open api. The backend api is already available for free.

  • @connieb7009
    @connieb7009 Před 2 lety

    Hi! I was following your video and my code did not work after 55:40, when you moved the divs from the HTML to the JS. Do you know why?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      You might have missed something.

    • @connieb7009
      @connieb7009 Před 2 lety

      @@AsishGeorgeTech I don’t believe so because I went back to your code and hit copy and paste from GitHub to double check and that didn’t work. Could it have been the API from open weather?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 2 lety

      Are you getting response from the api?

    • @muhammadhanifbinsamsudin1863
      @muhammadhanifbinsamsudin1863 Před 2 lety +1

      same problem here, any update?

    • @Liam22Debono
      @Liam22Debono Před 8 měsíci

      @@AsishGeorgeTech I have the same issue and cant manage to proceed :/ after i moved to the JS its no longer working. I checked the syntax and went through the video again but nothing seems to fix it. Any help please?

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 Před rokem

    Thanks for the video. It's a bit hard to hear you though.

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před rokem

      Thank you and sorry about that. I am trying to improve on the audio side now.

  • @devmonika02
    @devmonika02 Před 3 lety

    hello, i am trying same code to access api data but as google has blocked location tracking through navigator for "http" i am not able to fetch api. is there any way that i can get"https" without ssl certificate for website as i am just doing this project for learning pupose. And yes, are u using secure connection "https"?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety

      i dont think so. i was using localhost which is http. but i did not face any such issue. can you enable the location for the site, so that you can use the location

    • @devmonika02
      @devmonika02 Před 3 lety

      @@AsishGeorgeTech Thanks for your reply. I am unable to change the location settings of site because chrome disabled the location settings by default. is there any other way i can find position coords for user?

  • @souravmishra2503
    @souravmishra2503 Před 3 lety

    Is this one call api free?
    I use my regular api key but it says invalid API key

  • @jesseobed2773
    @jesseobed2773 Před 2 lety

    Hlo @asish george Tech
    praise the lord
    can I get the code files of this website

  • @S-Lomar
    @S-Lomar Před rokem

    🥰🤩😍😍😍🤩🥰🥰🤩🤩😍😍😍

  • @Teddinotteddy
    @Teddinotteddy Před 3 lety

    The site that you have deployed seems to have no data. Do you know why?

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety

      I just checked. It seems to be working fine for me. Can please check if you have disabled the location for the site?

    • @Teddinotteddy
      @Teddinotteddy Před 3 lety +1

      @@AsishGeorgeTech Oh it was turned off never mind. 👍

    • @AsishGeorgeTech
      @AsishGeorgeTech  Před 3 lety

      Yep I will do a fix so that if location is off it shows weather of a default location.

  • @Chungs_3
    @Chungs_3 Před 2 lety

    34:12

  • @nj10018
    @nj10018 Před rokem

    hey , can i have your contact , i have query