💖 Let me know if you have any questions! 🗣 What do you want to see more of on my channel? 🎁 Win some tech from Android Authority - bit.ly/android-giveaway 💹 Get FOUR free stocks (minimum value of $21) when you join WeBull with this link - bit.ly/get-webull 👍 Thanks for watching! Don't forget to like and subscribe!
Hey Jonas, Can you please do a video on error handling in this particular project. for eg: If a wrong city name is entered it throws an error on the page saying "Please enter a valid city name..."
Just completed the weather tutorial. I learnt a lot and I liked the video. This was my first introduction to using an API, I'm glad I started with this video! You explained really well, you tested and debugged, great vid. Thanks mate!
Just wanted to say this was a very good tutorial. I followed along and completed the app and also learned a lot. Looking forward to more videos! Thanks!
This is a fantastic video probably the best one I have seen so far, you go along at the right pace explain how things work and what everything is doing, speak clearly, I learned a lot from this tutorial
Was keen to learn about APIs and thought a weather app would be a great start. This video was perfect for helping understand APIs and how to use the information in a useful way. The background image generator is a super nice touch. Keep up the great content!
seriously thank you this is my first project and i really needed this time with myself i enjoyed every single second of this. 500 likes for you so grateful.
Can you please tell me where did you get the API? It's showing me an error. And also I can't find an api with name as an input, it's giving me geolocation..
@@deeptimayeemaharana2448 i had the same problem i had to google it. I remember i searched something along the lines of weather api with name + the name of the api that the video suggests.
Thanks, I appreciate the feedback! All of the code can be found in the description with MIT license. As long as you include the license with any parts that are copied, you are free to use the code and design.
Great tutorial, this really helped me put everything together with JavaScript. We just started working with API's in my boot camp this week and you gave me so much clarity, thank you!
Ive watched so many weather dashboard to do my homework, your instruction is the best by far!!! im finally understanding a little bit of getting the info from the api data array, love love love your video! thanks so much!
Nice introductory to API's. I never worked with them and i also used a different source for weather information so i had to do some debugging but it worked at the end. Overall a great tutorial.
Great tutorial with simple explanations of what you are doing and why. I'm new to using API's and was able to follow along once and then duplicate it on my own after. Thank you.
This was really helpful to learn a few things and I totally recommend this video. It would be nice if we can also make a script that recognize our ubication and display the city we live in the first time we load the page. I will search for it!
thank you so much buddy, it was nice tutorial I want part 2 with location detection and advance background images where the the image will be fetched similliar to temperature(is rainy - rainy photo, if icy weather - snow picture) cmon man!
Was updating this code lil extra tip to check if the city is NOT FOUND. use the response.ok function (returns true false) in the conditional statements right after fetch(). so it will be like fetch.. .then function(response) curly brace. etc etc if (response.ok) curly brace return the json, else .. maybe change the value in the search box to not found
when i try to display data in console console.log(name, icon, description,temp,humidity,speed); it says that it's undefined.... anyone else got that problem
I think you have chosen the 5 days API where you must go through a list before it reaches weather, so the correct way must be: const { icon, description } = data.list[0].weather[0]; const { temp, humidity } = data.list[0].main; const { speed } = data.list[0].wind;
Thank you for the great video!! When I got about 9 minutes into the video, my localhost stopped working. I'm new to this stuff, so I just made a new folder and then moved on (because it was working again). Then when it got to adding API Keys, my localhost stopped working again even after I retried duplicating the folder. My API key also shows as active but doesn't seem to be loading at all. If anyone could give any help at all (even Jonah) that would be 100% appreciated!!! Thank you for the amazing video and sorry to bombard the comments!! 😄
Thank you for this! I was able to re create it. I wanna try do 5 days forecast though and I did my research.. So far, i need to do a for loop but i don't know how to manipulate the html part.
Thank you for the tutorial. I have a problem, when a put on .weather.loading {visibility: hidden;} my div don't change his dimensions. He remains the same, he's not changing the height like in the video. I also do the same as you with all, even the document.querySelector(".weather").classList.remove("loading"); in the displayWeather function, but nothing change.
Nice exercise in working with APIs! I like that you kept the errors in the code. While I was following along, I would pause and see how far ahead I could go and would run into an error ( like appkey instead of apiKey) and I thought it was something that I typed wrong. However, I was able to find the error myself and after unpausing, got the confirmation when you fixed it as well. Debugging does wonders for helping cement something into your brain. Well done!
I got everything except the background image changing...i've went over the code in the video and github, and still can't get it to work. Heartbreaking! But still, one of the best API videos i've learned from so far. Thanks for that.
Hi there. Thanx a lot for this tutorial. I forked the repository and i was looking for a way to make an exact app like this in javascript. Since i am blind i am going to do some cool modifications to this app on my repo on github. Thanx!
Hey there. Took this tutorial as a framework to practice some async await stuff, which worked perfectly. Also, you styling in Chrome is an inspiration and I do that with everything now haha. I do have one question. With the Unsplash API, there are some cities that return no image results, so the BG becomes a big ugly thing. Is there a way to check whether there are any results, then set a default image if there aren't any? Thanks much. Cheers!
💖 Let me know if you have any questions! 🗣 What do you want to see more of on my channel?
🎁 Win some tech from Android Authority - bit.ly/android-giveaway
💹 Get FOUR free stocks (minimum value of $21) when you join WeBull with this link - bit.ly/get-webull
👍 Thanks for watching! Don't forget to like and subscribe!
My code keeps on saying "INVALID API KEY". Kindly tell a solution i have checked the API key it is correct.
Hey Jonas, Can you please do a video on error handling in this particular project. for eg: If a wrong city name is entered it throws an error on the page saying "Please enter a valid city name..."
Hi Jonah Thank you for this wonderful video. can you tell me which extention did you use for React Icons?
Thanks bro
When you searched
Just completed the weather tutorial. I learnt a lot and I liked the video. This was my first introduction to using an API, I'm glad I started with this video! You explained really well, you tested and debugged, great vid. Thanks mate!
had you built another application with sound api before you did?
You are passing the knowledge in proper manner Jonah. I easily understood your way of thining here.
Now off to build my own weather app.
Cheerio!
Honestly speaking, what a epic tutorial this was. Thank you for teaching me fetch such data so easily
Wow, the skill of styling in the DOM the way you did was fascinating, thank you so much for teaching me this!
Just wanted to say this was a very good tutorial. I followed along and completed the app and also learned a lot. Looking forward to more videos! Thanks!
One of the best project I have made, clear explanation, good codes, teaching and amazing. Can't wait for other js projects
Great tutorial. Regarding what you could do next. When the app starts add city based on the client current location, instead of hardcoded one.
Thanks! I definitely could have added that, but didn't want the video to be too long. That may be a good topic for another video!
I made a part 2 video using your suggestion - ruclips.net/video/JdJ2VBbYYTQ/видео.html
@@DevProTips that's exactly what I was looking for. Thanks!
the best tutorial ever! I'm currently in an online program learning html, java & css and they don't break it down as thorough as this! Thank you!
Thanks for you tutorial! I loved learning API with you, Very simple and efective way!
Damn good vid. Probably one of the best tutorials I have ever seen. Clear, concise, complete.
You saved me my college asked me for work experience to enroll in a front end design program this is what i did in first go !!! big up brah
Wow! Just made my second third party api project within 2 hours thanks for this video
This is going to be how I learn to use APIs. Thanks a ton, man.
This is a fantastic video probably the best one I have seen so far, you go along at the right pace explain how things work and what everything is doing, speak clearly, I learned a lot from this tutorial
Thanks for clearing my doubts, almost every doubt including HTML, CSS and mostly Javascript. Thanks Jonah, from bottom of my heart.
Finally finished after two weeks of heavy focus due to a long work schedule
feeling so accomplished.
Thank you to the creator of the video.
🤟💌
did unplash work for you, im stuck there
Was keen to learn about APIs and thought a weather app would be a great start. This video was perfect for helping understand APIs and how to use the information in a useful way. The background image generator is a super nice touch. Keep up the great content!
This video is a huge help for a junior web developers like myself, clear and well explained. Thank you, keep it up!
bruh everything about this was sick the background image search was cool af
thank you sir. your guidance have help me built my first api call. cheers from malaysia
Thank you, first time using API's
i learned alot
Cheer from Brazil 🇧🇷
seriously thank you this is my first project and i really needed this time with myself i enjoyed every single second of this. 500 likes for you so grateful.
Can you please tell me where did you get the API? It's showing me an error. And also I can't find an api with name as an input, it's giving me geolocation..
@@deeptimayeemaharana2448 i had the same problem i had to google it. I remember i searched something along the lines of weather api with name + the name of the api that the video suggests.
@@Arturosuelto yes did it!
This is really amazing!!! I feel like I learned really helpful!!!Can i use this design in my project ?
Thanks, I appreciate the feedback! All of the code can be found in the description with MIT license. As long as you include the license with any parts that are copied, you are free to use the code and design.
God sent this was! Minimal , to-the-point, crisp and cool❤
Incredible tutorial, I'm very new to APIs and json, but this was very easy to follow.
Great tutorial, this really helped me put everything together with JavaScript. We just started working with API's in my boot camp this week and you gave me so much clarity, thank you!
ran into a few hiccups but it all worked out in the end. thanks a lot bro
Best weather app tutorial on RUclips
The best and exhaustive video that helped me buid a complete website from scratch 👍👍 Thanks a ton!!!
I had to use two api's, one for lat and lon and the other for weather data. thank you for the informative video.
Can you just send me just the code how you use the api part please
First time seen CSS done right in dev tools
Looks dope 🔥 man
Loved it!
It's so helpful to see an app from 0 to done in one video! Thank you!
Thanks for this amazing tutorial. Very useful since it was my first JavaScript project and enjoyed learning.
Thank you so much for taking the time to share your art/wisdom with us! It's people like you that help us newbies learn in an intuitive way.
just complete the fetch api and asyc await...thank you for this brother.
Wind speed in this API is m/s. Excellent video, thank you!
Ive watched so many weather dashboard to do my homework, your instruction is the best by far!!! im finally understanding a little bit of getting the info from the api data array, love love love your video! thanks so much!
Man, thank you so much for this. Helped me consolidate some knowledge and learn even more! Amazing, honestly.
Loved coding along. You explained things clearly and I learned soo much. New subscriber here !
TYSM for such an amazing video. It is short and precise. I am feeling a little bit confident with APIs now.Thanks Jonah!!
ALT + Z for God's sake.
Very clear explanation by the way
Nice introductory to API's. I never worked with them and i also used a different source for weather information so i had to do some debugging but it worked at the end. Overall a great tutorial.
Great tutorial with simple explanations of what you are doing and why. I'm new to using API's and was able to follow along once and then duplicate it on my own after. Thank you.
Pretty straightforward! I could learn a lot just by following it.
Just want to say what a brilliant tutorial, I learned so much , especially about api's
thank you for showing an actual workflow, found it useful!
This was really helpful to learn a few things and I totally recommend this video. It would be nice if we can also make a script that recognize our ubication and display the city we live in the first time we load the page. I will search for it!
Thank you for tutorial. this was my first application with API :)
"Denver" and "Tokyo"? Someone has been watching money heist. Great video!
Bro it's really amazing i just learn array and object destructing and than watch your video
That helps a lot
Thank you so much..
Wonderful video. Thank you so much!
Thanks man, I've been stuck with the fetch part and this helped a lot
what are the extensions needed for javascript because whenever i go to console and run the command it says uncaught refernce error
thanks brother I just absorbed a bunch of front end in one video!!
This is really a great tutorial, will recommend to any beginner...
facing issue with weather icons the real website might started using react/material
icons
best practice video for learning working with web api
one of the best video for beginner
while console logging weather.fetchWeather() it gives error -> Uncaught ReferenceError: weather is not defined ..... pls help
thank you so much buddy, it was nice tutorial I want part 2 with location detection and advance background images where the the image will be fetched similliar to temperature(is rainy - rainy photo, if icy weather - snow picture) cmon man!
I like this video. Thank you Jonah! I feel today that I learnt something from you. Awesome explanation.
Very Clear and at the right rythme ! Great work !
I subbed. Loved this. I like how you explained everything in every detail
Pls help🙏 only the icon is displaying, other details from js are not displaying
19:50
you should mention the point where you unwrapped the apikey from double quotes
YOU ARE A GOD... NO QUESTION ABOUT IT
thnaks so much, at least I learn to use api in js
Was updating this code lil extra tip to check if the city is NOT FOUND.
use the response.ok function (returns true false) in the conditional statements right after fetch().
so it will be like fetch.. .then function(response) curly brace. etc etc if (response.ok) curly brace return the json, else .. maybe change the value in the search box to not found
So well explained each and every concept highly recommended
Top content. This is my first dive in to api and was extremely useful.
when i try to display data in console console.log(name, icon, description,temp,humidity,speed);
it says that it's undefined....
anyone else got that problem
I think you have chosen the 5 days API where you must go through a list before it reaches weather, so the correct way must be:
const { icon, description } = data.list[0].weather[0];
const { temp, humidity } = data.list[0].main;
const { speed } = data.list[0].wind;
This is great 2 years later!
Thank you very much for the tutorial , works charming . Have a nice day sir!
Thank you for the great video!!
When I got about 9 minutes into the video, my localhost stopped working. I'm new to this stuff, so I just made a new folder and then moved on (because it was working again). Then when it got to adding API Keys, my localhost stopped working again even after I retried duplicating the folder. My API key also shows as active but doesn't seem to be loading at all. If anyone could give any help at all (even Jonah) that would be 100% appreciated!!! Thank you for the amazing video and sorry to bombard the comments!! 😄
Thank you for this! I was able to re create it. I wanna try do 5 days forecast though and I did my research.. So far, i need to do a for loop but i don't know how to manipulate the html part.
Thank you for the tutorial. I have a problem, when a put on .weather.loading {visibility: hidden;} my div don't change his dimensions. He remains the same, he's not changing the height like in the video. I also do the same as you with all, even the document.querySelector(".weather").classList.remove("loading"); in the displayWeather function, but nothing change.
Nice exercise in working with APIs! I like that you kept the errors in the code. While I was following along, I would pause and see how far ahead I could go and would run into an error ( like appkey instead of apiKey) and I thought it was something that I typed wrong. However, I was able to find the error myself and after unpausing, got the confirmation when you fixed it as well. Debugging does wonders for helping cement something into your brain.
Well done!
Hey! Can we search any city from there? Mine is not working that way
Make sure when you look at the api documentation that you are looking up the city. The first example is lat,lon. It tripped me up too.
I got everything except the background image changing...i've went over the code in the video and github, and still can't get it to work. Heartbreaking! But still, one of the best API videos i've learned from so far. Thanks for that.
I've never subscribed to a channel faster
thanks for this , luv man , it's fun to learn something real-world stuff
This was really great content. as a beginner in JS I was able to flow with every this as explained.
Thank you very much for making this video; I learned a lot from it.
This was an awesome tutorial! I learned a lot! Thanks!
Wow! Outstanding *Mk Voice* I really love this tutorial. Thanks a lot!
subscribed and liked as soon as I started watching .Thanks a lot
Thank you so much.. Great tutorial i learned a lot
Hi there. Thanx a lot for this tutorial. I forked the repository and i was looking for a way to make an exact app like this in javascript. Since i am blind i am going to do some cool modifications to this app on my repo on github. Thanx!
Very clean code man. I'm impressed ❤❤
Such a great video! I learned so much thanks again! :)
Thank you very much Sir... Very exquisite ☺️☺️💖...it helped me a lot to understand JS more... Please bring more HTML CSS & JS PROJECTS ... 🥺🙏💙
Man, thank you so much for this. I learned a lot!
Excelente muy bien explicado Mister Jonah.....saludes de los andes peruanos
Great video! You could've implemented some sort of button so the user can toggle between celsius and fahrenheit. Anyway, thanks for taking the time.
You're beautiful 🤩
@@harryporter2164 simp
Hey there. Took this tutorial as a framework to practice some async await stuff, which worked perfectly. Also, you styling in Chrome is an inspiration and I do that with everything now haha.
I do have one question. With the Unsplash API, there are some cities that return no image results, so the BG becomes a big ugly thing. Is there a way to check whether there are any results, then set a default image if there aren't any?
Thanks much. Cheers!
An awesome tutorial! I learned a lot! Thank you so much!
I really got to learn a lot from you ... an awesome explanation ......thanks
ohhh my, Thank you so much for the tutorial!!!!
thanks alot! amazing tutorial, keep doing the great work you do!
do more of this!! this is amazing