I wish more people would be this great at tutorials. You walked through all the steps and showed where you were getting your data. So simple to follow! Thanks for taking the time to make a quality tutorial.
Great tutorial! Thank you. Hint for learners like me- Please be aware that you should add error handler on API request. If 404 returned, your app will crash :( Small changes can solve this. Cheers!
@@oumaimahajri6559 It was long time ago when I wrote this but try to add exception in JS. Then just show some notification if you get an error or simply just log out it :) hope that might lead you in right direction.
I do have a question about why we are placing "undefined" for our values in this.state. Why are we not using empty quotation marks? Thank you in advance!
whenever I type something other than city or country name the app breaks and gives "Unhandled Rejection (TypeError): Cannot read property 'country' of undefined" any solution to this?
Why did we use {} to use that function?What if I invoke that function with minmaxTemp(24,19);? what is the difference? Should not using curly brackets and invoking that function produce the same result?
Hey, After last changes in getting city and country, I'm unable to get output. The api is taking a lot of time to fetch the data. I'm getting the following when inspecting the page: [HMR] Waiting for update signal from WDS... Help me with this!
Is it possible to create multiple containers like this next to each other? I mean i click the weather for 5-6 countries and I have them next to each other
Thank you for the tutorial, do you think it's possible to make it so when the user first visits the app they are shown the weather for their current location?
plz help i am getting this error when i am running the code ...... Module not found: Can't resolve 'Weather_App/src/css/weather-icons.css' in 'C:\Users\user1\Desktop\hw\FINAL PRO\Weather_App\src'
Friend thank you for the tutorial. It is great. But I just noted the tutorial on my notepad for 3 hours. Now I am very tired. I can not start to coding. First need to rest :). Then I am afraid it will continue another 3 hours lol
It was great :) It is working fine but for some cases It throws and error like Unhandled Rejection (TypeError): Cannot read property 'country' of undefined Can anyone help?
YO WAZZUP MY DUDE !! your application is very lit and I am making great use of it. I have a question though. what should I write in order for the application to show the user's data based on his / her current location?
this is a really good video but if the user put a city name that doesn't exist there's an error, you could show us how to solve this error, except that, the tuto is excellent !
Hello! Thank you so much for this tutorial. just a quick question. Im getting this error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0. Do. you happen to know what it might be causing this?
Hello, your video was very useful, I learned a lot, but could you help me? If I enter Dublin, Ireland, the app sends me Dublin, US instead of Dublin, IE. Any idea about why this is happening, and how I could solve this problem without hardcoding this specific instance with a switch case or something? It would take forever to write a switch case for every country in the world. Thanks in advance!
Why am I getting this error: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a` state = {}; `class property with the desired state in the App component.
How Can you implement if the weather is from Day or night? Everytime I convert the unix time stamp for a certain location it always comes back for my time.
@@DailyTuition yea I know how to do that. When I convert the unix time stamp its always showing my local time. Its showing my local time for any city I retrieve data from
Sir i followed tutorial and got lots of knowledge. How can i convert when i click get weather and dispaly the temp and description into seperate page .
Sir, I am not able to use following lines: 1. 2. when I use ${city},${country} in the api call 3. when I use appid=${API_key} it's giving the following error Unexpected template string expression no-template-curly-in-string Can you help me with the same?
Yes. But .jsx is the react expension. If you wish to work on just a design of the componet you can use jsx. But you can still add functionality with jsx. And as we all know js is the javascript file
I am getting this kind of error in console: index.js:1 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the App component.
If I try to add icons library using " npm I (GitHub url)" I am getting error saying, this is related to npm not being able to find a file.. pls help in this
In the render method of App.js, change one of the attributes in Weather tag from weather-icon to icon. In weather component jsx use {props.icon} rather than {props.weatherIcon}
Hello Sir, I am not able to run npm install when I download your source code for the project and run it. Please help. It gives many errors. I am not able to resolve.
Same error for me Vikash. You can clone the repo and use the css and fonts folder alone in your project. Put these folders under src of your Project. It works!!
Hello! Thank you so much for uploading this video! I'm learning a lot from it. I have been following all the steps in the video, I'm currently in 17 minutes and 45 seconds in. I'm trying to display the data from OpenWeather in the Console, however I don't see the Object tag in the Console. What I see instead is "Console was cleared" with webpackHotDevCleint.js:91. I don't know how to stop the Console from clearing itself so I can see the Object tag with the information about the temperature. Do you know what I can do to see the information about the temperature? Thank you in advance for your help!
Nevermind, I was able to fix this problem by commenting out some lines in the webpackHotDevClient.js, starting from line 91. I'm now able to see the city's temperature and location in the Console.
What if I use for e.g: City: Bla-Bla-Bla Country: Bla-Bla, After this I recive a error message, do I need to create const to attach that error and create a message: Enter valid City or Country?
@@DailyTuition great Tutorial. I got this error under inspection. Please can you help check what the issue could be:"0.chunk.js:30442 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the App component. console. @ 0.chunk.js:30442 printWarning @ 0.chunk.js:31351 error @ 0.chunk.js:31323 warnNoop @ 0.chunk.js:31378 enqueueSetState @ 0.chunk.js:31448 push../node_modules/react/cjs/react.development.js.Component.setState @ 0.chunk.js:31503 App.getweather @ main.chunk.js:136 async function (async) App.getweather @ main.chunk.js:129 App @ main.chunk.js:146 constructClassInstance @ 0.chunk.js:17066 updateClassComponent @ 0.chunk.js:21204 beginWork @ 0.chunk.js:22674 beginWork$1 @ 0.chunk.js:27192 performUnitOfWork @ 0.chunk.js:26180 workLoopSync @ 0.chunk.js:26156 performSyncWorkOnRoot @ 0.chunk.js:25774 scheduleUpdateOnFiber @ 0.chunk.js:25206 updateContainer @ 0.chunk.js:28355 (anonymous) @ 0.chunk.js:28738 unbatchedUpdates @ 0.chunk.js:25924 legacyRenderSubtreeIntoContainer @ 0.chunk.js:28737 render @ 0.chunk.js:28820 ./src/index.js @ main.chunk.js:360 __webpack_require__ @ bundle.js:785 fn @ bundle.js:151 1 @ main.chunk.js:494 __webpack_require__ @ bundle.js:785 checkDeferredModules @ bundle.js:46 webpackJsonpCallback @ bundle.js:33 (anonymous)"
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the App component.
You are the best, freely you gave to the people, without holding back. Your tutorial is still the best.
I wish more people would be this great at tutorials. You walked through all the steps and showed where you were getting your data. So simple to follow! Thanks for taking the time to make a quality tutorial.
Most welcome 😊
Thank you soooo much for the tutorial and you explained it soo well. Helped me out even in the last moment of my college work. Thank you again
Most welcome. Keep learning
Thanks. As a beginner,I learned a lot.
Most welcome 😊
Great Tutorial keep posting these types of videos . Thanks
Great tutorial! Thank you.
Hint for learners like me- Please be aware that you should add error handler on API request. If 404 returned, your app will crash :( Small changes can solve this. Cheers!
Thank you 😊 keep learning 🤗
can u help me to find solution ?
@@oumaimahajri6559 It was long time ago when I wrote this but try to add exception in JS. Then just show some notification if you get an error or simply just log out it :) hope that might lead you in right direction.
Very good project
World best channel
Thank you so much ❤️
Thank you, this was easy to follow and helped my understanding!
Most welcome 😊
Thank you ..u re the best bro
I do have a question about why we are placing "undefined" for our values in this.state. Why are we not using empty quotation marks? Thank you in advance!
It doesn't matter. You can use empty quates as well. This is just for initialization
@@DailyTuition Okay, thank you for clarifying!
THANKS 4 THIS TUTORIAL BRO, 200% USEFUL
Most welcome 😊
whenever I type something other than city or country name the app breaks and gives "Unhandled Rejection (TypeError): Cannot read property 'country' of undefined"
any solution to this?
This is because country property is undefined you need to define it first
thank u a lot, i love ur explain amazing !
Thank You
Thank you, great tutorial!
Greetings from Peru
Most welcome 😊 from India 🙏
Nice video.
Hello Dear,
I have a question
how can we clear the input after write the name of the city dynamic after we fetch the data ? i couldn't do it
You can get the temperature data from OpenWeatherMap directly in Celsius. Just put &units=metric in the API call.
And if you need to make a weather forecast for 5 days, then what should you enter and where?
use api call for weather for 5 days. you can add date picker to pick a date for the next 5 days.
Thank you so much✨🚀❤️
is this tutorial good enough to be react developper, in other words if i master this kind of projects, could I get a job as react developper ?
No. It's not good enough to get a job but you will learn something new definitely 😊
Why did we use {} to use that function?What if I invoke that function with minmaxTemp(24,19);? what is the difference? Should not using curly brackets and invoking that function produce the same result?
Do you plz show me the code so I can explain it. This is my old video so I need to first check out the code first. Hope you understand 😊
I deployed the same on netlify but api is not giving output there although in local it is providing results. Please help
sir i am given a project for weather forecasting but told it should be web based not app based, can u please suggest me what could i do
You have to create your own database and fetch data from it. You can get the data from api
I think this way of styling is applied globally (for all components) , not scoped to particular component even if you don't import it. 39:57
Great one thanks and keep it up....
Great tutorial. Thank you for this!
Hey,
After last changes in getting city and country, I'm unable to get output. The api is taking a lot of time to fetch the data. I'm getting the following when inspecting the page:
[HMR] Waiting for update signal from WDS...
Help me with this!
Is it possible to create multiple containers like this next to each other? I mean i click the weather for 5-6 countries and I have them next to each other
Yes we can do that.
Great tutorial learned a lot. Do you have a way to donate?
Yes. You can donate on my patrion page. Link is in the description
Thank you for the tutorial, do you think it's possible to make it so when the user first visits the app they are shown the weather for their current location?
Yes. It's absolutely possible. But you need to get the location permission from the user first 😊
sir i am not able to use this line
no error shown but icon is not been displayed
sir pls help me with this @Daily Tuition
You are using `` after {} . Use it before curly braces. Like this `${ your content}` 👍
plz help i am getting this error when i am running the code ......
Module not found: Can't resolve 'Weather_App/src/css/weather-icons.css' in 'C:\Users\user1\Desktop\hw\FINAL PRO\Weather_App\src'
The path of the module is wrong. You are missing that. Plz check the path again
hello im getting an error 'Unhandled Rejection (TypeError): Cannot read property 'preventDefault' of undefined'. please tell me what i should do?
It is a function specify () parenthesis like this. preventDefault()
Friend thank you for the tutorial. It is great. But I just noted the tutorial on my notepad for 3 hours. Now I am very tired. I can not start to coding. First need to rest :). Then I am afraid it will continue another 3 hours lol
😀😀
It was great :)
It is working fine but for some cases It throws and error like
Unhandled Rejection (TypeError): Cannot read property 'country' of undefined
Can anyone help?
Plz check the spell of country variable. I think you miss spellied that
That maybe an API_key problem
YO WAZZUP MY DUDE !!
your application is very lit and I am making great use of it. I have a question though. what should I write in order for the application to show the user's data based on his / her current location?
Get the permission first from the user to access location. In JavaScript there is the location class which helps you to get location of the users 😊
@@DailyTuition I did get the permission, I struggling with displaying it in the same format as the JSX does
Should I make a new JSX component for it?
@@SuperFUNNYKILLER yes you should.
this is a really good video but if the user put a city name that doesn't exist there's an error, you could show us how to solve this error, except that, the tuto is excellent !
Thank you so much 😊 I will take care of error handling also.
Hello! Thank you so much for this tutorial. just a quick question. Im getting this error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0. Do. you happen to know what it might be causing this?
You have angle bracket in json please check your spelling mistake. Or show me your code
Same thing happening with me ...any solution??
Thanks buddy, it was a very nice project !
Most welcome 😊 keep supporting 😊
Hello, your video was very useful, I learned a lot, but could you help me? If I enter Dublin, Ireland, the app sends me Dublin, US instead of Dublin, IE. Any idea about why this is happening, and how I could solve this problem without hardcoding this specific instance with a switch case or something? It would take forever to write a switch case for every country in the world. Thanks in advance!
You need to first check do we have IE country in the API. Because it's a sample api. If the API have IE country then use filter technique to do that
Why am I getting this error:
Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a` state = {}; `class property with the desired state in the App component.
No that's not the problem. It's valid to to say state = {}
have you used databace and api in this project?
Yes. I have used api but not used database
sir how to deploy this application because when I deploy this they show error when I search any city temp and this API is not working
This API is only for development I think
I am getting problem in settings background image and also weather icons are not displayed.
please help me
Plz show me the error
nice video! thank you ^o^
Its shows unhandled rejection cannot read property 'country' of undefined why it shows??
You have no object in the variable. Means may be the property is missing or the object is undefined
Sir can you convert it into hooks ?
how can we use local icon instead of import from weathericons from github
You can download the local icon from the website categories it and use it according to the weather
How Can you implement if the weather is from Day or night? Everytime I convert the unix time stamp for a certain location it always comes back for my time.
Use global static variable to store Unix time stamp
@@DailyTuition yea I know how to do that. When I convert the unix time stamp its always showing my local time. Its showing my local time for any city I retrieve data from
Is it Responsive ?
Yes
thanks
Most welcome 😊
Sir i followed tutorial and got lots of
knowledge. How can i convert when i click get weather and dispaly the temp and description into seperate page .
Call an API on different page.
@@DailyTuition sir i did that but didn't work. Will you please explain it how to call from different page?
Sir, I am not able to use following lines:
1.
2. when I use ${city},${country} in the api call
3. when I use appid=${API_key}
it's giving the following error
Unexpected template string expression no-template-curly-in-string
Can you help me with the same?
The error is from template string (``) Check out template string again 👍
The only issue is that the error does not dissappear if user enters correct city and country. Stays up there
sir wht is the difference b/w .jsx vs .js both do same thing??
Yes. But .jsx is the react expension. If you wish to work on just a design of the componet you can use jsx. But you can still add functionality with jsx. And as we all know js is the javascript file
I am getting this kind of error in console:
index.js:1 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the App component.
I think you did not mounted your component. Make sure you do that first and use this.state to define state
If I try to add icons library using " npm I (GitHub url)" I am getting error saying, this is related to npm not being able to find a file.. pls help in this
Show me the command plz
@@DailyTuition Hi, was there a solve for this as i had the same problem
@@tanweerali327 same problem
Everything is getting displayed except the description of the weather. Any solutions for that?
Check the property. I think you miss spellied something
also the
weatherIcon is not visible....please help!!@DailyTutuion
In the render method of App.js, change one of the attributes in Weather tag from weather-icon to icon. In weather component jsx use {props.icon} rather than {props.weatherIcon}
@@rohantibrewal7465 thank you😇
I'm trying to follow the tutorial, why are you using "await" before fetch?
This is more secure style. It will asynchronously call the data
@@DailyTuition Thank you for your answer :)
What font you used in VS CODE? It's looking cool
I have a dedicated video on it. Check out the video section
@@DailyTuition if you would have answered directly it would be helpful sir, else thanks ,
I am ok with current font 🙏
It's Rubik. You can find it on Google font
Hello Sir, I am not able to run npm install when I download your source code for the project and run it. Please help. It gives many errors. I am not able to resolve.
Make sure you have npm installed on your local system 😊
Same error for me Vikash. You can clone the repo and use the css and fonts folder alone in your project. Put these folders under src of your Project. It works!!
Hello! Thank you so much for uploading this video! I'm learning a lot from it. I have been following all the steps in the video, I'm currently in 17 minutes and 45 seconds in. I'm trying to display the data from OpenWeather in the Console, however I don't see the Object tag in the Console. What I see instead is "Console was cleared" with webpackHotDevCleint.js:91. I don't know how to stop the Console from clearing itself so I can see the Object tag with the information about the temperature. Do you know what I can do to see the information about the temperature? Thank you in advance for your help!
Nevermind, I was able to fix this problem by commenting out some lines in the webpackHotDevClient.js, starting from line 91. I'm now able to see the city's temperature and location in the Console.
Learning from the mistake makes developer
@@DailyTuition Thank you so much! I hope to be a developer one day. :)
You will
when i copy the github link for the weather icons i get an error
Thanku sir..so much love u
🤗
Sir, I am not able to use following lines having concatenation with ${}:
You specify (") at the end of the string instead (') make sure you have back tick on both side of the string 😊
How can I add dropdown of all cities and countries from API?
Use Google map API 😊
Great tutorial sir
Thank you 😊 keep supporting
Daily Tuition yes i will.. bcoz you derserve
@@wasibzaman3345 thank you 😊
can anyone tell me why i am getting this message in my console " [HMR] Waiting for update signal from WDS... "?
That's normal. Don't worry
@@DailyTuition but then how to correct it ??
What if I use for e.g:
City: Bla-Bla-Bla
Country: Bla-Bla,
After this I recive a error message, do I need to create const to attach that error and create a message: Enter valid City or Country?
To check the valid country use zip code. Using it you can check user city is valid or not. If user enters invalid city create a message 😊
Github pr hai available code ..source code download Kaise Kre..?
Git tool download karo or command me ja kar type karo .
Git clone link
Link ki jagah mene specify Kiya hua link dalo bass 😊
Hey man, thank you so much for this amazing video, I have a quick thing, so when I try to put the background image, it doesn't show in the application
Check the background path. 😊
Amazing video thank you
The app was returning proper values but after some time all the data shown became wrong, I deployed the site using netlify
Plz use different api to get weather data 👍
checkpoint 45:27
i am getting error component unused and apikey is not used
I think you to clear the component variable and you didn't use it. Check out the error line and the component variable
Rest api pr tutorial le aayo..kya kaise use krte hai...koi idea nii hai...how rest api can build them..
Is video ko dekho. Is video me mene rest API ke bare me bataya he.
th-cam.com/video/JsXuhndOVrg/w-d-xo.html
Rest api and restful ali and rest web Services ye sab same hai...?
@@DeepakGupta-hj2dv yes. Ye sab same he
@@DailyTuition okk thanks a lot
I'm trying convert Celsius to Fahrenheit. Any pointers?🤔
kelvin to fahrenheit : Math.floor(((temp - 273.15) * 1.8) + 32)
weather icon project is not install in terminal it shows error
What is the error
how can i fix the problem??
Thank you very much, this video is very usefull but {"wi ${props.weatherIcon} display-1"} didn't work 🤔
What is the error?
@@DailyTuition I found it, thank you very much
@@ZVEKOfficial the probleme from the signe " , however you find the full code in the link github, and you can replace it
Sir, I am getting an error like 'fatch' is not defined no-undef
Please tell me how to solve this
maybe you mean "fetch"?
@@timdixon986 ya it was spelling mistake
Check out the fetch is there in the application or not. If not then plz add it first and then use it.
@@DailyTuition great Tutorial. I got this error under inspection. Please can you help check what the issue could be:"0.chunk.js:30442 Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the App component.
console. @ 0.chunk.js:30442
printWarning @ 0.chunk.js:31351
error @ 0.chunk.js:31323
warnNoop @ 0.chunk.js:31378
enqueueSetState @ 0.chunk.js:31448
push../node_modules/react/cjs/react.development.js.Component.setState @ 0.chunk.js:31503
App.getweather @ main.chunk.js:136
async function (async)
App.getweather @ main.chunk.js:129
App @ main.chunk.js:146
constructClassInstance @ 0.chunk.js:17066
updateClassComponent @ 0.chunk.js:21204
beginWork @ 0.chunk.js:22674
beginWork$1 @ 0.chunk.js:27192
performUnitOfWork @ 0.chunk.js:26180
workLoopSync @ 0.chunk.js:26156
performSyncWorkOnRoot @ 0.chunk.js:25774
scheduleUpdateOnFiber @ 0.chunk.js:25206
updateContainer @ 0.chunk.js:28355
(anonymous) @ 0.chunk.js:28738
unbatchedUpdates @ 0.chunk.js:25924
legacyRenderSubtreeIntoContainer @ 0.chunk.js:28737
render @ 0.chunk.js:28820
./src/index.js @ main.chunk.js:360
__webpack_require__ @ bundle.js:785
fn @ bundle.js:151
1 @ main.chunk.js:494
__webpack_require__ @ bundle.js:785
checkDeferredModules @ bundle.js:46
webpackJsonpCallback @ bundle.js:33
(anonymous)"
I dont know why i am getting a blank page after execution i think i am unable to fetch data from api can anyone help me??
Definitely. Is there any error?
Unhandled Rejection (TypeError): Cannot read property 'value' of undefined@@DailyTuition
The value property is not initialise so plz initialise it and then use it
my icons didnt get big with th display-1 I don't know why
Use display-2 or display-3 😊
I am having this error of "no-cors" and "enexpected end of input" errors when I am trying to pull the data. Can anyone help!
Install and import core library
@@DailyTuition Thanks for the reply. I anyway resolved the issue already!!
@@midhilkari4919 great 😊
What language this source code?
Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the App component.
I am having problem at the weatherIcon part
Check the api key 🗝️ again and make sure you can fetch the data from the api and then move further
@@DailyTuition thanks a lot man, i finally made the app. Love and Support from India
Thank you 😊
I am also Indian
@@DailyTuition ohh I thought u were foreigner 😂
how can i do to add geolocation?
To add geo location you need to add Google API in this project.
Hi can you update this project
I will make a new video on it
19:37 update state