How To Make Weather App Using JavaScript Step By Step Explained

Подписаться 1 млн

Просмотров 967 тыс.

0% 0

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

Опубликовано:

9 мар 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 899

@isamsvideoediting4572 Год назад

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

@NeverTooMuchLead 10 месяцев назад

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

@maheshsale 8 месяцев назад

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 7 месяцев назад

Any error

@nazamwasi3357 7 месяцев назад

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

@panktichaudhari 7 месяцев назад

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

@behappy1666 5 месяцев назад

Bro weather images are not updating...

@RudraShejwal-jv2bf 4 месяца назад

@@nazamwasi3357 same

@lakshmiprasannanadendla5145 Год назад

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

@user-rg7ec9cn7d 2 месяца назад

good video. Tech with Tim is also good.

@quinojuan2 7 месяцев назад

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

@VaibhavgiriGoswami-wx8ql 3 месяца назад

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

@user-ns1bx5nl8p 6 месяцев назад

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

@guy-was-taken 8 месяцев назад

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

@sirnicholas6177 2 месяца назад

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

@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 10 месяцев назад

best

@maheshwarimandigam5464 8 месяцев назад

"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 8 месяцев назад

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

@littlecurrybread 7 месяцев назад

@@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 7 месяцев назад

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.

@chukwuemekandiukwu1220 Месяц назад

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

@gomeztorricellygomez7808 4 месяца назад

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

@user-gu2sh6ty7x 3 месяца назад

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

@mehwishjabeen526 3 месяца назад

how much time it took to create the API?

@prathmeshkirve 2 месяца назад

usne city leha hai state nahi @@user-gu2sh6ty7x

@princeshukraan3099 Месяц назад

Bro,please help me out

@Sky_Carly 28 дней назад

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

@Krrishgames007 2 месяца назад

<a href="#" class="seekto" data-time="2">00:02</a> Create a weather app using HTML, CSS, and JavaScript. <a href="#" class="seekto" data-time="160">02:40</a> Automated webpage refresh after code changes <a href="#" class="seekto" data-time="517">08:37</a> Creating weather app using JavaScript <a href="#" class="seekto" data-time="727">12:07</a> Styling the weather details with CSS for better visibility. <a href="#" class="seekto" data-time="1093">18:13</a> Setting up API key and URL for weather app <a href="#" class="seekto" data-time="1308">21:48</a> How to display weather information in the browser console using JavaScript <a href="#" class="seekto" data-time="1661">27:41</a> Creating a weather app using JavaScript and fetching the city information from an API. <a href="#" class="seekto" data-time="1839">30:39</a> Updating weather information and images based on city input. <a href="#" class="seekto" data-time="2180">36:20</a> Adding error message for invalid city name input <a href="#" class="seekto" data-time="2345">39:05</a> Handling invalid city names and displaying error messages

@clydeforland5944 7 месяцев назад

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

@user-pd9sm7lf5l 3 месяца назад

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

@Daniel-fj9ux 5 месяцев назад

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 5 месяцев назад

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

@axitpoojara 7 месяцев назад

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

@user-rn6yz7xd7v 4 месяца назад

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

@andihoxhaj3527 Год назад

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

@Zaynahazlanworld 28 дней назад

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

@antonioskokiantonis7051 9 месяцев назад

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

@abdullahbinmamun3803 7 месяцев назад

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

@panidacharusathit8619 6 месяцев назад

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

@Rameshtalkies7791 11 месяцев назад

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 8 месяцев назад

"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

@konstantinreut2577 6 месяцев назад

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

@meenupatel1256 4 месяца назад

Amazing Project with straight forward explanation.

@rushitjhaveri-lu2bn 7 месяцев назад

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

@angiethequeen2871 9 месяцев назад

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

@gmaiwun 9 месяцев назад

Fantastic exercise for a beginner. Thank you

@chandrabhushansingh6886 9 месяцев назад

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

@Nitishyadavlog 5 месяцев назад

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

@Manas361 3 месяца назад

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

@mjkoo5320 Год назад

cannot ask more. amazing and perfect!!!!

@NaveenReddy-vm3ps 6 месяцев назад

Amazingly simple, simply amazing.

@AmanYadav-vi4hn 9 месяцев назад

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

@Chandan-Singh10 7 месяцев назад

Aman you build this weather aap

@clarindomarcos3177 Год назад

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

@amazingbdcreative9556 7 месяцев назад

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

@umardarazofficials3529 9 месяцев назад

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

@Applecitylightkiwi 7 месяцев назад

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

@jeanpaulhonorekwitondailiz2141 Год назад

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

@8x_x8W 5 месяцев назад

Very great and clear tutorial, thank you!

@LinhNguyen-nh8oq 6 месяцев назад

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

@Creative_skill_kdn Месяц назад

Lots of thank you. My app is working now

@tenc6491 Год назад

Awesome as always! Thank you!

@user-rg7ec9cn7d 2 месяца назад

Great job! Precise and to the point.

@gulzatkoshbaeva2162 5 месяцев назад

Thanks very clear, understandable.

@jluna231 6 месяцев назад

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

