How To Make Weather App Using JavaScript Step By Step Explained
HTML-код
- Опубликовано: 9 мар 2023
- 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
Avinash, You are a real hero...... You make coding very easy for us to learn.
Clear cut and straight forward to the content. Best yet easy lecture Thanks a lot 🤗🤗🤗
good video. Tech with Tim is also good.
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
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
@@user-gu2sh6ty7x
Bro,please help me out
How long it took you to active the API ?? Can you please tell ?
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
Thanks a lot you actually started my web dev journey!!!
You are my best youtuber now. I developed my first web app with your tutorial
"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
Thanks, finally something i can relate, understand and practice for my vue projects.
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?
Just finished this! Thank youu so much for great tutorials!
its just amazing , very proper explanation also better than some paid courses . thanks a lot
Really enjoy this video. Using API's is awesome, hope you'll make more projects based on this approach!
You are the best teacher ever in the world. You simplify things to the ground.
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
"Excellent tutorial! Clearly explained, easy to follow. Made creating a weather app with JavaScript a breeze."
Thank you very much. You explain so well and clearly. God bless you abundantly.
Thanks a lot. You describe things very nicely. Appreciate your work.
Fantastic tutorial and easy to follow along. Thank you so much.
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
Great learning experience. Thank you for this video. Highly appreciate your efforts.
tried this without watching only checked the api, really like the result of the video, but its way more fun to try it first
This is amazing! I learned so much doing this! Thank you!!
Fantastic exercise for a beginner. Thank you
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?
Just finished building this app. It was really good experience for a beginner. Everything is explained step by step, systematically. Thank you
Thank you so much for the lesson! It's great!
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
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
Amazing Project with straight forward explanation.
cannot ask more. amazing and perfect!!!!
Amazingly simple, simply amazing.
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
Thank you, Avinash! Your explanation thoroughly helped me understand the concepts covered here.
"Excellent, easy-to-follow guide for creating a weather app with JavaScript! Highly recommend."
"Excellent, easy-to-follow tutorial on creating a weather app with JavaScript! Highly recommend."
thank you so much for using very simple words and no words to describe
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
Bro, u have an excellent didatic! U do shows up this so easily.
I,ve just finish this project and i,ll definetly finish all the project which is present in playlist😍.
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?
Thanks alot,, great great playlist. It’s helpful for beginner ❤
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`;
Thanks, great tutorial, I learn about fetch API after this one.
Thank you so much .I learn a lot from you.🎉My second app
Very great and clear tutorial, thank you!
Lots of thank you. My app is working now
It all makes sense now its crazy. I understand everything that is going on.
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
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
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!
is your weather api working ?
@@abhishekmishra3010 Yes ,perfectly well 👍
@@gurbanaarongulman2505 bro can you plz share me your api link without putting your api key cuz mine is givng error
my search icon isnt working what might be the issue?@@gurbanaarongulman2505
u are truely fabulous sir it was best for me till now thanks a lot god bless u dear.
Great job! Precise and to the point.
great video with a superb explanation. thank you sir!
You are an awesome teacher, but when you said Germany is a city, it was too funny.
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
very good tutorial we learnt a lot of new things from you thank you for your affectionating work.😀
Thanks very clear, understandable.
Very Helpful video. was very easy to follow. Thanks sir you this kind of video
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
Awesome as always! Thank you!
I liked this weather app taught me in depth, thanks
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?
Thank you for this great course😃🥰
Awesome tutorial. Learned so many new things
Thank you very much for this Totorial its help me very much to programm with apis
Thank you I was able to complete this tutorial
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 ?
Sir you are great 👍👍, you are boon for students like us
thanks alot after many trials i was able to download the images
Thank your for this wonderful teaching
THANK YOU SO MUCH FOR YOU AMAZING JOB ❤
Ammazing.
We need more like this tutorial
i learn a lot with you thanks may god bless you
🤲
perfect project and perfect speaking
Thank you for your videos, very helpful always
Thanku very much sir you explain it very easily
Nicely Done , Helped me refine my Skills
Thanks for this playlist brother.
Thank you so much for the content - only a couple suggestions - I am not sure sometimes why you remove something, or add something. For example you said remove console log - but no reasoning given - or you add something without reason. Please give reason it will be very useful.
This is amazing. Thank you so much.
thanks sir! it's a great project we want more projects using some API's and some jQuery or some little bit complex projects
a simple and clear tutorial
Thanks for this amazing tutorial can't way to watch the other tutorials.
Great job. Thank you.
Thanks for the wonderful explanation and video , and please explain the js with detailed information 😊
thank you so much this is really helpful.
To be honest, I am compelled to write this - This video has been one of the best project videos I have ever seen. You deserve subscription. Keep up the good work...
Hye , can you please help me. I am not able to fetch the temperature of Himachal pardesh af some of the other district..
It was a great tutorial. Thank you😊
Thank you very much for this masterpiece
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
Great video , great explanation bro, this will help for many people, thanks
Thank you so much sir i have learn so much with you.....
Thank you so much.
GOOOD VERY GOOOD NIIICE INTERRRESTING BRO THANKS THANKS THANKS A LOT....THANK YOUUUU.....
Thanks man. This was useful.
THIS WHOLE PLAYLIST IS A GIFT FOR FRESSHERS LIKE ME WHO WANTS TO LEARN SOMETHING NEW
Aman you build this weather aap
Nice I done this project love you brother
Thanks you everything worked out verywell
সত্যিই খুবই চমৎকার একটি শিক্ষনীয় ভিডিও। বোঝানোর ক্ষমতা অসাধারণ-A very nice educational video indeed. The power of persuasion is extraordinary.
apnar bari kothay bro???