Real-time Weather App Using Vanilla JavaScript and API

Published: 02 March 2023
on channel: codewithsadee
109,574
2.5k

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...
Download the starter file to practice (github): https://github.com/codewithsadee/weat...
Source code: https://www.patreon.com/posts/weather...
Figma UI: https://www.patreon.com/posts/weather...


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:    / @codewithsadee  
🔔 Subscribe:    / @codewithsadee  


⏱️ 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:   / codewithsadee  
Github: https://github.com/codewithsadee
Facebook:   / codewithsadeefan  
Instagram:   / codewithsadee  


🎶 Music
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
Bcalm x Banks - Anemone
Provided by Lofi Records
Watch:    • Bcalm x Banks - Anemone  
Download/Stream: https://fanlink.to/FeelingsPt2

Bcalm x Banks - Hiraeth
Provided by Lofi Records
Watch:    • Bcalm x Banks - Hiraeth  
Download/Stream: https://fanlink.to/FeelingsPt2

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

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

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

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

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

Bcalm x Banks - Back Then
Provided by Lofi Records
Watch:    • Bcalm x Banks - Back Then  
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


Watch video Real-time Weather App Using Vanilla JavaScript and API online without registration, duration hours minute second in high quality. This video was added by user codewithsadee 02 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 109,57 once and liked it 2.5 thousand people.