How To Make Weather App Using JavaScript Step By Step Explained

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/go/30-js-projects
❤️ 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: drive.google.com/file/d/1RgSe...
-----------------------------------------
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
👉 easytutorialspro.com/go/course/
-------------------------------------
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)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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/iamavinashkr

[@isamsvideoediting4572]

Avinash, You are a real hero...... You make coding very easy for us to learn.

[@maheshsale]

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.

[@Chandan-Singh10]

Any error

[@nazamwasi3357]

Bro i got error ,not getting details of city time stamp 22:32

[@panktichaudhari]

Hey are you getting temperature in Celsius? Because I'm not getting it after applying units=metric

[@behappy1666]

Bro weather images are not updating...

[@RudraShejwal-jv2bf]

​@@nazamwasi3357 same

[@quinojuan2]

"That's it... practice, practice, practice." Thanks a lot. I'm planning view all your videos.

[@VaibhavgiriGoswami-wx8ql]

You sloved addEventListener problem I not able to click and change city information

[@user-ns1bx5nl8p]

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

[@lakshmiprasannanadendla5145]

Clear cut and straight forward to the content. Best yet easy lecture Thanks a lot 🤗🤗🤗

[@user-rg7ec9cn7d]

good video. Tech with Tim is also good.

[@sirnicholas6177]

You are my best youtuber now. I developed my first web app with your tutorial

[@guy-was-taken]

Thanks a lot you actually started my web dev journey!!!

[@Krrishgames007]

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

[@user-pd9sm7lf5l]

Just finished building this app. It was really good experience for a beginner. Everything is explained step by step, systematically. Thank you

[@chukwuemekandiukwu1220]

You are the best teacher ever in the world. You simplify things to the ground.

[@clydeforland5944]

Just finished this! Thank youu so much for great tutorials!

[@andihoxhaj3527]

This was PERFECT , thank you for this it worked perfectly and it was easy to follow you up

[@Zaynahazlanworld]

how does image comes? by default or it should b save in our pc?

[@kevinvikan8115]

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".

[@Qasimyousaf-zw5kw]

best

[@maheshwarimandigam5464]

"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

[@AmanSingh-nf1kn]

i was literally searching for this comment , now i'm confident that i can learn through projects rather than watching tutorials only

[@littlecurrybread]

@@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

[@quinojuan2]

somebody has this book ""Javascript In Less than 50 Pages"" in PDF?

[@joeokat]

Thanks, finally something i can relate, understand and practice for my vue projects.

[@axitpoojara]

its just amazing , very proper explanation also better than some paid courses . thanks a lot

[@gomeztorricellygomez7808]

I just finished this one and I'll finish all 30 projects....you are a good teacher,god bless you

[@user-gu2sh6ty7x]

Not able to fetch the temp of Himachal pardesh. Can you please help me

[@mehwishjabeen526]

how much time it took to create the API?

[@prathmeshkirve]

usne city leha hai state nahi @@user-gu2sh6ty7x

[@princeshukraan3099]

Bro,please help me out

[@SkyCarly]

How long it took you to active the API ?? Can you please tell ?

[@Daniel-fj9ux]

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!

[@alimkdm1543]

if you have made it can you give me the source code

[@antonioskokiantonis7051]

Really enjoy this video. Using API's is awesome, hope you'll make more projects based on this approach!

[@user-rn6yz7xd7v]

Thank you very much. You explain so well and clearly. God bless you abundantly.

[@chandrabhushansingh6886]

All the projects are life savior for beginners, thank you 3000❣️

[@Nitishyadavlog]

Hello. Can u understand me to how can I acess sir's pdf in which all images are there

[@Manas361]

@@Nitishyadavlog There is a given link of google drive .. from where you can download images

[@Rameshtalkies7791]

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

[@maheshwarimandigam5464]

"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

[@abdullahbinmamun3803]

Thanks a lot. You describe things very nicely. Appreciate your work.

