14:00 Guys u don't even need that long code to build date. You can just easily take the date object and convert it to string (date object return day, month year...) For example: let date = String(new window.Date()) date = date.slice(3,15) In my case date returns: May 25 2020
I have these issues. What did I do wrong? 'api' is assigned a value but never used no-unused-vars 'day' is assigned a value but never used no-unused-vars 'date' is assigned a value but never used no-unused-vars 'month' is assigned a value but never used no-unused-vars 'year' is assigned a value but never used no-unused-vars Unexpected template string expression no-template-curly-in-string
@@gallant7661 in vscode get the extension eslint. then hover over the code with "no-unused-vars" and hit quick fix then click the disable no-unused-vars for the whole file.
Thanks for this tutorial bro. While going through the Weather API site, I noticed that it provides info in Hindi also which is my native language. I added lang parameter in my api query and changed the days and months name in Hindi. Voila! I have a weather app in Hindi now. let months=["जनवरी",'फरवरी', 'मार्च','अप्रैल','मई','जून','जुलाई','अगस्त','सितम्बर','अक्टूबर','नवम्बर','दिसम्बर']; let days=["रविवार",'सोमवार','मंगलवार','बुधवार','गुरुवार','शुक्रवार', "शनिवार"]
Trust me I learned way more from you than you will from me. The reason the transition wasn't working in your CSS code was due to not adding the "s" per the documentation for the transition property. Rather than just having transition: 0.4 ease-out; it should actually be //added an "s" transition: 0.4s ease-out; This was an amazing walkthrough and lesson. Thank you!
Great tutorial, thank you bro! One tip that is a great new feature, you can use optional chaining to replace the ternary for truthy or falsy results...
i didn't know how to use free apis because everytime they had this api key stuff and i used to get stuck all the time. Also I learned how to query and onKeyPress handler thing and search only when the user hits enter🔥.... Thank you so much❤️
For anyone following along who cannot get the transitions to work, you need to make the ease out transition be 0.4s (s for seconds) instead of just 0.4. Nice tutorial!
holy shit the IF ELSE statements are so advance for me haha and the TYPE OF should have a seaparate tutorials and FOR LOOPS please we need an in depth noob lesson here haha if it is ok for you please. the way you code is mindblowing in a good way. a brain workout haha
The transition property should have a 's' appended to time as per documentation. However,I was using Firefox so I still didn't get the transitions. Then I viewed in Edge and it worked fine.
Great video, very helpful! I find your syntax highlighting incredibly useful, mine is just orange white and blue. It makes it difficult for me to distinguish variables etc. Is that a VS Code extension or a theme of some sort?
Fun fact: Transition with background-image is not working with firefox. For those, who also got confused why its still not working after solving the problem with "s".
Hey! I have a small issue. At 27:28 when you type the name of the city and press enter I don't get anything, my page remains blank(not really blank, but you get the point). Do you have any idea on why is this happening?
@@TylerPotts Thank you, I followed everything from the video and cross checked each line from the source code of your github as well but I'm not getting my search result. If I type any city it's just giving me a blank page.
@@manishakanyal751 After you confirm your email on openweathermap you will get another email that has a sample url. I believe that's where he got it from.
Css transition is working because of (0.4) is missing "s" for seconds.... I highly appreciate your efforts and this video, thank you..I have learn a lot...Thanks again.. I have been doing vanilla JavaScript for alomst 2 years now... Now I am transition to ReactJs and truth be told... JavaScript in react is something else, I had to start thinking JavaScript in "state management" ... Which is not an easy transition at all.. All along I have been thinking the only way to handle AJAX is only through the use of useEffect... I knew I could do it in another way...Now you just unlocked my mind there... And Other thing, ES6 ternary operator...I've been asking myself...How on earth can I return more then one thing, Today I got my answers...Thanks again..
Well explained but one thing more you would need to do is to keep each function separate in their own components. As you are instructing a component based library.
Its a very wonderful tutorial,thanks man I have a question,how to change the resolution just like in your video mine was stretched following the resolution of my laptop 1366x768
14:00 Guys u don't even need that long code to build date. You can just easily take the date object and convert it to string (date object return day, month year...)
For example:
let date = String(new window.Date())
date = date.slice(3,15)
In my case date returns: May 25 2020
||
let today = new Date().toLocaleDateString()
||
let today = new Date().toDateString();
I have these issues. What did I do wrong?
'api' is assigned a value but never used no-unused-vars
'day' is assigned a value but never used no-unused-vars
'date' is assigned a value but never used no-unused-vars
'month' is assigned a value but never used no-unused-vars
'year' is assigned a value but never used no-unused-vars
Unexpected template string expression no-template-curly-in-string
You don’t have to but it allows you to format the date in the way you want it to display. It’s a stylistic choice not bad practice.
@@gallant7661 in vscode get the extension eslint. then hover over the code with "no-unused-vars" and hit quick fix then click the disable no-unused-vars for the whole file.
no way it Elon Musk!!!!!! 😱
Thanks for this tutorial bro. While going through the Weather API site, I noticed that it provides info in Hindi also which is my native language. I added lang parameter in my api query and changed the days and months name in Hindi. Voila! I have a weather app in Hindi now.
let months=["जनवरी",'फरवरी', 'मार्च','अप्रैल','मई','जून','जुलाई','अगस्त','सितम्बर','अक्टूबर','नवम्बर','दिसम्बर'];
let days=["रविवार",'सोमवार','मंगलवार','बुधवार','गुरुवार','शुक्रवार', "शनिवार"]
my code not working! please help! i am using npm. ..cant fetch Api
I learned a lot about CSS in this React tutorial lol.
I knew someone will say it.
What we learned?
------------- CSS 75%
----- React 25%
@@ramitpanangat7855 likeeee
Trust me I learned way more from you than you will from me. The reason the transition wasn't working in your CSS code was due to not adding the "s" per the documentation for the transition property. Rather than just having
transition: 0.4 ease-out;
it should actually be
//added an "s"
transition: 0.4s ease-out;
This was an amazing walkthrough and lesson. Thank you!
my api is not working ...plzz help!
Yeah I noticed afterwards 😂 My bad thank you! :D
@@snehaagarwal6451 Mine didnt work too
@@luisacavalcanti3665 why not
@@snehaagarwal6451 what error?
you are the only youtuber that make real projects, keep it up.
Thanks, will do!
let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
True hero
@@Thejusticier44 Kappa
Initially I thought why this comment got so many likes but now that I am building my own App
@Joshua (Nakjun) Paik i got u my g
{new Date().toDateString()}
Thank you so much for this tutorial, I loved it! and BTW you have a lovely personality which make this video more enjoyable.
Oh thank you!
This is very begginer friendly, keep up the good work. Thanks a lot Tyler.
Glad it was helpful!
Transition Error you must type s after the number
transition: .4s ease;
My bad... I was so tired when I recorded this... haha Thanks!
@@TylerPotts Hope you got some rest :D
@@TylerPotts About the audio: in your video editing software, delete the trash audio channel, then make the right mono channel as stereo.
it still not worked
thanks bro
This was super helpful! I'm currently interviewing for a position that uses React, and I've never done much coding with it.
I had never done this much CSS in my previous tutorials! Thanks, buddy learnt a lot...
Hi! Great tutorial! You fotgot the “s” of seconds in the transitions atributte.
Answer: transition: 4 east-out;
Correct Answer: 4s east-out;
Thanks for that!
Thanks
Any idea how I’m going to save everything so i can open it after I’ve closed it?
I am a beginner and I really loved this in my initial learning.
Great tutorial, thank you bro! One tip that is a great new feature, you can use optional chaining to replace the ternary for truthy or falsy results...
Great tutorial. I like how there was no fluff in it.
Thank you! 😊
"And the arrow function which takes the D....heh...heh...heh" LOL Made my day.
i didn't know how to use free apis because everytime they had this api key stuff and i used to get stuck all the time. Also I learned how to query and onKeyPress handler thing and search only when the user hits enter🔥.... Thank you so much❤️
You're very welcome!
32:22
in the index.css it should be
transition: 0.4s ease;
you left out the s or seconds for the timing
this worked for me. thanks!
thanks for this awsome tutorial, that was clear, well explain, never too slow or too fast ! Great job !
for that transition i used
-webkit-transition: all 0.2s ease-in;
and it worked pefectly. tnx for tutorial its great
Thank you! :D
For anyone following along who cannot get the transitions to work, you need to make the ease out transition be 0.4s (s for seconds) instead of just 0.4.
Nice tutorial!
Hahaha I was a little tired when I recorded this... my bad xD Thank you :D
Why isn't this comment at the top? Thank you :-)
You are awesome dude 💓
Love from India
I Love your channel! Thank you for all your tutorials
Glad you like them!
Thank you for the video! You're great at explaining and straight to the point
Thanks, man. It was a good night
Thanks for sharing us your knowledge! you are amazing... I've learned a lot thanks to you :)
Thank you! :D
thank you this was DOPE! learned a lot on css and react.
Glad it helped!
"The arrow function takes the d" *laughs- that got me XD. Great content mate, keep it up🤘🤘.
Learned a lot from this tutorial, helped me build mine !! New sub
Thanks for the awesome tutorial. I just added a few lines to view different picutures depending on the weather
you just import everythings you need in react, it's wonderful
lovely tutorial .... straightforward to understand and easy to follow thank you... thumbs up from me
Thank you!
Well done. I learned a lot.Thanks!
Glad it was helpful!
Great Video Man. Thanks!
Glad you liked it!
Quick, to the point and EXCELLENT work man. I learned a lot from this video. God bless you. (y)
amazing tutos ! amazing channel ! kepp going ♥
thank you so much! greetings from Mexico
This is very therapeutic
holy shit the IF ELSE statements are so advance for me haha and the TYPE OF should have a seaparate tutorials and FOR LOOPS please we need an in depth noob lesson here haha if it is ok for you please. the way you code is mindblowing in a good way. a brain workout haha
Great video 🔥...
The way to fix transition - add a unit ('s') after the transition value in index.css file...
Like - transition : 0.4s ease-out;
at 4:33 time in video
FROM WHERE HAVE YOU TAKEN THE BASE !!!
after the key input
Thank you so much brother
Thank you so much
The code was clean and very easy to understand.
Thank you again
I declared the transition for app warm class and it worked
Really Nice content broo, it helps me alot :)
I’m ready, will be here in 12 hours! :-)
Whoops, I'll have to head home and set it for 3 😁😂
Tyler Potts Hahaha did you mean to set it for 3PM?
@@JohnCrypdoe It was supposed to be 1PM UK time today... xD
Greate tutorial learned both react and CSS also
Glad it was helpful!
For the person who saw React yesterday first time that took time to understand
Great tutorial, I learned a lot.
God Bless you i learned a lot from this video thanks mate
Great Tutorial
Glad you think so!
Thank you so much ,it was useful for me
Cool Video! Keep making
Awesome tutorial, thx
Glad you liked it!
Works perfectly!!! (: thanks a lot
You're welcome!
Great project 👍from 🇳🇬
thanks for the awesome video , really like it
The transition property should have a 's' appended to time as per documentation. However,I was using Firefox so I still didn't get the transitions. Then I viewed in Edge and it worked fine.
Yeah I was just being blind xD
verry clean thanks alot sir
Great video, very helpful!
I find your syntax highlighting incredibly useful, mine is just orange white and blue. It makes it difficult for me to distinguish variables etc.
Is that a VS Code extension or a theme of some sort?
You genius thanks alot !
You're welcome!
thanks! awesome!
Thank you;
That is a amazing work, thank you!
Fun fact: Transition with background-image is not working with firefox. For those, who also got confused why its still not working after solving the problem with "s".
Thank you!!!!!!
Hey! I have a small issue. At 27:28 when you type the name of the city and press enter I don't get anything, my page remains blank(not really blank, but you get the point). Do you have any idea on why is this happening?
It needs an active internet connection, that could be one reason, another reason is that the city doesn't exist, like due to a typo or something
Hey!
I have the same issue here, how did you solve it?
Thanks a lot
great video! thanks very much :)
Thanks for the tutorial.
Amazing. Thanks!
nice tutorial mate
Glad you liked it
Hi, Thank you for the video. Where did you get the base api url from? 4:28
Hey here's the documentation: openweathermap.org/api
@@TylerPotts Thank you, I followed everything from the video and cross checked each line from the source code of your github as well but I'm not getting my search result. If I type any city it's just giving me a blank page.
@@aachalthapa6028 Go to api tab at the top and then click on subscribe link beside the current weather api
I love It! Ty very much
thank you so much sir this amazing content
Glad you liked it
Nice video!
Glad you enjoyed it
excellent...
btw, the weather should have been {weather.weather[0].description} to give correct data
Thanks! :D
got teh openweather api and key myself, but getting 401 unauthorized error...
You forgot to put the unit of 0.4 Correct one:0.4s ease-out
I know this is super late but the reason why the transition didn't work at the end is because you forgot to add the 's' unit to the transition time
Thank you!
You're welcome!
Hello Tyler , I keep getting this “unexpected ( in promise ) expected a json “ error in my console. Please any help?
where did you get the base: "url" from? at 4:34
same question
@@manishakanyal751 After you confirm your email on openweathermap you will get another email that has a sample url. I believe that's where he got it from.
Css transition is working because of (0.4) is missing "s" for seconds....
I highly appreciate your efforts and this video, thank you..I have learn a lot...Thanks again..
I have been doing vanilla JavaScript for alomst 2 years now... Now I am transition to ReactJs and truth be told...
JavaScript in react is something else, I had to start thinking JavaScript in "state management" ... Which is not an easy transition at all..
All along I have been thinking the only way to handle AJAX is only through the use of useEffect... I knew I could do it in another way...Now you just unlocked my mind there...
And Other thing, ES6 ternary operator...I've been asking myself...How on earth can I return more then one thing, Today I got my answers...Thanks again..
thank you for this
Arrow function takes the d...hahahaha
Thanks for the tutorial, really appreciate it.
for the transition you forgot the s 0.4s
On line 15, for the transition, you are missing the 's' It works with: -transion: 0.4s ease-out;
Put s after 0.4
bro started laughing at himself for saying to take in the d lmaoooo
Gotta enjoy the little things 😁
Well explained but one thing more you would need to do is to keep each function separate in their own components. As you are instructing a component based library.
Ei Abdul Basit
I dont know why, i did exactly the same way that you did but if i'm searching any cities i dont get anything in my console...
Thanks for the video Tyler. Wanted to ask that, can we make the background change using just vanilla javascript(not using react)?
Yes, absolutely
const getDate = new Date();
const currentDate = getDate.toDateString();
and use it by {currentDate} and it works and its simple
thank you man
great video
I am not able to fetch weather api data from the key and base written by you. How I write as I am using free version of Open weather map
What extensions are you using? How did you get from .search-box to the div and className being automatically populated?
That's called Emmet, it's built into vscode
@@TylerPotts Is Emmet the extension name or are you saying that functionality is built into vscode? Thank you for the help btw!
@@TylerPotts I got it working by going to settings > emmet > include languages and then I added "javascript": "javascriptreact" as an item.
From where did you get the base api url?
Same question. Did you get the answer?
Its a very wonderful tutorial,thanks man
I have a question,how to change the resolution just like in your video
mine was stretched following the resolution of my laptop 1366x768
Try adding "max-width: 500px;
margin: auto;" these two lines to the .app class in css
wow thanks
I have a bug can you plz help me
instead of the date coming out this is what comes out "${day} ${date} ${month} ${year}"
15:45
use ` symbol .... it's just above tab button
@@arbros9093 thanks you so much i never thought of that 🤦♂️
@@NoobMaster-nr3jw it's okay
You went to mountain XD 🤣
How to get api Base url?