Real-time Weather App Using Vanilla JavaScript and API

In this video, I'll show you how to build a real-time weather app using vanilla JavaScript and the API. This weather app will be responsive and will use the latest weather data from the API.

If you're looking to build a weather app that is both responsive and powered by the latest weather data, then this video is for you! By the end of this video, you'll have built a responsive weather app that uses the API!


? Essential links
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Postman workspace: https://www.postman.com/codewithsadee-team/workspace/openweather-free
Download the starter file to practice (github): https://github.com/codewithsadee/weatherio-starter
Source code: https://www.patreon.com/posts/weatherio-app-79447611?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link
Figma UI: https://www.patreon.com/posts/weatherio-app-ui-79447705?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link


HI ?
I'm Sadee(web dev)
In this channel, I make videos about the Complete Responsive website.
You can check out my channel ?

? My Channel: https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g
? Subscribe: https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1


⏱️ Timestamps
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
0:00 - Demo
8:09 - Starter file
9:27 - Html Css: Project initial (css variables and reset)
17:45 - Css: Material Symbol for Icon
20:17 - Html Css: Header
41:38 - Html Css: Current Weather
52:25 - Html Css: 5 Day Forecast
57:17 - Html Css: Today's Highlights
1:09:32 - Html Css: Hourly Forecast
1:15:56 - Html Css: Footer
1:19:36 - Html Css: Loading
1:21:37 - Html Css: Error 404
1:24:06 - Css: Media queries
1:42:30 - OpenWeather: Signup and API key
1:44:36 - Javascript: All fetch url configuration
1:52:06 - Javascript: All module configuration
2:02:14 - Javascript: Route configuration
2:09:30 - Javascript: Search toggle for mobile device
2:13:03 - Javascript: Search API integration
2:23:16 - Javascript: Current weather API integration
2:41:17 - Javascript: Air pollution API integration with Today's highlight section
2:50:36 - Javascript: Forecast API integration with Hourly and 5 Day forecast section
3:07:07 - Javascript: Error 404


? Like - Follow & Support
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Twitter: https://twitter.com/codewithsadee
Github: https://github.com/codewithsadee
Facebook: https://www.facebook.com/codewithsadeefan
Instagram: https://www.instagram.com/codewithsadee


? Music
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
- Bcalm x Banks - Anemone
- Provided by Lofi Records
- Watch: https://youtu.be/dH30E63p1WI
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks - Hiraeth
- Provided by Lofi Records
- Watch: https://youtu.be/Cx-kNgMLByQ
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks - Bluebird
- Provided by Lofi Records
- Watch: https://youtu.be/j0JPdUAcVB0
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks - Just Breathe
- Provided by Lofi Records
- Watch: https://youtu.be/fktpxyIhZMI
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks - Gentle Hills
- Provided by Lofi Records
- Watch: https://youtu.be/U6bCBDpLKx0
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks x Purrple Cat - I'll Be There
- Provided by Lofi Records
- Watch: https://youtu.be/_HcIfJoHTfs
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks x cxlt - Yours
- Provided by Lofi Records
- Watch: https://youtu.be/p0ZjKlZwCXI
- Download/Stream: https://fanlink.to/FeelingsPt2

- Bcalm x Banks - Back Then
- Provided by Lofi Records
- Watch: https://youtu.be/CQkfdSJQpy0
- Download/Stream: https://fanlink.to/FeelingsPt2


⚠️ Disclaimer
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Disclaimer video is for educational purposes only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favour of fair use


#codewithsadee
#vanillajsapp
#webapp
#weatherapp