[@NeverTooMuchLead]

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`;

[@mjkoo5320]

cannot ask more. amazing and perfect!!!!

[@gurvirsinghkhalsa614]

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

[@princeshukraan3099]

Bro,please help me,I'm stuck

[@gurvirsinghkhalsa614]

@@princeshukraan3099okey bro, How can i help you ?

[@abcdabcd8605]

@@princeshukraan3099 where are you stuck?

[@saikumarr_]

@@abcdabcd8605 those images are not changing according to the weather data

[@codeAlongwith]

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?

[@angiethequeen2871]

This is amazing! I learned so much doing this! Thank you!!

[@panidacharusathit8619]

Fantastic tutorial and easy to follow along. Thank you so much.

[@AmanYadav-vi4hn]

THIS WHOLE PLAYLIST IS A GIFT FOR FRESSHERS LIKE ME WHO WANTS TO LEARN SOMETHING NEW

[@Chandan-Singh10]

Aman you build this weather aap

[@rahulrajmehra7532]

So simple yet very good and excellent explanation thank you!👍

[@maheshwarimandigam5464]

"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

[@rahulrajmehra7532]

@@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

[@rahulrajmehra7532]

@@maheshwarimandigam5464 are you beginner ?

[@06-bhaveshrathod40]

​​@@maheshwarimandigam5464bro he did something that we don't no not in javascript but in css too

[@rushitjhaveri-lu2bn]

Great learning experience. Thank you for this video. Highly appreciate your efforts.

[@gmaiwun]

Fantastic exercise for a beginner. Thank you

[@sawako2501]

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!

[@yashikagoyal9523]

Hey, i need a help

[@thecoolnewsguy]

@@yashikagoyal9523 where

[@chinmaywasule249]

howlong did it take to activvate the activation key??

[@joybratadas902]

@@chinmaywasule249 I have the similar question

[@chinmaywasule249]

@@joybratadas902 it was activated in an hour or 2 ig

[@meenupatel1256]

Amazing Project with straight forward explanation.

[@konstantinreut2577]

Thank you so much for the lesson! It's great!

[@exveer4939]

It's awesome... How we get your source code, sir?

[@GleristonCastro]

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.

[@user-gr9mc4dr1v]

thank you for this suggestuion @@epicgameboi

[@rudreshraj1298]

dont worry it also works with lower case

[@gopikrishna6808]

That is why he used == not ===

[@NaveenReddy-vm3ps]

Amazingly simple, simply amazing.

[@amazingbdcreative9556]

Thanks alot,, great great playlist. It’s helpful for beginner ❤

[@yashsharma-td6ii]

Can I close the tabs or the system while waiting for the API to get activated and then come back to the link again ??

[@jeanpaulhonorekwitondailiz2141]

Thank you so much .I learn a lot from you.🎉My second app

[@clarindomarcos3177]

Bro, u have an excellent didatic! U do shows up this so easily.

[@princeadiele777]

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’) 😢)

[@gaminghubnepal8500]

Do js inside html not external ( Herald ko ho bhane reply )

[@potnurujaivanth7819]

​@@gaminghubnepal8500won't it work if I do it in an external js file?

[@xqyba2645]

@@gaminghubnepal8500 is there any way to make it work in external js

[@jcorreaUdeA]

You can use external js file, just use the defer attribute on the script tag

[@pandipatipavan3804]

Please provide the code files and the links in the description as soon as possible. Thank You.

[@chefernandez563]

It's better to learn by typing everything yourself not just copy ans paste

[@LinhNguyen-nh8oq]

Thanks, great tutorial, I learn about fetch API after this one.

[@user-wd3sp7oy9l]

Ammazing. We need more like this tutorial

[@Chessnerd2003]

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");

[@gauravpatil68]

Op bro You have really good command on DOM Manipulation. Thanks for good suggestion.

[@wetbread9401]

what a legend! thank you for this command!

[@nullzero9224]

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"

[@riksangma3359]

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.

[@mubashirzahid4824]

I think it's "Clouds" not "clouds" in the condition

[@riksangma3359]

I see I will try it later. Thanks 🙂

[@KanhaiyaPadol]

I m getting same problem will u pls send ur code to me if possible

[@manavjoshi6427]

I m getting same problem how does they will solve the issue any one can help in code ?

[@ryanboland7307]

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."); }

[@8x_x8W]

Very great and clear tutorial, thank you!

[@tenc6491]

Awesome as always! Thank you!

[@nandinishivani4044]

Sir console me API ka data update nhi ho rha erors aa rhe h java script ki please help

[@271_jatin_singh_6]

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}`);

[@umutsenel6016]

i have a cod:401 "invalid api key" error. But in members section my key is seems to active. What is the problem ?

[@salonishinde1485]

Hey you got the solution? If yess then plzz tell me

[@srishtigarg4511]

@Kelvin Mvungi its showing me the same error in the console. previously on browser search it was fine for me.

[@geniuskdb3972]

u there?@KelvinMvungi

[@johncarter6505]

I have solution

[@johncarter6505]

Add API key (&units=metric) just same as like

[@Creative_skill_kdn]

Lots of thank you. My app is working now

[@kirtipriyamvadatangirala5956]

great video with a superb explanation. thank you sir!

[@Noobgaminglk]

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.

[@pushpkambo]

Thank you, It corrected the errors I was getting.

[@munchkin._.delights]

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

[@PoojaKumari-cl1uh]

I'm unable to fetch api, it shows unauthorized(401)

[@adsye0015]

Same here I can't fetch in console log say unauthorized please help me and can't change places on card

[@humanbetterthanai]

​@@adsye0015check ur api key

[@yogeshdudde562]

Take 15 min then fetch

[@learner2998]

Maybe your account is expired so try to sign up with another account. Then it will work perfectly

[@unknownalphaplusman]

Did you able to fetch api?

