So rock and roll mate. Loved that you were yawning during the video because you can clearly do this kind of thing in your sleep. Thank you for what was arguably one of the best tutorials I have ever experienced. Logical and incredibly well executed. 5 out of 5 stars
Those are BACK TICK marks inside that fetch request!!!!! For anyone who is following along this is the key above tab, next to the 1. `Back Tick` is NOT THE SAME as 'single quotes'
Nice tutorial dude, I learn best by playing around with stuff and this has been a huge help. Great base to add stuff to as a challenge, adding changing backgrounds and displaying the time for each location in real time was fun.
Hilarious that you mention that. I just got to changing backgrounds. Just finished immediately moved onto doing time for each location.. Did you use a seperate API?
@@kaneUKGB Nah, from what I can remember this API returns a value that stores the difference between UTC time and the current location's time zone. So you can find UTC time and then add (1000 * weather.timezone) to it to find the time in each location.
Never mind. I got it working. It turns out you have to add the backwards quote marks instead of regular quote marks. I think you forgot to point out the distinction. Thank you for your help. This was a wonderful tutorial video.
The introduction of async await is really a blessing for JavaScript developer. async function getResults(query) { const res = await fetch(`${api.baseURL}weather? q=${query}&units=metric&APPID=${api.key}`); const result = await res.json(); } Avoid chaining of then statements 😂😂
Hi Tyler, great vid by the way. I'm just starting my coding journey but was wondering what are the best and easiest projects for someone like me to begin. I've watched this full video a couple of times now and I still don't get half of what's going on when it comes to the JavaScript. So I guess my question is What's the ideal projects for someone that is completely new/has limited JavaScript nowledge ?
Hi, I have a question, in getResults function, You invoke dispayResults without adding any argument and displayResults, which requires 'weather' parameter somehow gets it. Is that because getResult return 'weather' json object and displayResults takes returned value as a parameter ??
Very nice. But you should take advantage of CASCADING Style Sheets. You don't need to declare the color to white everytime, just declare it on the body and let it cascade...
Loved your tutorial- thanks so much! When I type in a city name, there's no response. I'm using your github source code, but am using my own api key which is working with another weather app I made. Any ideas? Thanks again for your work, Tyler!
After 20 minutes narrator wanted to sleep :) But video is useful, thanks! And for consistency - i think that in hilow querySelector you should use '.current .hi-low' not only '.hi-low'
Am I allowed to use this as a base code for my weather app that I want to develop? I will give credit if you want. Just starting so want to examine and take parts out of it. 😊
Hello! I'm very new to coding, I just started last month. I tried creating this weather app, however when I ran the code with lite server, I saw that the browser couldn't find the parameters in the fetch api. Is anyone else having this problem? I tried changing the parameters to match a sample api call from OpenWeather, but it is still not working. Any help would be appreciated.
Hi Tyler, idea for the next video if it is gonna be a weather app but in Vue or React. It would be nice if you showed how to dynamically change the background image based on the current temperature in the searched city. For instance if it's -1c it would change the background image to a winter looking image, and if its 22c it would show a summer ish picture as a background :).
It is a very good and to the point tutorial. But, there was many "promises" from an API. How come you didn't use "async ... await" with your functions. Are they arbitrary in JS?
hi, how can I implement a language change. As I noticed you write the notation api a little differently as they write it on the site and I do not know how to add a language change, thanks. PS: awesome video
What is an api url? like how do u find it im stuck on that part cause it wont work Edit: 1 day after this i finished the project and this was my first time coding so when i found out half the things u said i hadd to do it myself.
Can you explain to me how can I make the input field show under it the name of the city? For example if I type N it needs to show me some suggestions of cities that start with that letter.
I've never done this myself but logically I would think that you would make however many CSS styles for the type of weather you want with a class such as "cloudy-weather" or "rainy-weather" and then using JS do some sort of if statement in regards to the current weather and add the class for whichever weather .. like "if weather is less than 20° add class "cold-weather" to whatever your element is called" you'll also have to remove the current class. just a guess, im learning just like everyone else.
I built whole api by seeing your video. facing an error : This One=> Uncaught SyntaxError: Unexpected identifier In this line => baseurl: "api.openweathermap.org/data/2.5/" need your help
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`) he wrote api.base instead of api.baseurl and i cant figure out how it worked for him haha but yeah. hope im not too late for this.
Hey Tyler, I double checked my code with yours and things appear to match up, but once I press the enter button after entering a city name, I get a 404 error in the console. Can you help me with that by chance? Thanks!
Hi Tyler I was trying to follow your weather app tutorial. But when I finished and searched for weather in London, then in York for the current day - 02 09 21 The app didn’t work, Could you explain to me please how I can make your app show today’s weather? Thanks
Hey, awesome video bud. How can I convert the temperature to Fahrenheit? It's currently way off for me lol. In the getResults function, I set the units to customary but I guess that didn't work. Any help would be great, thanks!
I just changed &units=metric to &units=imperial and then made sure to change all instances of °c to °f in the HTML, etc. because even if it spits out the Farenheit numbers, it will show °c unless you change it to °f.
When you sign into the openweather API and create your free account,in your account there is a get started tab,which will give you a link,similar to the base url used in the tutorial
Was wondering if you could explain to me why you use `${}` I understand that it way to reference the JSON object that has been created, but have never used this before as I have done things with JS that are native like regular functions() instead of => functions and this has lead me to believe that you code is more concise than what would of been mine. What is the reason you use `${}` instead of "text+json.object+text" thanks in advance.
Hey man i just had the same problem. I fixed it by putting a / between {api.base} and weather in the fetch request like so: fetch(`${api.base}/weather?q=${query}&units=metric&APPID=${api.key}`)
How do you make it so it only displays one chosen city’s weather like apart from just removing the search box how would you call just to one city in particular
How do u run the weatherapp on the side? Like with it as a reference constantly updating. Because in my case, it said "code language not supported" even though i have all the necessary extension done. what do i need to install or add to make the code run, it also just says, bash: start: command not found. Pls advise thanks.
I downloaded it from Github to try it and it is not working. I also inserted my own key from openweathermap and still it doesn't work. I run it on localhost. Do I have to upload it to a server to work properly? I mean I can open the index.html in a page but when I enter a city name and hit enter it doesn't do anything. Could you help me please?
Hi tyler, i followed your tutorial from beginning to the end but i encounter this error:::::::: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"::::: i went to your github link to download your codes but yet it didnt work too.. Please help me out. thanks
Why my code doesnt working? The part when i want to change the temperature and degree doesnt working. And im sure i didnt made a wrong code mistake or something else like typo. Is there anyone can help how to fix this?? rn im stuck in there
This is one of the best tutorials I've come across. Thank you so much. Your knowledge was really helpful.
Thank you I really appreciate it! :D
I love how he said it was going to take a long time to style the app and literally took him what it takes me to center a div lmaooo
So rock and roll mate. Loved that you were yawning during the video because you can clearly do this kind of thing in your sleep. Thank you for what was arguably one of the best tutorials I have ever experienced. Logical and incredibly well executed. 5 out of 5 stars
Glad you enjoyed it!
let's goooo - finally got a breakthrough in my project. This is the only video that has actually helped me understand APIs. Thanks Tyler!
WOOO! That's a win!
This is honestly one of the best tutorials I have done in a long time. Great work on this, I can't wait to see more!
hello
if do u have this complete code then i wanna get this.
quick reply me
Thanks a lot for this wonderful tutorial Tyler! Love how it's just vanilla and no use of any frameworks/libs or whatsoever.
Glad it was helpful!
This was my first ever code along project using API calls. Thanks for making it easy to understand!
thank you so much for making a video with clear explanation and not just putting edm in the background while you code!
Thank you so much for this man! I followed mainly with the code but added a bunch of comments so I can write exactly what each piece of code does.
Those are BACK TICK marks inside that fetch request!!!!!
For anyone who is following along this is the key above tab, next to the 1. `Back Tick` is NOT THE SAME as 'single quotes'
Beautiful walkthrough from scratch. Couldn't ask for more. Thank you so much for sharing. Stay Safe
Glad you enjoyed it
What a knowledge Tyler 👏🏻
Congrats man. wish u all the best 👏🏻👏🏻
Wow, really good tutorial. I finally made my first weather app. Thank you so much man !!!
Great to hear!
@@TylerPotts hey I just wanted to see how it works before starting it so I copied your code to check, but it didn't work.
Nice tutorial dude, I learn best by playing around with stuff and this has been a huge help. Great base to add stuff to as a challenge, adding changing backgrounds and displaying the time for each location in real time was fun.
Hilarious that you mention that. I just got to changing backgrounds. Just finished immediately moved onto doing time for each location.. Did you use a seperate API?
@@kaneUKGB Nah, from what I can remember this API returns a value that stores the difference between UTC time and the current location's time zone. So you can find UTC time and then add (1000 * weather.timezone) to it to find the time in each location.
I'm in minute 02 of this video and I already love you very much for the live-server tip 🤣
Haha, I'm happy you enjoyed it!
Never mind. I got it working. It turns out you have to add the backwards quote marks instead of regular quote marks. I think you forgot to point out the distinction. Thank you for your help. This was a wonderful tutorial video.
Hey! Thank you! Sorry, yeah sometimes I just assume people will know what I mean 😅
I really can't figure out how to get a proper base for the API key...can someone help? Thanks!
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const days = ["Sun","Mon","Tues","Wed","thurs","Fri","Sat"];
Thanks! I knew that some kind man leave this in comments :)
Can't help but think even without watching the video that they should be const, months and days wont change.
Correct
It doesn't work for me
Thanks G!
Your yawning made me sleepy....😂😂btw nice tutorial.🔥🔥
yeah 😂😂😂😂😂😂
this was quite exciting ..really appreciate the simplified tutorial
Thank you so much for this amazing video...
It's very useful to me...
Thank you thank you thank you so so s much❤️❤️🔥🔥🔥🔥🔥🔥🔥🔥
The introduction of async await is really a blessing for JavaScript developer.
async function getResults(query)
{
const res = await fetch(`${api.baseURL}weather? q=${query}&units=metric&APPID=${api.key}`);
const result = await res.json();
}
Avoid chaining of then statements 😂😂
This tutorial is amazing. It helped me to learn lot about api and how to use it.
Great Work Bruh 🙌🙌🙌
Loved the vid man. Thanks for the tutorial.
No problem 👍
Great video.
Great start to my portfolio.
Thanks for the info!
Glad it was helpful!
I really like your vids mate! so good for new coders like me
That's why I am here!
I loved it so much this tutorial. Keep up the good work :)
Thank you! Will do!
that's a great tutorial .I heard you yarn ,thanks for hard working
Hi Tyler, great vid by the way. I'm just starting my coding journey but was wondering what are the best and easiest projects for someone like me to begin. I've watched this full video a couple of times now and I still don't get half of what's going on when it comes to the JavaScript. So I guess my question is What's the ideal projects for someone that is completely new/has limited JavaScript nowledge ?
A to-do list! It teaches you the basics of CRUD (Create Read Update Delete)
@@TylerPotts thanks for the reply Tyler appreciate.
Hi, I have a question, in getResults function, You invoke dispayResults without adding any argument and displayResults, which requires 'weather' parameter somehow gets it. Is that because getResult return 'weather' json object and displayResults takes returned value as a parameter ??
Thank you for the project. It was fun and simple. I want to practice more.
Awesome! I'll be doing more projects like this going forward! :)
Very nice. But you should take advantage of CASCADING Style Sheets. You don't need to declare the color to white everytime, just declare it on the body and let it cascade...
Of course! I'm not used to using a singular colour on the page :)
I really enjoyed this video. Thanks for making it.
Happy you liked it
20:36 I am wondering if calling document.querySeletor inside that function is inefficient compared to calling it at the top of the script.
really nice！add weather icons beside the weather description will be better ！
Loved your tutorial- thanks so much! When I type in a city name, there's no response. I'm using your github source code, but am using my own api key which is working with another weather app I made. Any ideas? Thanks again for your work, Tyler!
After 20 minutes narrator wanted to sleep :) But video is useful, thanks! And for consistency - i think that in hilow querySelector you should use '.current .hi-low' not only '.hi-low'
still new to api's. did you go through the whole api documentation on their site or is all api code similar?
You should always go through the documentation and all APIs are similar but different! 😁
Their documentation seemed confusing to me. Well I'm a newbie
@@TylerPotts the base api key doesn't seem to be working anymore. can you confirm?
@@mateusloubach yes for me too.
Am I allowed to use this as a base code for my weather app that I want to develop? I will give credit if you want. Just starting so want to examine and take parts out of it. 😊
thank you for the video,i got something from it,
nice practise
Glad it helped
love your effort in styling..my bro
Hello! I'm very new to coding, I just started last month. I tried creating this weather app, however when I ran the code with lite server, I saw that the browser couldn't find the parameters in the fetch api. Is anyone else having this problem? I tried changing the parameters to match a sample api call from OpenWeather, but it is still not working. Any help would be appreciated.
Hi 🙋🏻♀️ .. thank you for this video
Can you please explain what means if ( event.keycode == 13 )
Whay 13 exactly?
13 is equal to the return / Enter Key... so if we check for event.keyCode === 13 we are checking if someone has pressed the enter/return key :)
Cheers mate. Excellent video.
Thank you!
Hi Tyler, idea for the next video if it is gonna be a weather app but in Vue or React. It would be nice if you showed how to dynamically change the background image based on the current temperature in the searched city. For instance if it's -1c it would change the background image to a winter looking image, and if its 22c it would show a summer ish picture as a background :).
Yes!!! I love that idea! I'll see what I can do
Awesome tutorial 😀
Thank you! Cheers!
Thanks for the video! How should I manipulate js if I wanted the background image to change according to the weather?
It is a very good and to the point tutorial. But, there was many "promises" from an API. How come you didn't use "async ... await" with your functions. Are they arbitrary in JS?
Where did you get the base url from?
hi, how can I implement a language change. As I noticed you write the notation api a little differently as they write it on the site and I do not know how to add a language change, thanks.
PS: awesome video
Nice video tutorials. I have a question, how did you get the base link?
What is an api url? like how do u find it im stuck on that part cause it wont work
Edit: 1 day after this i finished the project and this was my first time coding so when i found out half the things u said i hadd to do it myself.
Can you explain to me how can I make the input field show under it the name of the city? For example if I type N it needs to show me some suggestions of cities that start with that letter.
That would probably take another hour or two to implement in PURE Javascript.
@@zut25 well I just want to know the logic behind it
Excellent tutorial !!!!!!!!! Thnx tyler :-D^_^
How would you change the Background Colour based on the current weather (Sunny, Cloudy, Clear, etc...)?
I've never done this myself but logically I would think that you would make however many CSS styles for the type of weather you want with a class such as "cloudy-weather" or "rainy-weather" and then using JS do some sort of if statement in regards to the current weather and add the class for whichever weather .. like "if weather is less than 20° add class "cold-weather" to whatever your element is called" you'll also have to remove the current class. just a guess, im learning just like everyone else.
19:16 that yawn was funny hahaha
I built whole api by seeing your video. facing an error :
This One=> Uncaught SyntaxError: Unexpected identifier
In this line => baseurl: "api.openweathermap.org/data/2.5/"
need your help
yes i am having the same error
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
he wrote api.base instead of api.baseurl and i cant figure out how it worked for him haha but yeah. hope im not too late for this.
@@alexpretzels yeah I done with it. Friend help me and solve the issue
Hey Tyler, I double checked my code with yours and things appear to match up, but once I press the enter button after entering a city name, I get a 404 error in the console. Can you help me with that by chance? Thanks!
Amazing tutorial. Thank you so much!
Hi Tyler
I was trying to follow your weather app tutorial.
But when I finished and searched for weather in London, then in York for the current day - 02 09 21
The app didn’t work,
Could you explain to me please how I can make your app show today’s weather?
Thanks
You just won yourself a loving subsriber. thanks for this, how can i email you?
Hey, awesome video bud. How can I convert the temperature to Fahrenheit? It's currently way off for me lol. In the getResults function, I set the units to customary but I guess that didn't work. Any help would be great, thanks!
If you remove the &units=metric part of the fetch url it will return as fahrenheit!
I just changed &units=metric to &units=imperial and then made sure to change all instances of °c to °f in the HTML, etc. because even if it spits out the Farenheit numbers, it will show °c unless you change it to °f.
Awesome video bro... thank you!
It is not working for me and I cannot figure out where it went wrong. Could you explain how you imported the API_key again?
Same
well u earned my subscription
It was very cool! Thanks
Thanks for this video. Is the base url always the same,
which design pattern did you use on this project?
I did not use a design pattern I'm pretty sure I just quickly whipped this up from the top of my head.
Perfect channel!!! Thanks for sharing on r/learn js
From where did you get the background image? i want get more
Hey Tyler, where did you get the baseurl from?
When you sign into the openweather API and create your free account,in your account there is a get started tab,which will give you a link,similar to the base url used in the tutorial
thanks a lot! best tutorial!
Happy you like it!
Nice. Where did you pick your url from?
It was hard to really see those codes ...
Strained my eyes a lot
Nice content tho ... Still worth anybody's time
Apologies! I newer videos are normally lot more zoomed in
Hi tyler looking forward to your tutorials , id like to ask can i use sublime text 3 instead of visual code?
of course!
What is a baseurl? Please comment because the my program is not working I probably did some mistake :(
Was wondering if you could explain to me why you use `${}` I understand that it way to reference the JSON object that has been created, but have never used this before as I have done things with JS that are native like regular functions() instead of => functions and this has lead me to believe that you code is more concise than what would of been mine. What is the reason you use `${}` instead of "text+json.object+text" thanks in advance.
The base url is the address of the homepage right?
hii love you vids man
just wanna ask something how did you get the baseurl and everytime i type in baseurl it shows an error
Awesome!!! TQVM!!
Very helpful!
Happy to help :D
Great video
not working anymore?
Uncaught (in promise) TypeError: Cannot read property 'country' of undefined
at displayResults (main.js:24)?
Hey man i just had the same problem. I fixed it by putting a / between {api.base} and weather in the fetch request like so:
fetch(`${api.base}/weather?q=${query}&units=metric&APPID=${api.key}`)
@@tokiloki5818 for reals? thanks bro ill try when i get home.
That worked thank you so much!
i amm having th same prblm , i did eveything you replied use my api key ,, change baseurl to base added / but nothing happened, still getting error
Not working in the source code! When I entered the city then nothing happened! I changed my own account's API. But It's not working!
same here, did you find a solution?
try changing "baseurl" on your api key to just "base"
@@juanzaragoza2660 what should be the base url ? is it the one he used ?
@@zarifhasan2206 the url is the same as his although the key has to be different. So log in to the account and copy and paste the key!
@@juanzaragoza2660 gotchu it works thanks
How do you make it so it only displays one chosen city’s weather like apart from just removing the search box how would you call just to one city in particular
Can this project we can call backend and fronend software?
Not exactly, it's more frontend using an API
How do u run the weatherapp on the side? Like with it as a reference constantly updating. Because in my case, it said "code language not supported" even though i have all the necessary extension done. what do i need to install or add to make the code run, it also just says, bash: start: command not found. Pls advise thanks.
you are the best!!!
Are you use the One Dark Pro theme or Material Theme ?.
Material!
@@TylerPotts Thank you.
I downloaded it from Github to try it and it is not working. I also inserted my own key from openweathermap and still it doesn't work. I run it on localhost. Do I have to upload it to a server to work properly? I mean I can open the index.html in a page but when I enter a city name and hit enter it doesn't do anything. Could you help me please?
I found the problem. The API key took some time to get activated. Now it works just fine. Excellent job my friend.
can you explain which part is not working
smething theapi key gets 1 hour to get activated
How does the now variable you put into the datebuilder function know todays date???
getDay, getDate etc... are methods that fetches current date.
You seemed sleepy in this one. But the tutorial was awesome.
how to make it display the local weather on load? I mean before actually inputing the loction.
Hi tyler, i followed your tutorial from beginning to the end but i encounter this error:::::::: "SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data"::::: i went to your github link to download your codes but yet it didnt work too.. Please help me out. thanks
I have same problem?
How you sloved it?
im getting tht the key is invalid
but i have generated and used the right key
Why my code doesnt working? The part when i want to change the temperature and degree doesnt working. And im sure i didnt made a wrong code mistake or something else like typo. Is there anyone can help how to fix this?? rn im stuck in there
Check the description for the GITHUB Source and look over it
Can you please like from where we can get the basic url?
So vanilla js is just pure js right?
Right, no any frameworks.
Yes there is nothing but plain JavaScript
how can we fetch data according to the users current location, so that user dont have to type the city again and again