@user-kb3zq9ck2u 6 месяцев назад

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

@ramanismaeel 5 месяцев назад

did you get the activation key

@kirtipriyamvadatangirala5956 Год назад

great video with a superb explanation. thank you sir!

@iamishtyaque Год назад

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

@babynegi2931 Год назад

Thanku very much sir you explain it very easily

@user-wd3sp7oy9l 11 месяцев назад

Ammazing. We need more like this tutorial

@babarshabbir2554 28 дней назад

"Excellent, easy-to-follow guide for creating a weather app with JavaScript! Highly recommend."

@webdevelopment2004 8 месяцев назад

Thank you for this great course😃🥰

@aditya_prakash_official07 Месяц назад

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

@tthamil 3 месяца назад

I liked this weather app taught me in depth, thanks

@jaiswalsourabh8027 9 месяцев назад

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

@jayeshshaha49 6 месяцев назад

Awesome tutorial. Learned so many new things

@Verbrecher3000 11 месяцев назад

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

@mmhoq8828 8 месяцев назад

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

@-goendadhadha6172 2 месяца назад

apnar bari kothay bro???

@babarshabbir2554 22 дня назад

"Excellent, easy-to-follow tutorial on creating a weather app with JavaScript! Highly recommend."

@immensitysquared9615 Год назад

Thank you I was able to complete this tutorial

@rahimibadov2940 10 месяцев назад

perfect project and perfect speaking

@gurvirsinghkhalsa614 10 месяцев назад

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_ 8 дней назад

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

@MrFake02 11 месяцев назад

Thank your for this wonderful teaching

@vivekpspk6326 8 дней назад

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

@GreatStackDev 7 дней назад

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

@WARATEL_114_30 7 месяцев назад

Great job. Thank you.

@realnatureloveradda1811 4 месяца назад

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

@Rafaelonyoutube 9 месяцев назад

Thank you for your videos, very helpful always

@fola_azeez 8 месяцев назад

This is amazing. Thank you so much.

@Varun10299 5 месяцев назад

Awasome and Understandable video.

@abubakartv186 6 месяцев назад

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

@Pgibeh5566 7 месяцев назад

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

@punkboy4991 Год назад

Nicely Done , Helped me refine my Skills

@ishakumari8477 8 месяцев назад

It was a great tutorial. Thank you😊

@dadasajad8741 7 месяцев назад

Thanks for this playlist brother.

@Wifg123 8 месяцев назад

Hey in part <a href="#" class="seekto" data-time="2040">34:00</a> 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 4 месяца назад

Thanks for this

@dilipkumar_116 11 месяцев назад

a simple and clear tutorial

@rameenana 6 месяцев назад

Thanks man. This was useful.

@Mariaefete 7 месяцев назад

THANK YOU SO MUCH FOR YOU AMAZING JOB ❤

@shlokpatel2994 11 месяцев назад

Amazing video.thank you very musch.

@codeAlongwith 9 месяцев назад

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?

@babarshabbir2554 28 дней назад

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

@Kalicharan-tu6kr 9 дней назад

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

@yagmuryalcn-zp5lx 10 месяцев назад

was so helpful! thank you.

@yadlly 6 месяцев назад

thank you so much this is really helpful.

@Anonymous_6858 29 дней назад

That was awesome for beginners ❤🎉

@tranquilvibes5892 10 месяцев назад

Great video , Thanks Wanted to add another variable for time to show moon instead of the sun kindly could you share where you got the pictures so that I could look for ones with moons ,would really appreciate

@abdellatifoutegnit-wl7ge Месяц назад

i learn a lot with you thanks may god bless you 🤲

@nyokkongor3517 Год назад

nice project, though i couldn't get some lines of code , everything was perfect, simple language and i like how you approach at a concept

@MagicocoCoding-uj6mp Месяц назад

Amazing, thank you so much

@necrangedu1764 6 месяцев назад

hyper pedagogue je valide ca fonctionne ^^ bien joué

@pravinbalgore362 8 месяцев назад

Thanks you it's very helpful

@franly656 Год назад

this video are so tutorial, i mean the video is really helpfull. Perfect

@nouarchami9007 6 месяцев назад

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

@gurbanaarongulman2505 5 месяцев назад

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 5 месяцев назад

is your weather api working ?

@gurbanaarongulman2505 5 месяцев назад

@@abhishekmishra3010 Yes ,perfectly well 👍

@abhishekmishra3010 5 месяцев назад

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

@harshitalalwani8127 5 месяцев назад

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

@sengendomark-xe6id Год назад

Your the best in this thing

@salehabdullah7316 9 месяцев назад

Thanks for this amazing tutorial can't way to watch the other tutorials.

@abcdabcd8605 Месяц назад

Amazing explanation!

@starX7995 10 месяцев назад

thanks bro really very useful for beginners

@uditgupta9163 2 месяца назад

Thank you so much sir i have learn so much with you.....

@zillionairedreams1546 5 месяцев назад

Thank you very much for this masterpiece

@maxlearningtech3423 6 месяцев назад

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 5 месяцев назад

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

@reemkhan3524 Месяц назад

Thanks you everything worked out verywell