Use HTML, CSS, and JavaScript to create a fully functional weather app using an API.
❤ Subscribe: http://bit.ly/SubscribeDPT
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!
▶ https://twitter.com/DenverCoder1
👨💻 My code
▶ https://github.com/DenverCoder1/weather-app-tutorial
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
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J
💻 More tutorials
▶ https://www.youtube.com/playlist?list=PL9YUC9AZJGFHTUP3vzq4UfQ76ScBnOi-9
🙋♂️ Find me on other channels
Reddit 👽 https://www.reddit.com/r/DevProTips/
Twitter ✍ https://twitter.com/DenverCoder1
Github 👨💻 https://github.com/DenverCoder1
Sponsor 💞 https://github.com/sponsors/DenverCoder1
One-time donation ☕ https://ko-fi.com/jlawrence
💖 SPONSORS 💖
Get your username or a link to your channel here by sponsoring on Github
▶ https://github.com/sponsors/DenverCoder1
🎁 GET FREE STUFF WHILE SUPPORTING MY TUTORIALS
► https://bit.ly/jlawrencepromos
source