Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners
HTML-код
- Опубликовано: 30 сен 2024
- Check out my courses and become more creative!
developedbyed.com
Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners
❤Become a patreon for exclusive videos and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
Today I wanted to focus more on building an actual project using vanilla javascript. This video is intended for those who are looking on creating their first projects using javascript or you might be here from freecodecamp with their javascript weather app project.
We are going to be using darksky api to pull all the necessary weather information you need. Darksky can be used free for up to 1000 api calls, so it is great for a demo project.
This project is great if you want to extend your knowledge with vanilla javascript by building a real world weather app.
📔 Materials used in this video:
Darksky API : darksky.net
Icons : darkskyapp.git...
🛴 Follow me on:
Twitter: / deved94
Github: github.com/Dev...
Yes! JS for Beginners. Let's see it :)
yeah
same here
Yes please
That' d be greattttttt!!!
yes, please
here it is
ruclips.net/video/2nZiB1JItbY/видео.html
Nice video, thanks!
i love your video.. can u add English sub? i want to understand well. but i'll try hard to make this with u !
23:18 im going to have to make 10000 cuts now (ha ha ha imoji)
Sorry if this is a bit of a long one. But some of you wanted to see some actual projects built. So here is one in vanilla JS. Please let me know if you want to see a full on modern javascript series! Thank you so much for the support! Let's go 1000 Subscribers this month!
Full JS script will be great
Yes
yyeessssss
This was awesome, don't apologize.
I wish you kept it longer. Towards the end it became hard to follow.
I love the fact you didn't cut out a person in the background hehehe, great tutorial thanks for explaining everything so clearly!
Hii. Dark sky is no longer accepting new sign-up. Please help me
since Darksky is no longer accepting new signups i used Open weather map api instead
Thank you for that :)
could you share your code please
definitely not beginner friendly. i think i'm going to give up on this project.
DarkSky API is gone. I cannot do this project anymore. Is there any other APIs you can recommend?
I like the way you explain everything so well,after all that is why I'm here and really enjoyed your video,watched entire video and liked it.Keep doing your work because You are so good at it.
What a fantastic walkthrough and project. Followed it myself, and all working perfectly! Love it, thank you. And a big yes please to the series! Subscribed +notification! :)
You speak perfect English, I just recognized you are German when you said "die" for "the".
I CAN Speak german too and i know you are vietnam so BOOM
he is in berlin
Guys, he's from Romania.
He's from Machu Picchu
@@winterdaisy5610 :// btw I'm researching Vietnam for my term project lol (1967's) (Son My village, My Lai massacre)
Yo this was amazing! I didn't even know how to make api calls and I learned so much! Can't thank you enough!
@23:00
"I'm going to have to make 10,000 cuts now"
"Oh" *walks out, shuts door"
hahhaha i was thinking the same and i laugh so hard. hahhahaha. his mood change so fast. like 5 min of inside rage.
anyway i like your content.
@@calanick Well! That's how to focus and serious he is when it comes to teaching javascript. Even me, I advise them that I'm going to make a video and they just walk past on my camera, I will get mad too. But I like how he didn't cut it. He was like "Ohh fuckk this! Not going to cut this 10,000 times. Let them know that I get mad sometimes"
23:20 “I’m gonna have to make 10000 cuts now” when someone intrudes your coding session lols
Lol I forgot to cut that part out
Great video! Really enjoyed the foundations you laid, it allowed me to practise my skills further by building a forecast and adding some further detail in there.
i struggled for while due to DarkSkyWeather API closing sign ups. in the end i opted for WeatherAPI (another free service) i preferred this one as it gave more detail that openWeather but it also provide links to the relevant icons from their site also an added bonus of not needing to 'cors'. This meant i could further streamline the code and not use SkyCons. anyway great project, looking for to watching the next one
How did you implement the other api? I'm trying to use OpenWeather and it wasn't working
Before watching this video I taught I'm decent with css...
They are no longer accepting new signups for Dark Sky Api.
So, does this mean I shouldn't waste my time trying to watch this video and do what he does?
@@nathanlegakis9822 Not exactly, You can find another APIs.
@@AminSani Name one please.
@@nathanlegakis9822 Rapidapi
@@nathanlegakis9822 If my comment was helpful for you please like my videos on my channel
Dark Sky API says "We are no longer accepting new signups." anyone help me out??
Just want to say thank you sir. I'm very glad to have found your channel.
Hi!, Is there an update version of this project? Thanks.
hahaha 23:28 we learned alot about relationships. Thank you for the great tutorial 😂😂😂😂😂
Darksky stopes allowing new singups...😭😭
Exact Problem :(
You can use other API's (i used openweathermap.org). The fundamentals are still the same, just the selectors are different. For example, where Ed uses:
const { temperature, summary } = data.currently
at 22.53
you will have to use other variables based on what the API is returning. for example, mine looks like this:
const { temp } = data.main;
const weather = data.weather[0].description;
Then you will have to work your own way to get the icons. I used Font Awesome SVG icons and an If statement that ads each icon as a class to the icon span...
Hope this helps!
@@jchandlervids Thanks a lot, mate
@@jchandlervids Can you share you code here? Im facing a lot of problems
Beginner here -> needs help: Why does he qualify the css as 'messy'? i.e. what would be the 'proper' way?
The css looks good for me
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data :( can anyone help me out?
Hi it looks like CORS anywhere no longer works as a proxy for Dark Sky API. I get this error "Missing required request header. Must specify one of: origin,x-requested-with". Would anyone have any suggestions on how to resolve this in vanilla JS? I have been reading up on CORS but is the only way out to create your own proxy server (i.e. with node JS?)
Yeah I'd like to see more "modern" JavaScript. That would be cool.
Dark Sky API is no longer available for new users. The company was bought by Apple.
Anyone else getting "Uncaught (in promise) TypeError: el.getContext is not a function with the Skycons??...PLEASE HELP!
i am not able to access darksky API (i.e,), i am not able to sign up, what are the other alternatives
i dont know what im doing. just im copying what he writes :D
same :>
Haha it seems like we should actually put C in html and change it to F ..but who gives a F anyway ! great one !
Uncaught (in promise) SyntaxError: Unexpected token I in JSON at position any body tell the solution..??
.text() instead of .json()
@@vishalsl-taskseveryday3153 did this then i got a cannot destructure property 'temperature' of 'data.currently' as it is undefined.
@@@zurzieh1022 sometime you will get that error by proxy.
Using response.jsonp instead of response.json is the simplest way to get around the cors issue.... (this is shown in a video of the channel , The coding Train )
The feeling of understanding what he is doing before he describes , as a beginner . Worth a lot to me
same bro
and stay safe
@@mmsskk1413 you to bro
Great video. I am getting error while fetching api data . Error is URL scheme must be http or HTTPS for CORS request. Kindly suggest.
Your excitement in this tutorial actually got me so focused till the end of the tutorial. thanks, man love it.
I'm just starting out with coding and learning JS. I've already learned most of the fundamentals and trying to build/apply different applications and really solidify these concepts into my head. My question is how much of this you can do completely by memory? Even as an experienced, do you still rely heavily on google?
yes.
Thanks Ed! Im glad I've found your channel! Such a underrated channel! More content to come! Love you works :D
the darksky api is no longer useful T.T do you know another website like that where we can take that information?
I resolve with some issues from another website, but I don't know how to do for the icon cause there is no the same "language"..plis master dev help mee :O
no ok, i resolve it! badum cha! ahah :)
Yes for the beginner JavaScrip.!
Thank you for being so amazing and easy to understand
Good tutorial, but a weather app displays real-time data and with this app it's only fetched on window load. Would've been very interesting to see how you would've done it with real-time updates.
Hi! I got this message from my console: Failed to load resource: the server responded with a status of 429 (Too Many Requests) . Anyone can help me with this? cheers :)
I am getting the same, any idea @dev Ed what might be the proboblem?
Yep, same here. Please help.
Missing required request header. Must specify one of: origin,x-requested-with
hey Ed, i am enjoying your tutorials. I just have a problem with the skycons, I followed each and every step you did to have it appear on the web page, but it's still not showing. pls help.
Nice tutorial, I think when it comes to font. Having body tag with percentage on font-size then font-size using say h1 with em rather than px makes controlling font-size more flexible at user level. But I guess that's another tutorial
.getCurrentPosition isn't working for me. It doesn't show any error but any console.log inside it doesn't work. Help!
If you use Open Weather you don't even have to use a proxy.
thank you for this! I came back to this project and CORS-ANYWHERE HOROKU discontinued their service due to abuse. I literally just deleted my proxy line of code and boom works.
Very nice video Dev Ed! What do you call the ES syntax you did at 21:35?? Thanks!
It's called destructuring
After so many months, I finally followed a project through to completion. I'm so proud! Thank you.
You should be proud! Great job!
Darksky do not seem to be accepting new signups
No need to replace and upper case the skycon icon name, it accepts (as per the documentation on the site) the icon names directly from darksky (skycons were made for them specifically).
hi Ed!
Thanks for the amazing tutorial. 😎
But i found that the Dark Sky API are no longer accepting new singups. any alternative?
Thanks.
Unfortunately Dark Sky is bought by apple!
What a bummer hay, im new to the field and was hoping this would be my first practice but now I cannot cause new dark shy sign-ups aren't being accepted, any alternative I could use? Your assistance with be highly appreciated.
right
const api= `${proxy}samples.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=439d4b804bc8187953eb36d2a8c26a02`;
@@amarjitsingh8954 is it working sir??
Aena Qadeer yes my friend it works!!
Hey @Dev Ed or anyone else who may know, can you the arrow function into a regular function for informational purposes?
.then(response => {
return response.json();
})
Never mind I figured it out, but I thought id leave this up here just incase someone else has the same question. Here are multiple ways to write the arrow function above using normal function syntax and other arrow function syntax:
1) .then(response => response.json()
2) .then(function(response){return response.json()}
3) .then(response) - You have to declare response as a variable in GLOBAL scope
- let response = function getResponse(response){return response.json()}
4) .then(response => { return response.json();})
this is probably the best tutorial for weather stuff with js only,,, and you explain stuff really nicely so everything is perfect
JS for beginners with es2015 OMG..... Please do it 😄😄😄
I appreciate your teaching style.
hey sir we want a latest javascript-ES6 tutorial from beginners to expert please sir, i am requesting you all the way from india
Good job, helped a lot. Please add some more API videos like these. Cheers
these 66 dislikes are the developer from PHP.
Great tutorial for beginners! I’ve been struggling to put all the pieces together and this really helped. I also really appreciate that you keep the mistakes in the video so we can follow along your logic to fix the errors. It’s SUPER helpful. Thank you and more please!
Thanks so much as well!
25:00 if Line 26 is not working for you , see if you have missed the dot in Line 7 and Line 8 after querySelector (23:48)
PS : Line number according to the above video
Your the best! :)
Hey!
Just wanna drop a thank you message for all the tutorials, i found your channel about a week ago and been doing the basic JS lessons + some of the projects. Thanks a lot, i learned much :)
and wow to your channel growth ! SUBS count doubled since i found it :D way to go man!
that's quite funny- "I have to make 10,000 cuts now"
41:14 "where is my multiply" hahahahahahah XD that was hilarious. Thanks for the video! Really enjoyed it :D
Was harder to follow in 2021 but thank you I got it working :)
i cant seem to get the weather api
How does your app automaticaly refresh when you change somethong in the code?
Hes using the Live Server extension from vscode
Live server Extension on vsCode, every time you change the code and save, the browser will be auto refresh for you
I used Visual Crossing Weather Api as suggested by another comment. For the icons, I created an icon folder and downloaded the Visual Crossing Weather icons from their github. Instead of creating a function, all I did was set the innerHTML of the icon div (NOT canvas) to contain a dynamic img URL that pulls the icon name from the Api and inserts it in the URL.
Question:
return skycons.set(iconId, Skycons[currentIcon]);
U are not using the id in the HTML, but class=icon
what exactly is being set here in the iconId?
So how is working without declaring the id for the HTML element, could you explain in detail?
The documention says:
skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);
"Missing required request header. Must specify one of: origin,x-requested-with" and status in console always 429 (Too Many Requests).. how i can solve this?
Support for the Dark Sky API ended on March 31, 2023, and has been replaced by Apple’s WeatherKit API. Do you have an alternative we can use?
the API of dark sky is no longer free to call what should I do now?
yes we need java script Videos for biginners :) love from INDIA:)
I was wondering, since there is no real backend, can't people still get your secret key? Is there a way to protect that so that it doesn't show upon inspection of the webpage?
for example read this article: hackernoon.com/how-to-use-environment-variables-keep-your-secret-keys-safe-secure-8b1a7877d69c
shoutout to all the real ones in this comment section. And to this video by Dev Ed, too wicked. lol he was also lowkey irked homegirl came through.
I can't figure out what I am doing wrong. I ran into problems about 20 minutes in...the part were you add the proxy. It appears I have in codded correctly but still gives me an error message..Fetch API cannot load ...URL scheme must be "http" or "https" for CORS request......The area where I am getting the errors looks like this in my code:
const proxy = "cors-anywhere.herokuapp.com/";
const api = '${proxy}api.darksky.net/forecast/xxxxxxxxxxxxxxxxxxxxxxxxxxx/${lat},${long}';
fetch(api)
I changed the numbers for the darksky.net to Xs to post on here.
' this is wrong, use this one: `
veyr good video bro congrats
well, we seem to have crossed a Pakistani or indian a-hole here. just like that annoying asian dude from Silicon Valley series. a proper A - Hole! Yes, you just read a comment written by son of Anton (created by Gilfoyle)
I know I'm late to the party but the Dark Sky API isn't available anymore, so I'm basically stuck at 14:52. Any suggestions or alternatives?
since Darksky is no longer accepting new signups i used Open weather map api instead
@@louzynerd129 can you share your code..or tell me your github so that i can access your code
Awesome tutorial brother, I’ve learn tons of new skills and tricks. Keep up the good work. God bless !
The life hack at 21:53...thank you!
So good handsome hair cut
Hey Mate, thanks for your helpful video ;) I've a question, how can i display the exact place of gelocalization, for example Munich?
thanks
Hi guys, i am new to JS and APIs, hopefully you can help. When I set the: let locationTimezone = document.queryselector("location.timezone"); and then make the callback later with: locationtimezone.textcontent = data.timezone; It does not work, It prompts the error (Uncaught TypeError: Cannot read property 'TextContent' of null, now I have checked that everything is spelled correctly and so on. Does anyone know why this is, and hos to possibly resolve it, cheers guys 😀
Hi - I had the same issue.
Check your querySelectors and make sure they contain the correct class and/or ID names from your DOM. For exmaple, i had a class called temp-degree and in my querySelector, i put temp.degree. As soon as i identified and changed this to temp-degree it worked!
It could be as simple as a typo!
Hope this helps!
@@Mikewakelyn thanks for the suggestions, I'll defo check that! 👌
We need JS for beginers.. (upto very advanced) PLEASE
DarkSky don't works anymore
Amazing tutorial! You have a natural skill to teach! 👏👏👏
This totally made me want to start coding. I just have one question, if I upload the code to GitHub, will the API still work ?? Or Will only work locally
Thanks!!
yes, Javascript serise
advanced and shortcuts for codes like u do in this video.
Awesome..
Tutorials Plus Project is the Best Way To Learn and I Really Liked it.
Could you share this source code
Suggestion: if you mention other tutorials (by you or others alike) write them down in the description. If I recall correctly YT algo rewards channels that keep people on the site. Cheers
Thank you for the video. I love your chill teaching style... I am a JS beginner and I am totally stuck! the index.html won't change from the default values even after API... any help/comments would help.... github.com/krystoferk/VanillaWeather
Don't understand why he skipped the "skycons.add("icon1", Skycons.PARTLY_CLOUDY_DAY);" step from the website. I think he just misses a lot of explanation in the set 34:20 part.
I'm using openweathermap API but can't get the icon to work. I do not see ICON but I do see description: "broken clouds". Any work around for this?
Hey everyone! Did anyone get an error using the heruko service for having too many requests?
yes, please do a JS beginner to advance tutorial. TY!
If the proxy doesn't work for you, you might create your own with Heroku, explained in stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141
Great vid you got my sub for sure, I learned a lot however I get a 404 error, I suspect it has something to do with CORS so the bypass doesen't work for some reason ~~
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at api.darksky.net/forecast/keyishere/$%7Blat%7D,$%7Blong%7D. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing) - this is the error I am getting
I've been following the project step by step, but I keep getting this console error, can anyone help me? .
app.js:23 Uncaught (in promise) TypeError: Cannot set property 'textContent' of null
at app.js:23
can somebody help me with the icons....I have used the OpenWeatherMap api......and also everything is okay with the api except that it is showing incorrect temperature data like 299F...any help would be appreciated