Build A Weather App With Vanilla Javascript Tutorial | Javascript For Beginners

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ •

  • @developedbyed
    @developedbyed  6 років тому +215

    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!

    • @TrendRain
      @TrendRain 5 років тому +4

      Full JS script will be great

    • @X98ghostrecon
      @X98ghostrecon 5 років тому

      Yes

    • @amyp.575
      @amyp.575 5 років тому

      yyeessssss

    • @isaaccorcoran6612
      @isaaccorcoran6612 5 років тому

      This was awesome, don't apologize.

    • @jakes2020
      @jakes2020 5 років тому

      I wish you kept it longer. Towards the end it became hard to follow.

  • @badcatdesign
    @badcatdesign 6 років тому +454

    Yes! JS for Beginners. Let's see it :)

  • @zuzannac8105
    @zuzannac8105 5 років тому +41

    I love the fact you didn't cut out a person in the background hehehe, great tutorial thanks for explaining everything so clearly!

  • @alimelihkoksal9391
    @alimelihkoksal9391 4 роки тому +4

    The feeling of understanding what he is doing before he describes , as a beginner . Worth a lot to me

  • @chiboymarcel527
    @chiboymarcel527 5 років тому +6

    Your excitement in this tutorial actually got me so focused till the end of the tutorial. thanks, man love it.

  • @hassanabdinur5603
    @hassanabdinur5603 5 років тому +1

    I haven't even finished the video but Dev Ed is THE best person to explain how javascript works and how apis work with it. All of your videos are super helpful! Thank you so much for giving back to the youtube community and helping us aspiring developers out!

  • @nickschmitt8594
    @nickschmitt8594 5 років тому +11

    After so many months, I finally followed a project through to completion. I'm so proud! Thank you.

  • @rijadheco
    @rijadheco 5 років тому +29

    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.

  • @jrkdigital
    @jrkdigital 5 років тому +20

    Yo this was amazing! I didn't even know how to make api calls and I learned so much! Can't thank you enough!

  • @rahuldutta8386
    @rahuldutta8386 3 роки тому

    Thanks a million.. I was trying to inject the api data onto my html... I was on the verge of throwing my laptop.... You just saved my day..... Keep up the good work.

  • @JeffRAX
    @JeffRAX 5 років тому +13

    Just want to say thank you sir. I'm very glad to have found your channel.

  • @yatinvij5381
    @yatinvij5381 4 роки тому

    I thought Vanilla JS was a seperate framework, so I kept avoiding this video, but I found out that it is just plain javascript, now I can watch so many more tutorials.

  • @desmondhamiltonjr8556
    @desmondhamiltonjr8556 4 роки тому +3

    Yes for the beginner JavaScrip.!
    Thank you for being so amazing and easy to understand

  • @fergusfergus4495
    @fergusfergus4495 3 роки тому

    Two years ago and i still learn of this videos, THANKS MAAAAAN YOU ARE A INCREIBLE HUMAN

  • @ziaulhasanmozumder7152
    @ziaulhasanmozumder7152 5 років тому +3

    this is probably the best tutorial for weather stuff with js only,,, and you explain stuff really nicely so everything is perfect

  • @ITQUEST-fd1zk
    @ITQUEST-fd1zk Рік тому

    There are many concepts in JavaScript that I learned from this series, it is absolutely amazing

  • @jillianlee950
    @jillianlee950 5 років тому +2

    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!

  • @martindurrant5505
    @martindurrant5505 4 роки тому +5

    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

    • @nicoletilbe1611
      @nicoletilbe1611 4 роки тому +4

      How did you implement the other api? I'm trying to use OpenWeather and it wasn't working

  • @draebard1036
    @draebard1036 5 років тому +5

    Thanks Ed! Im glad I've found your channel! Such a underrated channel! More content to come! Love you works :D

  • @dankorse
    @dankorse 3 роки тому +1

    Thank you so much! This is incredibly helpful. I’m a beginner who’s almost binge watching your vids. I’m gonna work on my weather app and this was so good! Thank you

  • @jason0ng
    @jason0ng 6 років тому +24

    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! :)

  • @nomanhossain1
    @nomanhossain1 5 років тому

    I'm a beginner and I just love your channel. Lots of things I have learned here.

  • @crazycdn8327
    @crazycdn8327 5 років тому +3

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

  • @rickgale3182
    @rickgale3182 5 років тому

    Took an extra day to chase my problems, but it's in the bag. Thank you, Ed. Please keep them coming!

  • @windbreezetv
    @windbreezetv 5 років тому +6

    I appreciate your teaching style.

  • @adarshtiwari7395
    @adarshtiwari7395 3 роки тому

    You are one of my favorite coach ever!! Thanks a ton! God Bless You!

  • @Kljopa
    @Kljopa 5 років тому +7

    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!

  • @mariolaporte3429
    @mariolaporte3429 5 років тому

    Super cool tut. I got lost on one of my lines of code, instead of guessing what I broke, I restarted from scratch. Super informative. Keep up the tuts!!

  • @wonjaehwang7670
    @wonjaehwang7670 5 років тому +12

    23:20 “I’m gonna have to make 10000 cuts now” when someone intrudes your coding session lols

  • @miibotrichard6991
    @miibotrichard6991 5 років тому

    Dev Ed, I just want to say thank you and you are a good teacher and always will be. God richly bless you for your great job.

  • @A09550
    @A09550 5 років тому +46

    You speak perfect English, I just recognized you are German when you said "die" for "the".

    • @winterdaisy5610
      @winterdaisy5610 5 років тому +2

      I CAN Speak german too and i know you are vietnam so BOOM

    • @winterdaisy5610
      @winterdaisy5610 5 років тому +1

      he is in berlin

    • @victorschweitz3506
      @victorschweitz3506 5 років тому +14

      Guys, he's from Romania.

    • @diegoramos3782
      @diegoramos3782 4 роки тому +2

      He's from Machu Picchu

    • @egehurturk6209
      @egehurturk6209 4 роки тому

      @@winterdaisy5610 :// btw I'm researching Vietnam for my term project lol (1967's) (Son My village, My Lai massacre)

  • @tiwithetiw3537
    @tiwithetiw3537 4 роки тому

    I watched it until the end and I love the way you explained the whole things. Thank you, it gives me some ideas.

  • @shingiraibondai747
    @shingiraibondai747 5 років тому +7

    hahaha 23:28 we learned alot about relationships. Thank you for the great tutorial 😂😂😂😂😂

  • @andymendez3065
    @andymendez3065 5 років тому

    absolutely, gain the traction for your channel, teach others, I feel it is a great experience to teach, and benefit from that process! thank you for asking!

  • @robertrinkema6369
    @robertrinkema6369 5 років тому +3

    Good job, helped a lot. Please add some more API videos like these. Cheers

  • @Jdb63
    @Jdb63 4 роки тому

    Holy crap you were only at 1000 subs when you made this!? Glad to see your channel has taken off since then. Well deserved

  • @HikwaMehluli
    @HikwaMehluli 5 років тому +3

    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

  • @sahilsadhuramani
    @sahilsadhuramani 3 роки тому +1

    yes we need java script Videos for biginners :) love from INDIA:)

  • @RobAgrees
    @RobAgrees 4 роки тому +30

    @23:00
    "I'm going to have to make 10,000 cuts now"
    "Oh" *walks out, shuts door"

    • @calanick
      @calanick 4 роки тому +4

      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.

    • @lenardesguerra4548
      @lenardesguerra4548 3 роки тому

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

  • @lindseyhoward3313
    @lindseyhoward3313 3 роки тому

    Yes definitely should do a whole Javascript series! This tutorial helped me. thanks!

  • @kushtrimb3024
    @kushtrimb3024 5 років тому +4

    Yeah I'd like to see more "modern" JavaScript. That would be cool.

  • @richamaheshwari7582
    @richamaheshwari7582 4 роки тому +1

    Absolutely yes!! the way you explain the topics and JS projects for beginners is so nice..it's really helpful for me. You are awesome :)

  • @Auxfuse89
    @Auxfuse89 5 років тому +3

    41:14 "where is my multiply" hahahahahahah XD that was hilarious. Thanks for the video! Really enjoyed it :D

  • @Alhw1n
    @Alhw1n 5 років тому

    Oh mate you are just great. We are humans and we make mistakes but you didn't freak out.. You just took your time and found the error. I learn a lot today so I will be looking forward for your next videos! Thanks!

  • @AminSani
    @AminSani 4 роки тому +38

    They are no longer accepting new signups for Dark Sky Api.

    • @nathanlegakis9822
      @nathanlegakis9822 4 роки тому +7

      So, does this mean I shouldn't waste my time trying to watch this video and do what he does?

    • @AminSani
      @AminSani 4 роки тому

      @@nathanlegakis9822 Not exactly, You can find another APIs.

    • @nathanlegakis9822
      @nathanlegakis9822 4 роки тому

      @@AminSani Name one please.

    • @AminSani
      @AminSani 4 роки тому +6

      @@nathanlegakis9822 Rapidapi

    • @AminSani
      @AminSani 4 роки тому +2

      @@nathanlegakis9822 If my comment was helpful for you please like my videos on my channel

  • @sonnyb6536
    @sonnyb6536 5 років тому

    Awesome job Ed! Learning a lot. Javascript is now just a little bit less stressful lol.
    The code wasn't working and I was furious. I kept wondering why and finally after a while I console.logged again and found out that I did this:
    let long;
    let let; // Instead of: let lat;
    Little mistakes hahahaha...Now the code works. Hope to keep seeing more javascript from you.

  • @MasterZiomekPL
    @MasterZiomekPL 5 років тому +11

    Before watching this video I taught I'm decent with css...

  • @popescugeorge9319
    @popescugeorge9319 4 роки тому

    I had a lot of fun working on this program because of you! I really like the way you explain!

  • @Mikewakelyn
    @Mikewakelyn 5 років тому +3

    Anyone else getting "Uncaught (in promise) TypeError: el.getContext is not a function with the Skycons??...PLEASE HELP!

  • @ceejGU
    @ceejGU 5 років тому

    I'm finally learning javascript and I don't have any prior experience so I'd appreciate more beginner JS content!

  • @mihaelaandreeapopescu4900
    @mihaelaandreeapopescu4900 5 років тому +3

    SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data :( can anyone help me out?

  • @marwanalsaydali6886
    @marwanalsaydali6886 5 років тому

    Yes, I saw this channel only this weekend, but now it is my favourite channel for 2019!

    • @ayobiao4968
      @ayobiao4968 5 років тому +1

      me too just found it this week. totally love it

    • @developedbyed
      @developedbyed  5 років тому +1

      Biggest compliment I've got. You made me smile!

    • @developedbyed
      @developedbyed  5 років тому +1

      You too!

  • @keonheelee3666
    @keonheelee3666 3 роки тому +7

    since Darksky is no longer accepting new signups i used Open weather map api instead

    • @mehisliinar4214
      @mehisliinar4214 3 роки тому

      Thank you for that :)

    • @hitmansharma282
      @hitmansharma282 2 роки тому

      could you share your code please

    • @rightbackatcha22
      @rightbackatcha22 2 роки тому

      definitely not beginner friendly. i think i'm going to give up on this project.

  • @drakebhau8922
    @drakebhau8922 4 роки тому

    Always love your content! You are doing a great job. I see many paid courses but frankly say that I learn a lot from your channel. Love from Norway!

  • @ignaciopuglisi823
    @ignaciopuglisi823 5 років тому +3

    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 :)

    • @petertester915
      @petertester915 5 років тому

      I am getting the same, any idea @dev Ed what might be the proboblem?

    • @milencode
      @milencode 5 років тому

      Yep, same here. Please help.

    • @elie3423
      @elie3423 4 роки тому

      Missing required request header. Must specify one of: origin,x-requested-with

  • @charliedoherty7166
    @charliedoherty7166 4 роки тому

    yes bring on the JavaScript tutorial series, it is needed

  • @devproblem5870
    @devproblem5870 5 років тому +4

    Uncaught (in promise) SyntaxError: Unexpected token I in JSON at position any body tell the solution..??

    • @vishalsl-taskseveryday3153
      @vishalsl-taskseveryday3153 5 років тому +1

      .text() instead of .json()

    • @zurzieh1022
      @zurzieh1022 4 роки тому

      @@vishalsl-taskseveryday3153 did this then i got a cannot destructure property 'temperature' of 'data.currently' as it is undefined.

    • @vishalsl-taskseveryday3153
      @vishalsl-taskseveryday3153 4 роки тому

      @@@zurzieh1022 sometime you will get that error by proxy.

  • @Charles-ho9fw
    @Charles-ho9fw 3 роки тому

    Thank you so much. Ive watched 2 of your videos. Rapid and painless learning. Keep it up.

  • @xrisk2528
    @xrisk2528 5 років тому +14

    i dont know what im doing. just im copying what he writes :D

  • @miks4496
    @miks4496 5 років тому

    Thanks man! Do more of this. I'm really enjoying your tutorials and its 2 in the morning rn.

  • @gregoirejeannerat2220
    @gregoirejeannerat2220 4 роки тому +7

    Darksky stopes allowing new singups...😭😭

    • @lorenzovonmatterhorn6773
      @lorenzovonmatterhorn6773 4 роки тому

      Exact Problem :(

    • @jchandlervids
      @jchandlervids 4 роки тому +3

      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!

    • @lorenzovonmatterhorn6773
      @lorenzovonmatterhorn6773 4 роки тому

      @@jchandlervids Thanks a lot, mate

    • @hitmansharma282
      @hitmansharma282 2 роки тому

      @@jchandlervids Can you share you code here? Im facing a lot of problems

  • @azatecas
    @azatecas 5 років тому

    thanks for this tutorial, ive learned vanilla vanilla js and had no idea how to implement it with Html and css to do something cool, this tutorial gave me a lot of confidence to keep pushing through to the end! subbed!

  • @xfronwenzyoucamex
    @xfronwenzyoucamex 3 роки тому +3

    If you use Open Weather you don't even have to use a proxy.

    • @zacharyshutoski2375
      @zacharyshutoski2375 3 роки тому

      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.

  • @grammardad
    @grammardad 6 років тому +2

    great stuff, ed. thanks for being so thorough-- errors and all! much appreciated.

  • @tejlehal429
    @tejlehal429 4 роки тому +11

    Unfortunately Dark Sky is bought by apple!

    • @blvklizttv4208
      @blvklizttv4208 4 роки тому

      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.

    • @noelch1671
      @noelch1671 4 роки тому

      right

    • @amarjitsingh8954
      @amarjitsingh8954 4 роки тому +1

      const api= `${proxy}samples.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=439d4b804bc8187953eb36d2a8c26a02`;

    • @aenaqadeer9464
      @aenaqadeer9464 4 роки тому +1

      @@amarjitsingh8954 is it working sir??

    • @amarjitsingh8954
      @amarjitsingh8954 4 роки тому +1

      Aena Qadeer yes my friend it works!!

  • @simonsanchez23
    @simonsanchez23 4 роки тому

    You explain things very clearly and with such a joy that makes me wanna learn more and more. You're awesome, thank you!

  • @davidssali6642
    @davidssali6642 2 роки тому +1

    Awesome tutorial brother, I’ve learn tons of new skills and tricks. Keep up the good work. God bless !

  • @marcinzale
    @marcinzale 3 роки тому

    Great tutorial!
    You make one of the best tutorials on UA-cam!

  • @kristinac8250
    @kristinac8250 5 років тому

    Super awesome! I was getting frustrated with an app I'm building and decided to do something fun. This was great. I'm excited to stretch my muscles with some refactoring and to research some of the things I hadn't seen before. Thanks!

  • @TheRedPillz
    @TheRedPillz 4 роки тому

    Yes. Definitely the series would be a great idea. Thanks again. Awesome tutorial.

  • @catamarii
    @catamarii 3 роки тому +1

    The life hack at 21:53...thank you!

  • @abdullaalblooshi2406
    @abdullaalblooshi2406 4 роки тому

    Very nice.
    Writing JavaScript start: 10:02

  • @mosporsho7994
    @mosporsho7994 3 роки тому

    He said look at this " Beautiful Error" That's a big motivation for me. as I was always scared of errors. Guys Errors are beautiful ! 🌹

  • @JBdunks
    @JBdunks 5 років тому

    Great video. I’ve been learning for a few months now and I found your video extremely helpful. Thank you.

  • @rajanbrahma0
    @rajanbrahma0 5 років тому

    Your way of guiding is awesome! Your videos made so many misconceptions clear to me.. keep up the good work!

  • @randomguy94
    @randomguy94 4 роки тому

    Great tutorial! I had to play around with it to make it work since DarkSky isn't available anymore, and am very pleased with the end result. Thanks for all the great content! I bought your course and look forward to going through it soon.

    • @codewithnutifafa
      @codewithnutifafa 3 роки тому

      how exactly did you play around it because i am now realising that dark sky isn't available in the middle of the video

  • @juanmillord8878
    @juanmillord8878 5 років тому

    Thank you. This kind of videos are making the difference for me. I follow along and try to understand as much as I can. I'm new to programming and is a need to learn vanilla in order to deal with frameworks in the future and take the best out of them. Thank again, this is very usefull.

  • @arjunmuchhadiya9793
    @arjunmuchhadiya9793 5 років тому +2

    Yes I want JavaScript for beginners!

  • @mohdirfan-nv5sl
    @mohdirfan-nv5sl 3 роки тому

    Love the way you explain bro...I am a beginner but I have learnt many things by watching you..keep it up ..love from india ❤️

  • @ЕкатеринаКручко-ю3ч

    Hello from Belarus. This is awesome tutorial! Thanks.

  • @ManontheBroadcast
    @ManontheBroadcast 6 років тому +1

    Great, simple and digestible tutorial ...
    Definitely go for the JavaScript tutorial series.

  • @viraj.bhartiya
    @viraj.bhartiya 5 років тому

    How can someone dislike such a great video

  • @MaximConstantinou
    @MaximConstantinou Рік тому

    We owe you a big thank you, people land jobs because of the help you provide 🙏🏼

  • @CodeCatProgramming
    @CodeCatProgramming 4 роки тому

    Old video, but you’ve taught me a lot. One love lil nikka.

  • @reqvida2426
    @reqvida2426 Рік тому

    It cannot be more simplified....Thanks to you

  • @juventusventuno9213
    @juventusventuno9213 4 роки тому

    Just the walkthrough I’ve been looking for - and very well done.

  • @tcp5212
    @tcp5212 5 років тому

    Thank you so much. I have been searching non stop. Then this came on my recommendations, I was like no way. Thank you :)

  • @TheYoRiX3
    @TheYoRiX3 5 років тому

    the best fetch explanation I found, you're the best

  • @MrTioung111
    @MrTioung111 5 років тому

    I have been looking for the solution to that CORS issue for weeks now. Thanks bro.

  • @arvindersingh9863
    @arvindersingh9863 4 роки тому

    Congratulations , you are now almost at 500k subs , 499k in just less than 2 years.👍👍👍👍

  • @1vigneshram
    @1vigneshram 4 роки тому

    When i am frustrated while coding ! i like to watch your video see how he is enjoying and laughing making project and coding

  • @rockinrandalf
    @rockinrandalf 5 років тому +1

    You're doing really a great job and you have won one more subscription. Thanks a lot and keep on doing the good work!

  • @christopherklint396
    @christopherklint396 5 років тому +1

    Great job with the teaching! Very easy to follow and encouraging to see just how much one can do with Vanilla JS :)

  • @raghavherugu6934
    @raghavherugu6934 4 роки тому

    What an amazing teacher! keep on making these amazing tutorials!!!!

  • @BalloonAffirmations
    @BalloonAffirmations 5 років тому

    you are frigging genius ... keep the good work flowing

  • @jn4198
    @jn4198 4 роки тому

    I just got into web development again after a year of not doing anything, I forgot how much fun this is.

  • @tinkering-thoughts
    @tinkering-thoughts 5 років тому

    Awesome man! Love your videos. Easy and fun to watch and follow your tutorials. Got my weather app running just fine.

  • @sakinebarati7010
    @sakinebarati7010 3 роки тому

    Thanks a lot you say everything in your projects and also you say how we can fix our mistakes so it's really helpful , 🙏🙏

  • @jashanbansal2613
    @jashanbansal2613 5 років тому +1

    You are awesome Man!! Keep up the awesome work. Your channel will definitely grow at much higher rate if you will continuously do this amazing work. Thanks once again :)

  • @alexeusebio6984
    @alexeusebio6984 5 років тому

    I really love your videos first for the way you teach and because of your happiness and fun, thanks for your content which help us and make us enjoy coding