Build a Weather App With JavaScript

Integrating with APIs is a crucial skill for any web developer to succeed. In this video we will be integrating with the DarkSky Weather API and the Google Places API. Using these APIs we will learn how to connect to an API from both the client and the server. We will also cover how to safely store API keys for use. By the end of this video you will have a complete understanding of how to call various different APIs from both the client and server.

📚 Materials/References:

🧠 Concepts Covered:

- How to call an API from the client JavaScript
- The safest way to store API keys
- How to consume Google APIs
- How to consume the DarkSky API
- How to user axios

🌎 Find Me Here:

#WeatherApp #DarkSky #GoogleAPI

[durppp]

FOR PEOPLE ATTEMPTING THIS AS OF MARCH 2022:
You'll need to register a billing account to use the Google API, it's a free 30-day trial that doesn't automatically renew.
The API will not work without doing this.
Hopefully this saved someone the headache this caused me, thinking it was my code not working 😅

[marcwinner]

Great tutorial! I appreciate it a lot when tutorials begin with a completely empty folder and goes from there. It makes the tutorial easier to take in somehow.

[themystx]

This tutorial has merit even in September 2022. It adds the additional steps of converting the existing Darksky API calls to OpenWeather (or other APIs) and working with data that needs to be converted. I learned more modifying this tutorial than the tutorial itself. Give it a try! It's NOT outdated if you're looking to learn.

[reynardtcloete]

You're the best teacher on the internet.

[nsharma]

I've always wondered how to hide API keys, and here you are with a solution! I also learnt about google APIs and axios which was a great surprise. Free access to dark sky may be a thing of the past, but your teachings will forever be helpful! Thanks 😊

[radaefilms]

Thank you for this amazing video, it really helped me a lot. I did this with the weatherstack api as dark sky is not accepting new users. Really didn't have to change much, it worked well.

[DaRealTT]

WARNING: This project will not work. The Dark Sky API is no longer accepting new signups, and therefore you cannot build this project. Sorry!

[behar]

That's a hard project to do but you are experienced with JavaScript for years keep it up man :)
Would be nice to see more tutorials with Vanilla JavaScript like building a shopping cart, quizzes, popups and more stuffs :)

[RonWaller]

Thank you so much. I was looking for tutorial like this. I think yours is the first I have seen when you show how to hide the api keys.

[shreyasd]

Hi, Kyler. It's a learnable video. Small Small things that I find missing are:-
#1. more detailed information about predefined function and why that function used is a good fit for the place instead of potential options available?

#2. Setting up the environment or a video link in description if someone from PHP world stumped up with your tutorial. I find it bit tricky with no experience with express, node.

[SethGardnerVlogs]

i randomly thought of mkbhd while watching this and realized that you kinda sound like him. i can’t unhear it. 😂

[JohnWeland]

With Apple buying Darksky, it might be good to make an opensource weather API. Start out with a simple API that gets its data from DIY weather stations that user can build an add. Then use machine learning to do forecasting.

[irafaelasilva]

I just want to say, thanks for this video! I was lost about to do API calls and you save me!! <3

[catamarii]

Followed this exactly and could not get the drop down to function at 20:11 :( bummer, this video is too advanced for me anyway - had to spend time figuring out how to install npm in the first place.

[Hannah-onzw]

Thank you so much for this awesome tutorial! A bit annoying with the daily limit for google being so low, or at least for me, it drained instantly. I got it working a few times a day though lol.

[Raphael-jorp]

Very nice project.
Unfortunately, you have to register a credit card in order to use the google api right now, which is a bit sad.
Altho, I'd like to know how I could integrate your workflow but for a Wordpress website, so using a classic BDD.
Thank you !

[ghaithderbali]

Amazing tutorial, but you can use npm init -y to initiate a project without hitting the enter key bunch of times

[carlonnrivers]

Great stuff! Thanks for making. I still don't think I have the knowledge to implement it into my full stack course, but it's definitely the better option than Websockets for a simple thing as sending one piece of information to the database without refreshing the page...only when i properly figure out how to do that with axio, but I'll keep looking for more info.

[dr.jokernalayaknaik]

Thanks Brother.. I am junior dev and needed such stuff.. Please make some more projects tutus so that junior devs can learn from this...


I have one doubt, why you are using axios?

[AnnieTaylorChen]

I like the animated weather icons and easier access to the address typed in. Might consider adding those to mine :D One suggestion: you might want to include a "prerequisite" so people know how difficult the tutorial will be for them and provide links to your helpful videos if they're zero/beginning beginners. ;)