[@Applecitylightkiwi]

tried this without watching only checked the api, really like the result of the video, but its way more fun to try it first

[@umardarazofficials3529]

thank you so much for using very simple words and no words to describe

[@krish7305]

Broo why you hurt bruuuh xd what you do i know but i give source code of it with more functionality to many people

[@princeshukraan3099]

It's not displaying like yours😭

[@man32681]

Bro, device ka bhe farak padta h . If you are using pixels

[@mrsniffles7089]

Did you work it out?

[@webdevelopment2004]

Thank you for this great course😃🥰

[@gulzatkoshbaeva2162]

Thanks very clear, understandable.

[@rahimibadov2940]

perfect project and perfect speaking

[@mmhoq8828]

সত্যিই খুবই চমৎকার একটি শিক্ষনীয় ভিডিও। বোঝানোর ক্ষমতা অসাধারণ-A very nice educational video indeed. The power of persuasion is extraordinary.

[@-goendadhadha6172]

apnar bari kothay bro???

[@Wifg123]

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"; }

[@ifiokubongukpong2814]

Thanks for this

[@babynegi2931]

Thanku very much sir you explain it very easily

[@immensitysquared9615]

Thank you I was able to complete this tutorial

[@jayeshshaha49]

Awesome tutorial. Learned so many new things

[@user-rg7ec9cn7d]

Great job! Precise and to the point.

[@fola_azeez]

This is amazing. Thank you so much.

[@MrFake02]

Thank your for this wonderful teaching

[@tthamil]

I liked this weather app taught me in depth, thanks

[@user-kb3zq9ck2u]

Thank you for the video! For me, as a beginner, it is a great way to learn more and develop skills.

[@ramanismaeel]

did you get the activation key

[@jaiswalsourabh8027]

u are truely fabulous sir it was best for me till now thanks a lot god bless u dear.

[@Rafaelonyoutube]

Thank you for your videos, very helpful always

[@punkboy4991]

Nicely Done , Helped me refine my Skills

[@iamishtyaque]

Very Helpful video. was very easy to follow. Thanks sir you this kind of video

[@aditya_prakash_official07]

I,ve just finish this project and i,ll definetly finish all the project which is present in playlist😍.

[@dadasajad8741]

Thanks for this playlist brother.

[@Mariaefete]

THANK YOU SO MUCH FOR YOU AMAZING JOB ❤

[@Pgibeh5566]

thanks alot after many trials i was able to download the images

[@ishakumari8477]

It was a great tutorial. Thank you😊

[@Verbrecher3000]

Thank you very much for this Totorial its help me very much to programm with apis

[@yagmuryalcn-zp5lx]

was so helpful! thank you.

[@necrangedu1764]

hyper pedagogue je valide ca fonctionne ^^ bien joué

[@WARATEL_114_30]

Great job. Thank you.

[@vivekpspk6326]

Best Channel for hands on working with Javascript projects...Please do nodejs projects also...Thank you

[@GreatStackDev]

Thanks for your comment Vivek. Have already done E-commerce and Food Delivery app using Nodejs. Please check it.

[@abubakartv186]

very good tutorial we learnt a lot of new things from you thank you for your affectionating work.😀

[@babarshabbir2554]

"Excellent tutorial! Clearly explained, easy to follow. Made creating a weather app with JavaScript a breeze."

[@Kalicharan-tu6kr]

30:42 I m having Event listener error why???

[@yadlly]

thank you so much this is really helpful.

[@rameenana]

Thanks man. This was useful.

[@Moonsu2313]

you can avoid doing those if and else for weather icon here the short way weatherIcon.src= `images/${(data.weather[0].main)}.png`; I hope this can help to anyone

[@jluna231]

It all makes sense now its crazy. I understand everything that is going on.

[@realnatureloveradda1811]

Sir you are great 👍👍, you are boon for students like us

[@shlokpatel2994]

Amazing video.thank you very musch.

[@rickhunter121]

gracias por los tutoriales, saludos desde Argentina.

[@maxlearningtech3423]

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.💥💫

[@abhishekmishra3010]

@JGxJAMES i am also getting an error are you also getting error 401 ?

[@gurbanaarongulman2505]

I absolutely love this man. Keep up the great work ! This is awesome. The way you explain everything along the way makes it 1000 times better!

[@abhishekmishra3010]

is your weather api working ?

[@gurbanaarongulman2505]

@@abhishekmishra3010 Yes ,perfectly well 👍

[@abhishekmishra3010]

@@gurbanaarongulman2505 bro can you plz share me your api link without putting your api key cuz mine is givng error

[@harshitalalwani8127]

my search icon isnt working what might be the issue?@@gurbanaarongulman2505

[@nouarchami9007]

GOOOD VERY GOOOD NIIICE INTERRRESTING BRO THANKS THANKS THANKS A LOT....THANK YOUUUU.....

[@Varun10299]

Awasome and Understandable video.