How To Make Weather App Using JavaScript Step By Step Explained
ฝัง
- เผยแพร่เมื่อ 4 ต.ค. 2024
- Learn How To Make Weather App Using JavaScript Step By Step Explained | Create Weather App In HTML CSS and JavaScript
#JavaScript #JavaScriptProjects
👉 Download 30 JavaScript projects Source Code (Including Weather App):
greatstack.dev...
👉 My JavaScript Advanced Course: greatstack.dev... (75% Discount)
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video we will learn to create a Weather App for Website using HTML CSS and JavaScript. We will get the current weather data from Fess API fey from OpenWeatherMap and display the weather information like Temperature, Weather condition, Humidity and Wind Speed according to the city on our website or app.
We will display the weather info on website from Free API using JavaScript.
In this weather app we will add one search box where user can enter the city name and get the weather information of the particular city.
Download Images: greatstack.dev...
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Images Credit:
www.freepik.com/
-------------------------------------
Connect with me:
👉 linktr.ee/iama...
👉 My JavaScript Advanced Course: greatstack.dev/go/javascript-course (75% Discount)
Just finished building this app. It was really an awesome experience for a beginner. Everything is explained step by step, systematically. Thank you for your efforts.
Any error
Bro i got error ,not getting details of city time stamp 22:32
Hey are you getting temperature in Celsius? Because I'm not getting it after applying units=metric
Bro weather images are not updating...
@@nazamwasi3357 same
Great video, learning by practicing is so much better. Even if all you do is copying a few lines of code that you see in each lesson. It's much more effective than just taking notes.
I know this because I tried everything and the only way I could learn (and retain what I learned) was when I started doing that.
Once a friend suggested me a few books with interactive content, that made me practice what I learned at each chapter.
Edit: For those asking about the books I mentioned, these are the best ones:
"Javascript In Less than 50 Pages"
"Head First Javascript Programming"
If you are into learning Python, I love "Smarter Way to Learn Python".
best
"Could you please clarify where JavaScript is utilized in the project? Although it was mentioned that we would be building it with the help of JavaScript, it doesn't appear to have been incorporated
i was literally searching for this comment , now i'm confident that i can learn through projects rather than watching tutorials only
@@AmanSingh-nf1kn also try to add at least one feature or one thing that is just from you, thats helping me a lot. It tests my knowledge
somebody has this book ""Javascript In Less than 50 Pages"" in PDF?
"That's it... practice, practice, practice." Thanks a lot. I'm planning view all your videos.
You sloved addEventListener problem I not able to click and change city information
crisp and sharp to the point without any unwanted content. looking forward to complete every projects as mentioned for continuous 30 days .Thanking you for creating this wonderful playlist.
Clear cut and straight forward to the content. Best yet easy lecture Thanks a lot 🤗🤗🤗
good video. Tech with Tim is also good.
I just finished this one and I'll finish all 30 projects....you are a good teacher,god bless you
Not able to fetch the temp of Himachal pardesh. Can you please help me
how much time it took to create the API?
usne city leha hai state nahi
@@Shivi-e2d
Bro,please help me out
How long it took you to active the API ?? Can you please tell ?
it was an awesome experience building this app . Cleared a lot of concepts .
bro i have been watching your tutorials since you were easytutorials and i have learnt stuff like digital clock, calculator responsive login/signup page. Thank you for this
You are the best teacher ever in the world. You simplify things to the ground.
Just finished building this app. It was really good experience for a beginner. Everything is explained step by step, systematically. Thank you
DId the API key worked?? bcoz for me it shows invalid every time
@@harishrajaramesh1694 same
@@harishrajaramesh1694 Same it's not activating what should i do
@@harishrajaramesh1694 same for me. did you solved the problem?
Can anyone tell me which api he used and it is paid or not? and there is any link from where i can get the codes
For people who are wondering The API Activates roughly around 3 hours, hope this helps
In between that time, did we log off our lap?
@@bhuvaneswarip1032 yup as long as u know ur password, or u just logged in in the browser u will be able to access it
I was using the same api the he used but wrong api message occured why ? Can u plz tell me where i get free api with key
@@iam_sami74 i need to see your code to understand and solve the problem.
Heyy man, thank you for this tutorial, I finished this project in approximately 4 hours of my time. I am currently specializing my skills in javascript, because I want to be a web developer someday and this project series of yours is one of the things that I am looking for. Thank you for your time and effort just to make this 30 projects and shared to your audience.🎉
Hey can you please give me source code!?
Best Channel for hands on working with Javascript projects...Please do nodejs projects also...Thank you
Thanks for your comment Vivek. Have already done E-commerce and Food Delivery app using Nodejs. Please check it.
i just start learning JavaScript, i think so far your content is one of the best keeping up the good work and we love you so much
Amazing project for beginners, well explained.
completed it within 2 hours.
Thank you so much for this series.
(PS: the API key was activated within 10 to 15 minutes)
Glad you liked it! Thank for the information on API.
Hey please give me source code 😢
"Excellent tutorial! Clearly explained, easy to follow. Made creating a weather app with JavaScript a breeze."
30:42 I m having Event listener error why???
Avinash, You are a real hero...... You make coding very easy for us to learn.
THIS WHOLE PLAYLIST IS A GIFT FOR FRESSHERS LIKE ME WHO WANTS TO LEARN SOMETHING NEW
Aman you build this weather aap
You are my best youtuber now. I developed my first web app with your tutorial
he uses old ways of coding, you should try learn modern ways (usign a local host plugin or even software + not in beginning from a project and write it completely identical same but try to use courses and then just from scrath on your own)
Please give me source code
Just finished the application, get to know about api in detail, finished this project within 2 hours, take 20 minutes time to revise and i get to know that everything i am able to understand.
Thank you for making this project.
Please give me source code 😢
@@Sumairesthetics_ here in comment section you want or somewhere else?
@@adityarajsah414 can u give here only
meray se to search button ka layout shape hi round nhi bn rhi pta nhi kahan error aa raha
"Excellent, easy-to-follow tutorial on creating a weather app with JavaScript! Highly recommend."
This video was so useful to me for practicing as a beginner, by doing my own version of this project i could learn and improve a lot. Thank you sir!
if you have made it can you give me the source code
just completed wether app project .this waaaaay i say project based learning !!! thank u so mach 😍😍😍
Thanks a lot you actually started my web dev journey!!!
সত্যিই খুবই চমৎকার একটি শিক্ষনীয় ভিডিও। বোঝানোর ক্ষমতা অসাধারণ-A very nice educational video indeed. The power of persuasion is extraordinary.
apnar bari kothay bro???
You are an awesome teacher, but when you said Germany is a city, it was too funny.
thank you so much for this project i have made it and it is perfect for my mini project
Glad to hear that. Thank you. 😊
00:02 Create a weather app using HTML, CSS, and JavaScript.
02:40 Automated webpage refresh after code changes
08:37 Creating weather app using JavaScript
12:07 Styling the weather details with CSS for better visibility.
18:13 Setting up API key and URL for weather app
21:48 How to display weather information in the browser console using JavaScript
27:41 Creating a weather app using JavaScript and fetching the city information from an API.
30:39 Updating weather information and images based on city input.
36:20 Adding error message for invalid city name input
39:05 Handling invalid city names and displaying error messages
I have 1 query regarding API like How much time API taking for activation ?
bro please do tell me does it takes hours to activate
because i am stuck in this now
How much it's take
@@pankajmandal7204 how much time it's has taken
@@aartsprinkler In Vdo he said, it may take couple of hours🤔..............
Hey, it's an amazing tutorial for learning HTML, CSS, and JavaScript by making a small hands-on weather app. Thank you.
great project completed in 3 hours
Glad you completed it. Keep making more projects.
bro can you send me source code
@@sk.creations. provide your email ID
completed the app today, thanks for the great explanation
Glad to hear that. Thanks for your comment. 😊
Please give me source code
All the projects are life savior for beginners, thank you 3000❣️
Hello. Can u understand me to how can I acess sir's pdf in which all images are there
@@Nitishyadavlog There is a given link of google drive .. from where you can download images
Thank you very much. You explain so well and clearly. God bless you abundantly.
Great tutorial, I'll do the other 29... But a suggestion following the syntax you were using.
why use
if (data.weather[0].main == 'Clouds') {
weatherIcon.src = 'images/clouds.png'
} else if (data.weather[0].main == 'Clear') {
...
}
instead of
weatherIcon.src = `....images/${data.weather[0].main}.png`
Remember to rename the first letter of each image you are going to use.
thank you for this suggestuion
@@epicgameboi
dont worry it also works with lower case
That is why he used == not ===
I also completed this project alongside you. Also I used weather api icons for dynamic changes. Loved this simple and informative project.
Glad to hear that. Did you also check out our To-Do list app in JavaScript?
@@GreatStackDev Done it by myself. Is there any fully functional e-commerce website project ?🤞🏻
@@KardanKaaal my api is not working can you tell me what to do please
A nice explanation and it looks like clear and very easy lecture for students a lot ..Really very thanks to you Avinash Sir.. I love the Way of Explanation
"Could you please clarify where JavaScript is utilized in the project? Although it was mentioned that we would be building it with the help of JavaScript, it doesn't appear to have been incorporated
MashaAllah
Kamal ka samjhaya
Best
Hey in part 34:00 when yall are adding the weather images you can add them like this ->
if (data.weather[0].main != null) {
weatherIcon.src = "images/" + data.weather[0].main + ".png";
}
Thanks for this
This was PERFECT , thank you for this it worked perfectly and it was easy to follow you up
how does image comes? by default or it should b save in our pc?
@@Zaynahazlanworld we should save those images provided in the description so that we can addd them.
U did it very beautifully, just one thing is that we need u explain the code purpose while writing any line of code so that the newbies also can understand very easily. That helps a lot. Thank u
exactly
Very good tutorial. I am wondering how we can set defaults so that it is the users current location and also how to add an error catcher for the async function?
Just finished this! Thank youu so much for great tutorials!
This Tutorial was very amazing .... i have learned many new things from this weather tutorial app like how to use api keys, some interactive javascript functioning etc... IT LOOKS VERY AMAZING WHEN I HAD APPLIED *SHAKE ANIMATION* ON *INVALID CITY NAME* That i have learned from your last tutorial ... Thanks GREAT STACK & TEAM :) Keep It UP
Bro,please help me,I'm stuck
@@princeshukraan3099okey bro, How can i help you ?
@@princeshukraan3099 where are you stuck?
@@abcdabcd8605 those images are not changing according to the weather data
@@abcdabcd8605 bro you can help me im stuck
Thanks for this video , this video is very useful for me thank you so much sir 😊
I'm so glad! Thank You. Keep coding.😊
in place of if else if statements to select images we can also write ->
document.querySelector(".weather-icon").setAttribute("src","images/"+data.weather[0].main+".png");
Op bro You have really good command on DOM Manipulation. Thanks for good suggestion.
what a legend! thank you for this command!
Nice - There is an even easier way to do it by setting the src property directly:
document.querySelector(".weather-icon").src = "images/"+data.weather[0].main+".png"
Thanks man! I've been learning JS and this was very helpful. I'm going to push this project to my github.
after how much time Api key activates?
Can I close the tabs or the system while waiting for the API to get activated and then come back to the link again ??
You helped me a lot with this explanation/tutorial, Thank you 👍
I really appreciate your lecture. This is my first app using JavaScript. I'm happy that I could make an actual app. I couldn't understand some lines, so I will search later and keep learning. Thank you for making this lecture!
Hey, i need a help
@@yashikagoyal9523 where
howlong did it take to activvate the activation key??
@@chinmaywasule249 I have the similar question
@@joybratadas902 it was activated in an hour or 2 ig
ThankYou buddy. Was an intreseting video, learned very much.
Great tutorial! App looks great. Seamless walkthrough my friend. Thank you!
Glad you liked it. Thank You. 😊
Please give me source code
I really appreciate your lecture ❤. This is my first app using JavaScript and it’s not working well for some reasons I don’t know 🤷♀️, it’s says in the console (uncaught TypeError: cannot read properties of null (reading’addEventListeneer’) 😢)
Do js inside html not external ( Herald ko ho bhane reply )
@@gaminghubnepal8500won't it work if I do it in an external js file?
@@gaminghubnepal8500 is there any way to make it work in external js
You can use external js file, just use the defer attribute on the script tag
Seriously so much to learn, it was a great experience❤❤❤
after how much time Api key activates?
@@tayyabnawaz6389 1 day 😂 that's how much i waited for.
So simple yet very good and excellent explanation thank you!👍
"Could you please clarify where JavaScript is utilized in the project? Although it was mentioned that we would be building it with the help of JavaScript, it doesn't appear to have been incorporated
@@maheshwarimandigam5464 well it is simple beginners project where we are using javascript just to fetch API data and display that data using getelementbyId or querySelector
@@maheshwarimandigam5464 are you beginner ?
@@maheshwarimandigam5464bro he did something that we don't no not in javascript but in css too
@@maheshwarimandigam5464 It's the code where he is using api and calling the function ,that's the javascript part.
good wow so well explain our future is bright
Glad to hear that. Thanks for your comment. 😊
Please provide the code files and the links in the description as soon as possible. Thank You.
It's better to learn by typing everything yourself not just copy ans paste
Thank you very much for the content you are delivering. I am sure it's helpful for me and i am learning a lot by actually doing it.
you dont need all those if statements to change the icon based on condition, you can try this instead:
let weatherCondition = data.weather[0].main.toLowerCase();
weatherIcon.src = `images/${weatherCondition}.png`;
It's awesome... How we get your source code, sir?
simple and awesome tutorial.... thanks
Glad you liked it!
been learning alot thanks to this videos.
i was able to recreate this project...everything worked fine....except the weather icon its not changing..
if(data.weather[0].main=="clouds"){
weathericon.src="images/clouds.png";
if you could give me some pointer it would really help me.
I think it's "Clouds" not "clouds" in the condition
I see I will try it later. Thanks 🙂
I m getting same problem will u pls send ur code to me if possible
I m getting same problem how does they will solve the issue
any one can help in code ?
Try using this for me it worked switch (data.weather[0].main) {
case "Clouds":
weatherIcon.src="images/clouds.png";
break;
case "Clear":
weatherIcon.src="images/clear.png";
break;
case "Rain":
weatherIcon.src="images/rain.png";
break;
case "Drizzle":
weatherIcon.src="images/drizzle.png";
break;
case "Mist":
weatherIcon.src="images/mist.png";
break;
default:
console.log("No weather icon available.");
}
thank you so much for this beautiful practice💌
For anyone getting 401 error in console replace the following code entirely with your current function
async function checkWeather(){
const response = await fetch(apiUrl + `&appid=${apiKey}`);
var data = await response.json();
console.log(data);
}
Ps: The problem with my code is that I used single quotes ( ' ) instead of backticks ( ` ). Hope this solved your problem.
Thank you, It corrected the errors I was getting.
im getting a fetch error its saying failed to fetch, i checked the URL its working great but I don't know its giving error on console
thanks for explaining bro
Thank you so much
hyper pedagogue je valide ca fonctionne ^^ bien joué
I'm unable to fetch api, it shows unauthorized(401)
Same here I can't fetch in console log say unauthorized please help me and can't change places on card
@@adsye0015check ur api key
Take 15 min then fetch
Maybe your account is expired so try to sign up with another account. Then it will work perfectly
Did you able to fetch api?
You made coding very easy Sir!!!
i have a cod:401 "invalid api key" error. But in members section my key is seems to active. What is the problem ?
Hey you got the solution? If yess then plzz tell me
@Kelvin Mvungi its showing me the same error in the console. previously on browser search it was fine for me.
u there?@KelvinMvungi
I have solution
Add API key (&units=metric) just same as like
Thank you, Avinash! Your explanation thoroughly helped me understand the concepts covered here.
Did you complete the weather app ? Could you please tell me how much time it took to activate the API key ?
Sir console me API ka data update nhi ho rha erors aa rhe h java script ki please help
you should surround the variable with backticks (`) instead of single quotes (') for it to be interpreted as a template literal
wrong-const response = await fetch( apiUrl + '&appid=${apiKey}' );
right-const response = await fetch(`${apiUrl}&appid=${apiKey}`);
@@271_jatin_singh_6thanks a lot.. It worked 😊
Amazing Project with straight forward explanation.
Broo why you hurt bruuuh xd what you do i know but i give source code of it with more functionality to many people
Thanks alot,, great great playlist. It’s helpful for beginner ❤
It's not displaying like yours😭
Bro, device ka bhe farak padta h . If you are using pixels
Did you work it out?
skill issue
Minimise the use of px, instead use % or vh,vw
Great job! Precise and to the point.
i learn a lot with you thanks may god bless you
🤲
Awesome tutorial💯
Just finished buidling the Weather App
I learnerd how to use InnerHTML with Javascript and alot of cool concepts.
Thank you very much sir.💥💫
@JGxJAMES i am also getting an error are you also getting error 401 ?
Please give me source code 😢
Thank you for the video! For me, as a beginner, it is a great way to learn more and develop skills.
did you get the activation key
beautiful and very well explained, ty
Glad you enjoyed it!
Lots of thank you. My app is working now
Api will work?
@@Astra4450 yes if you have any error in your API. Just Copy whole HTML code ,Js Code, Css Code then paste it on Chatgpt. Chat gpt can detect the error and execute your code properly .Then you copy the code and paste in vs code …it will work properly
Thanku very much sir you explain it very easily
Thanks a lot! You are wonderful. I followed the whole video and the outcome is the same as yours. I gained fundamental knowledge about the differences between HTML, CSS, and JS in practice not only in theory. Keep up the good work.
Your api key is working?
@@bi.ke__editorAbsolutely!
Please give me source code
great project to kickstart your webd journey
Thanks, great tutorial, I learn about fetch API after this one.
tried this without watching only checked the api, really like the result of the video, but its way more fun to try it first
I liked this weather app taught me in depth, thanks
Thanks, finally something i can relate, understand and practice for my vue projects.
Thank you so much sir i have learn so much with you.....
Thank you so much! You've earned a new subscriber!!!
Thanks for the sub! Hope you will like this 30 JavaScript projects playlist: th-cam.com/play/PLjwm_8O3suyOgDS_Z8AWbbq3zpCmR-WE9.html
i am followingg yourr js serries great work man thanks
GOOOD VERY GOOOD NIIICE INTERRRESTING BRO THANKS THANKS THANKS A LOT....THANK YOUUUU.....
Great video please java, javascript, and python to gather work on one social media app how to work it. Thanks
Can u please send me source code
wow to this content!!!!!!!!!!!!!!!!
Expecting the MERN stack course with detailed expln.
straight forward explanation
I,ve just finish this project and i,ll definetly finish all the project which is present in playlist😍.
Can anyone tell me which api he used and it is paid or not? and there is any link from where i can get the codes
bro how manytime taking to generating an api reply me
Hey there!
thanks so much it's been something unsual.
Your the best in this thing
I really like your chanel and your code along projects. Quick suggestion though, maybe talk about the logic you chose, why you did things a certain way as opposed to another, that would be of immense benefit to those of us who are learning
thanks alot after many trials i was able to download the images