Build a Weather app using HTML, CSS & JavaScript in 2020
HTML-код
- Опубликовано: 9 сен 2024
- Learn how to make a Weather app in Vanilla Javascript, css and HTML without the use of any libraries. We use the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch API.
A Javascript Project
Day 10 #31Days31Videos
Source Code: github.com/Tyl...
// JOIN THE DISCORD
/ discord
// MY GEAR FOR CODING AND RUclips
Blue Yeti Microphone: amzn.to/3jr3l7T
Microphone Stand: amzn.to/35B9LMN
Chair: amzn.to/3dWds3F
Thunderbolt Dock: amzn.to/3osBF6u
Monitor: amzn.to/37I8KoR
All of these products I own and have tested!
FOLLOW ME ON TWITTER!!!
/ tyler_potts_
LIKE, SUBSCRIBE & SHARE
Music
DEAF KEV - Invincible (NCS Release)
Neffex - Grateful (NCS Release)
This is one of the best tutorials I've come across. Thank you so much. Your knowledge was really helpful.
Thank you I really appreciate it! :D
I love how he said it was going to take a long time to style the app and literally took him what it takes me to center a div lmaooo
Those are BACK TICK marks inside that fetch request!!!!!
For anyone who is following along this is the key above tab, next to the 1. `Back Tick` is NOT THE SAME as 'single quotes'
So rock and roll mate. Loved that you were yawning during the video because you can clearly do this kind of thing in your sleep. Thank you for what was arguably one of the best tutorials I have ever experienced. Logical and incredibly well executed. 5 out of 5 stars
Glad you enjoyed it!
let's goooo - finally got a breakthrough in my project. This is the only video that has actually helped me understand APIs. Thanks Tyler!
WOOO! That's a win!
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const days = ["Sun","Mon","Tues","Wed","thurs","Fri","Sat"];
Thanks! I knew that some kind man leave this in comments :)
Can't help but think even without watching the video that they should be const, months and days wont change.
Correct
It doesn't work for me
Thanks G!
Thanks a lot for this wonderful tutorial Tyler! Love how it's just vanilla and no use of any frameworks/libs or whatsoever.
Glad it was helpful!
This is honestly one of the best tutorials I have done in a long time. Great work on this, I can't wait to see more!
hello
if do u have this complete code then i wanna get this.
quick reply me
This was my first ever code along project using API calls. Thanks for making it easy to understand!
thank you so much for making a video with clear explanation and not just putting edm in the background while you code!
The introduction of async await is really a blessing for JavaScript developer.
async function getResults(query)
{
const res = await fetch(`${api.baseURL}weather? q=${query}&units=metric&APPID=${api.key}`);
const result = await res.json();
}
Avoid chaining of then statements 😂😂
Thank you so much for this man! I followed mainly with the code but added a bunch of comments so I can write exactly what each piece of code does.
Your yawning made me sleepy....😂😂btw nice tutorial.🔥🔥
yeah 😂😂😂😂😂😂
Beautiful walkthrough from scratch. Couldn't ask for more. Thank you so much for sharing. Stay Safe
Glad you enjoyed it
Wow, really good tutorial. I finally made my first weather app. Thank you so much man !!!
Great to hear!
@@TylerPotts hey I just wanted to see how it works before starting it so I copied your code to check, but it didn't work.
I really can't figure out how to get a proper base for the API key...can someone help? Thanks!
I'm in minute 02 of this video and I already love you very much for the live-server tip 🤣
Haha, I'm happy you enjoyed it!
What a knowledge Tyler 👏🏻
Congrats man. wish u all the best 👏🏻👏🏻
Never mind. I got it working. It turns out you have to add the backwards quote marks instead of regular quote marks. I think you forgot to point out the distinction. Thank you for your help. This was a wonderful tutorial video.
Hey! Thank you! Sorry, yeah sometimes I just assume people will know what I mean 😅
19:16 that yawn was funny hahaha
thank you for the video,i got something from it,
nice practise
Glad it helped
Loved the vid man. Thanks for the tutorial.
No problem 👍
Nice tutorial dude, I learn best by playing around with stuff and this has been a huge help. Great base to add stuff to as a challenge, adding changing backgrounds and displaying the time for each location in real time was fun.
Hilarious that you mention that. I just got to changing backgrounds. Just finished immediately moved onto doing time for each location.. Did you use a seperate API?
@@kaneUKGB Nah, from what I can remember this API returns a value that stores the difference between UTC time and the current location's time zone. So you can find UTC time and then add (1000 * weather.timezone) to it to find the time in each location.
Thank you so much for this amazing video...
It's very useful to me...
Thank you thank you thank you so so s much❤️❤️🔥🔥🔥🔥🔥🔥🔥🔥
Great video.
Great start to my portfolio.
Thanks for the info!
Glad it was helpful!
this was quite exciting ..really appreciate the simplified tutorial
Very nice. But you should take advantage of CASCADING Style Sheets. You don't need to declare the color to white everytime, just declare it on the body and let it cascade...
Of course! I'm not used to using a singular colour on the page :)
that's a great tutorial .I heard you yarn ,thanks for hard working
This tutorial is amazing. It helped me to learn lot about api and how to use it.
Thank you for the project. It was fun and simple. I want to practice more.
Awesome! I'll be doing more projects like this going forward! :)
well u earned my subscription
I really like your vids mate! so good for new coders like me
That's why I am here!
I really enjoyed this video. Thanks for making it.
Happy you liked it
Great Work Bruh 🙌🙌🙌
19:14 YAAAAAAAAAAAWN
I loved it so much this tutorial. Keep up the good work :)
Thank you! Will do!
Hi, I have a question, in getResults function, You invoke dispayResults without adding any argument and displayResults, which requires 'weather' parameter somehow gets it. Is that because getResult return 'weather' json object and displayResults takes returned value as a parameter ??
Excellent tutorial !!!!!!!!! Thnx tyler :-D^_^
Amazing tutorial. Thank you so much!
love your effort in styling..my bro
It was very cool! Thanks
Hi Tyler, great vid by the way. I'm just starting my coding journey but was wondering what are the best and easiest projects for someone like me to begin. I've watched this full video a couple of times now and I still don't get half of what's going on when it comes to the JavaScript. So I guess my question is What's the ideal projects for someone that is completely new/has limited JavaScript nowledge ?
A to-do list! It teaches you the basics of CRUD (Create Read Update Delete)
@@TylerPotts thanks for the reply Tyler appreciate.
Cheers mate. Excellent video.
Thank you!
Awesome!!! TQVM!!
Awesome video bro... thank you!
thanks a lot! best tutorial!
Happy you like it!
Awesome tutorial 😀
Thank you! Cheers!
Very helpful!
Happy to help :D
It was hard to really see those codes ...
Strained my eyes a lot
Nice content tho ... Still worth anybody's time
Apologies! I newer videos are normally lot more zoomed in
I like those yawns
Thanks! xD
Am I allowed to use this as a base code for my weather app that I want to develop? I will give credit if you want. Just starting so want to examine and take parts out of it. 😊
really nice！add weather icons beside the weather description will be better ！
Perfect channel!!! Thanks for sharing on r/learn js
You seemed sleepy in this one. But the tutorial was awesome.
20:36 I am wondering if calling document.querySeletor inside that function is inefficient compared to calling it at the top of the script.
After 20 minutes narrator wanted to sleep :) But video is useful, thanks! And for consistency - i think that in hilow querySelector you should use '.current .hi-low' not only '.hi-low'
Great video
Hello! I'm very new to coding, I just started last month. I tried creating this weather app, however when I ran the code with lite server, I saw that the browser couldn't find the parameters in the fetch api. Is anyone else having this problem? I tried changing the parameters to match a sample api call from OpenWeather, but it is still not working. Any help would be appreciated.
I built whole api by seeing your video. facing an error :
This One=> Uncaught SyntaxError: Unexpected identifier
In this line => baseurl: "api.openweathermap.org/data/2.5/"
need your help
yes i am having the same error
fetch(`${api.baseurl}weather?q=${query}&units=metric&APPID=${api.key}`)
he wrote api.base instead of api.baseurl and i cant figure out how it worked for him haha but yeah. hope im not too late for this.
@@porodax yeah I done with it. Friend help me and solve the issue
you are the best!!!
What is an api url? like how do u find it im stuck on that part cause it wont work
Edit: 1 day after this i finished the project and this was my first time coding so when i found out half the things u said i hadd to do it myself.
Hey Tyler, I double checked my code with yours and things appear to match up, but once I press the enter button after entering a city name, I get a 404 error in the console. Can you help me with that by chance? Thanks!
Loved your tutorial- thanks so much! When I type in a city name, there's no response. I'm using your github source code, but am using my own api key which is working with another weather app I made. Any ideas? Thanks again for your work, Tyler!
Where did you get the base url from?
It is not working for me and I cannot figure out where it went wrong. Could you explain how you imported the API_key again?
Same
Hi 🙋🏻♀️ .. thank you for this video
Can you please explain what means if ( event.keycode == 13 )
Whay 13 exactly?
13 is equal to the return / Enter Key... so if we check for event.keyCode === 13 we are checking if someone has pressed the enter/return key :)
Hi Tyler, idea for the next video if it is gonna be a weather app but in Vue or React. It would be nice if you showed how to dynamically change the background image based on the current temperature in the searched city. For instance if it's -1c it would change the background image to a winter looking image, and if its 22c it would show a summer ish picture as a background :).
Yes!!! I love that idea! I'll see what I can do
Well done tutorial
Thank you!
still new to api's. did you go through the whole api documentation on their site or is all api code similar?
You should always go through the documentation and all APIs are similar but different! 😁
Their documentation seemed confusing to me. Well I'm a newbie
@@TylerPotts the base api key doesn't seem to be working anymore. can you confirm?
@@mateusloubach yes for me too.
You just won yourself a loving subsriber. thanks for this, how can i email you?
What is a baseurl? Please comment because the my program is not working I probably did some mistake :(
im getting tht the key is invalid
but i have generated and used the right key
hi, how can I implement a language change. As I noticed you write the notation api a little differently as they write it on the site and I do not know how to add a language change, thanks.
PS: awesome video
How would you change the Background Colour based on the current weather (Sunny, Cloudy, Clear, etc...)?
I've never done this myself but logically I would think that you would make however many CSS styles for the type of weather you want with a class such as "cloudy-weather" or "rainy-weather" and then using JS do some sort of if statement in regards to the current weather and add the class for whichever weather .. like "if weather is less than 20° add class "cold-weather" to whatever your element is called" you'll also have to remove the current class. just a guess, im learning just like everyone else.
can anyone tell me how i can run this live server ? i have phpStorm not visual studio
It is a very good and to the point tutorial. But, there was many "promises" from an API. How come you didn't use "async ... await" with your functions. Are they arbitrary in JS?
Hi Tyler
I was trying to follow your weather app tutorial.
But when I finished and searched for weather in London, then in York for the current day - 02 09 21
The app didn’t work,
Could you explain to me please how I can make your app show today’s weather?
Thanks
Thanks for the video! How should I manipulate js if I wanted the background image to change according to the weather?
Can you explain to me how can I make the input field show under it the name of the city? For example if I type N it needs to show me some suggestions of cities that start with that letter.
That would probably take another hour or two to implement in PURE Javascript.
@@zut25 well I just want to know the logic behind it
Hey Tyler, where did you get the baseurl from?
When you sign into the openweather API and create your free account,in your account there is a get started tab,which will give you a link,similar to the base url used in the tutorial
From where did you get the background image? i want get more
Nice video tutorials. I have a question, how did you get the base link?
Why my code doesnt working? The part when i want to change the temperature and degree doesnt working. And im sure i didnt made a wrong code mistake or something else like typo. Is there anyone can help how to fix this?? rn im stuck in there
Check the description for the GITHUB Source and look over it
Completed the tutorial, added a couple of features as well, anyone knows how to create an android / iOS app from this HTML CSS and JS code ?
dude how do u get the base url?
Hey, awesome video bud. How can I convert the temperature to Fahrenheit? It's currently way off for me lol. In the getResults function, I set the units to customary but I guess that didn't work. Any help would be great, thanks!
If you remove the &units=metric part of the fetch url it will return as fahrenheit!
I just changed &units=metric to &units=imperial and then made sure to change all instances of °c to °f in the HTML, etc. because even if it spits out the Farenheit numbers, it will show °c unless you change it to °f.
Uncaught (in promise) TypeError: d.getDay is not a function
at dateBuilder (main.js:48:22)
at displayResults (main.js:32:22)
i am getting this error why
which design pattern did you use on this project?
I did not use a design pattern I'm pretty sure I just quickly whipped this up from the top of my head.
How do u run the weatherapp on the side? Like with it as a reference constantly updating. Because in my case, it said "code language not supported" even though i have all the necessary extension done. what do i need to install or add to make the code run, it also just says, bash: start: command not found. Pls advise thanks.
Not working in the source code! When I entered the city then nothing happened! I changed my own account's API. But It's not working!
same here, did you find a solution?
try changing "baseurl" on your api key to just "base"
@@juanzaragoza2660 what should be the base url ? is it the one he used ?
@@zarifhasan2206 the url is the same as his although the key has to be different. So log in to the account and copy and paste the key!
@@juanzaragoza2660 gotchu it works thanks
when I enter a new city in search button there will be no change plz help ..
The base url is the address of the homepage right?
I know this video is old but i don't get the response in my dev tools
How do you make it so it only displays one chosen city’s weather like apart from just removing the search box how would you call just to one city in particular
how can we fetch data according to the users current location, so that user dont have to type the city again and again
So vanilla js is just pure js right?
Right, no any frameworks.
Yes there is nothing but plain JavaScript
Did you just yawn at 17:02 ? :P
not working anymore?
Uncaught (in promise) TypeError: Cannot read property 'country' of undefined
at displayResults (main.js:24)?
Hey man i just had the same problem. I fixed it by putting a / between {api.base} and weather in the fetch request like so:
fetch(`${api.base}/weather?q=${query}&units=metric&APPID=${api.key}`)
@@tokiloki5818 for reals? thanks bro ill try when i get home.
That worked thank you so much!
i amm having th same prblm , i did eveything you replied use my api key ,, change baseurl to base added / but nothing happened, still getting error
Hi tyler looking forward to your tutorials , id like to ask can i use sublime text 3 instead of visual code?
of course!
I could really hear you yawning a few times. 😆
how to make it display the local weather on load? I mean before actually inputing the loction.