Build a Weather App with HTML, CSS & JavaScript

Use HTML, CSS, and JavaScript to create a fully functional weather app using an API.

In this tutorial, I will show you how to access the OpenWeatherMap API in JavaScript to create a website that displays the current weather for any location.

I will show you how to use flexbox to create a responsive, centered card, how to access APIs using JavaScript's 'fetch()', and how to dynamically modify content on the page and background images.

Follow me on Twitter for JavaScript tips and quizzes!

👨‍💻 My code

What topics should I cover next?

Let me know in the comments what you want to see next in my tutorials!

📺 In this video:
0:00 - Intro
0:25 - Creating the HTML markup
4:20 - Creating CSS styles
16:00 - Getting started with the API
19:30 - Fetch Weather
22:24 - Displaying results
29:56 - Search button listener
32:00 - Enter key press listener
32:50 - Hide results while loading
35:55 - Background images from search
36:55 - Conclusion

🖥 More Web Development tutorials

💻 More tutorials

🙋‍♂️ Find me on other channels

💖 SPONSORS 💖
Get your username or a link to your channel here by sponsoring on Github

🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS

[DevProTips]

💖 Let me know if you have any questions! 🗣 What do you want to see more of on my channel?
👍 Thanks for watching! Don't forget to like and subscribe!

[Khigha]

Just completed the weather tutorial. I learnt a lot and I liked the video. This was my first introduction to using an API, I'm glad I started with this video! You explained really well, you tested and debugged, great vid. Thanks mate!

[cryptoffee]

You are passing the knowledge in proper manner Jonah. I easily understood your way of thining here.
Now off to build my own weather app.
Cheerio!

[compncheese]

Wow, the skill of styling in the DOM the way you did was fascinating, thank you so much for teaching me this!

[nabinpaudel]

Honestly speaking, what a epic tutorial this was. Thank you for teaching me fetch such data so easily

[spiderbear]

Just wanted to say this was a very good tutorial. I followed along and completed the app and also learned a lot. Looking forward to more videos! Thanks!

[elinordeniz]

One of the best project I have made, clear explanation, good codes, teaching and amazing. Can't wait for other js projects

[jeanlamego]

Thanks for you tutorial! I loved learning API with you, Very simple and efective way!

[motheuser]

This is going to be how I learn to use APIs. Thanks a ton, man.

[amaanali_]

Wow! Just made my second third party api project within 2 hours thanks for this video

[IvanKrsev]

Great tutorial. Regarding what you could do next. When the app starts add city based on the client current location, instead of hardcoded one.

[thesearch]

You saved me my college asked me for work experience to enroll in a front end design program this is what i did in first go !!! big up brah

[ameerwho]

the best tutorial ever! I'm currently in an online program learning html, java & css and they don't break it down as thorough as this! Thank you!

[vergilkelley]

Damn good vid. Probably one of the best tutorials I have ever seen. Clear, concise, complete.

[jrupp]

bruh everything about this was sick the background image search was cool af

[vinaypatil]

First time seen CSS done right in dev tools

Looks dope 🔥 man

[henryaduma]

Finally finished after two weeks of heavy focus due to a long work schedule

feeling so accomplished.

Thank you to the creator of the video.
🤟💌

[SnappyScience]

Was keen to learn about APIs and thought a weather app would be a great start. This video was perfect for helping understand APIs and how to use the information in a useful way. The background image generator is a super nice touch. Keep up the great content!

[rtyprty]

ran into a few hiccups but it all worked out in the end. thanks a lot bro

[pixiedustdreams]

God sent this was! Minimal, to-the-point, crisp and cool❤