Это видео недоступно.
Сожалеем об этом.
How to make Weather App using Openweathermap API | Javascript - Responsive Website
HTML-код
- Опубликовано: 12 авг 2024
- I tried to make a weather website. I have used the OpenWeatherMap API for this project. This is made with HTML CSS JS and deployed using Netlify. Hope this helps you.
The first time when I tried this project, it took more than 5 hours for me to finish this project that you are watching in 1 hour. So if you take more than that time do take your time. Do not be worried that you are not able to complete it in time. Chill and Keep coding. 😀
Deployed Site: elastic-benz-d00394.netlify.app/
The Link to the GitHub repo is github.com/asishgeorge/weathe...
Timecodes
0:00 - Intro
0:40 - Make Files
1:05 - Creating HTML
10:40 - Styling the Page
34:58 - Getting the Elements in JS
37:54 - Updating the Date and Time Value
45:30 - OpenWeatherMap - Overview
48:15 - Get Latitude and Longitude from Navigator
50:35 - Calling the OpenWeatherMap API
55:29 - Render API data in Site
01:08:20 - Final Touches
01:10:58 - Deploying the Site to Netlify
01:11:56 - Conclusion
Laptop I use: amzn.to/3glrqzo
Join Discord Community: / discord
Follow me on :
Instagram: / asish.george
LinkedIn: / asish-george
Twitter: / asishgeorg
Website: asishgeorge.in
Buy me a Coffee:
www.buymeacoffee.com/asishgeorge
#html #css #js
hi, I can't use API. now, "One Call API" is updated to version 3.0, and it seems I must pay for use.
have you found a free api yet?
I've same issue here as well. The updated version requires payment
Ne too
@@olanrewajurasheed3040 no just select subscribe you will find free api but with limited requests
same problem
Incredible video. I can tell that a lot of work and effort went into creating this project and sharing it on RUclips. You managed to cover the html, css, javascript, and API's in a single video. Good stuff!
Glad you enjoyed it!
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!!!
Thank you ❤️
best weather tutorial I've found! Subscribed!
Thanks ❤️
Thank you very much. Good this mission is done. Thanks.
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
Thanks bro 👍 your video helped me a lot doing my project
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.
Thank you so much. One day 🤞
Thank you so much bro this is very helpful video for my project 😊
Glad you liked it
Dude you are the best. It is safe and 100% works
Thank you 😊
thank bro
good luck
Thanks to sharing
Glad you liked it
Great tutorial thanks!
Hii can you tell me how fix api issue .. my api is not working( not showing in console)
thanks bro
very helpfull
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.
thanks
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
having a search city option and translating the latitudes and longitudes to city name would be nice....
there is an api that does it for you. a quick search will tell you the name but it does exist!
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!!!
Hi, my future-forecast box is too big. It overlaps with "others". What should I do?
Super Explanation ,Thanks Sir 🥰🥰🥰. I got an Assignment Task Make Weather App by Fetchto Weather API...I done By another RUclips 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 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰
glad you liked it.😀
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)
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
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
you didnt show how you change the image src to match the api JSON response. how to do it?
Thank you
You're welcome
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
❤❤❤❤
can i use the learning results on your youtube channel for my portfolio ?
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.
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.
hi , have you solve the problem of location, if yes please replay me
How can we convert day in French for weather forecast ?
great
thank u 😁
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
its for only particular city we want it for another city also
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..
why they always ask for database :v
I don't understand where this info came from src and integrity
Do you have this kind of weather on mobile using android studio?
Please can you recommend any free weatherAPI, the new version of this requires an update
Sir please make a video of how to get weather of different location
Will try to do that.
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
so i can purchase api only include cirrent and daily?
It shows the status as 401 Unauthorized. Please tell me if you have any solution..also I think this version is not free
I am not getting modifications in time what i should do?
where is the search bar and the last code doesnt work!! please update this tutorial!!
5:37 - any one know whats the hotkey to select all those p elements and replacement with div's so quick?. good stuff!
Control + D😁
@@AsishGeorgeTech Thanks bro
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 ?
Do you have any errors in console? Nd what is the api response?
do you have a weather forecast project report
Just what I was looking for. Please can I use your design?
Sure. No issues.
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
Yes, you can use any text editor you like.
Sir but how we can change the city
Incredible video. Sir, if u don't mind could you give any suggestion what should I do if my function getWeatherData is not working.??
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.
if u can share images it will help us a lot
can you please teach me another way without using the geo location in same code
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?
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.
the weather data comes from the API that u need to insert in your .js file before starting the script....
yes in daily data below hourly data @@AsishGeorgeTech
hey I am not able to use the open weather api!
There a flaw here it just shows ur current location wht if i want to search a location
what is the name of your API_KEY
How to find weather of other city??
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
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!!
@@AsishGeorgeTech can we use 2 api at the same time ?
Yes you can make the request to the second api based on the response from the first.
Not able to use API please help
how can I change location????
Anyone have a report on weather forecasting
Open with live server isn't a option for me
Hey there
Do the data get updated by itself? The weather Data
When the api is called, after the response is received a function is called. It updates the data.
where the option to change the city
Bro I'm 401 error why it is showing anyobe guide me
If we want to display hourly data with that, how can we display it? Without refreshing the browser
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
which design pattern did you use on this project?
Not used any design pattern as this was just a small application that was not for production.
it said "Cannot read properties of undefined (reading 'forEach')"
please can someone tell me why
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.
Hello Sir, Can you help me how to get the weather of different locations by adding an api. I am new to the coding
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!
@@AsishGeorgeTech Ok Sir, thankyou
Did you find how to get weather of different location ?
As I said above, I did not do that. That is yet to be done.
@@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
sir have u done a video for different location
Hey! I have done it for New York but it is with React Native. You can check it out.
ruclips.net/video/H5xIWY7pL-k/видео.html
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?
You might have missed something.
@@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?
Are you getting response from the api?
same problem here, any update?
@@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?
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
I had a similar issue but for the data.current in the showWeatherData() function.
@@heathology how did you fix the data.current error?
guys i used API_KEY.. it worked for me instead of data.current
how did you fix it
@@heathology
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!
nvm solved it
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.
same problem here
you got the solution?
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
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.
@@AsishGeorgeTech I also have the same problem. Read somewhere that maybe its cause of the free plan
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"?
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
@@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?
Sir plz provide the code down so that we can easily copy and paste it 😁
Code is in the description
But I am sure you will not get the concept and can't make your website by u r own
It is showing invalid api key
api invalid it shows why ???
It looks like the API is no longer free. Can you please check and let me know. It says my API key is invalid.
If you are using my api key, its usage limit has exceeded.. maybe that’s why.
Is this one call api free?
I use my regular api key but it says invalid API key
yes it is free.
same here
Thanks for the video. It's a bit hard to hear you though.
Thank you and sorry about that. I am trying to improve on the audio side now.
There is no update to the web site after making changes in the style.css file
please help
Anyone know how to add a search function to this so you can search any city?
The weather elements under the function part doesn't work for me.
did you found a solution ?
🥰🤩😍😍😍🤩🥰🥰🤩🤩😍😍😍
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
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.
@@ненад-1 thank you done
is this google looking ui
Does this project have backend ?
No. It uses open api. The backend api is already available for free.
Hlo @asish george Tech
praise the lord
can I get the code files of this website
link to the github repo is in the description.
is location dynamic too?? or always kolkata?????
Its based on your location
@@AsishGeorgeTech the api is paid now it's not working
The site that you have deployed seems to have no data. Do you know why?
I just checked. It seems to be working fine for me. Can please check if you have disabled the location for the site?
@@AsishGeorgeTech Oh it was turned off never mind. 👍
Yep I will do a fix so that if location is off it shows weather of a default location.
I tried so many times, but status code : 401 unauthorized.
Api key may be missing
@@AsishGeorgeTech but I pasted the exact API key from my profile. And reviewed several times.
Are you using that api key while calling the api? Can you use postman to test the api call externally?
I did it shows the same error still.@@AsishGeorgeTech
34:12
You never got the icons to work properly to the current weather...
True. But it was pretty straightforward though.
Can you please tell me a way to get the night icons working properly ?
hey , can i have your contact , i have query