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
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

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

⏱️ 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
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀

🎶 Music
▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
- Bcalm x Banks - Anemone
- Provided by Lofi Records

- Bcalm x Banks - Hiraeth
- Provided by Lofi Records

- Bcalm x Banks - Bluebird
- Provided by Lofi Records

- Bcalm x Banks - Just Breathe
- Provided by Lofi Records

- Bcalm x Banks - Gentle Hills
- Provided by Lofi Records

- Bcalm x Banks x Purrple Cat - I'll Be There
- Provided by Lofi Records

- Bcalm x Banks x cxlt - Yours
- Provided by Lofi Records

- Bcalm x Banks - Back Then
- Provided by Lofi Records

⚠️ 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

[thewalrusdragon]

I really enjoy that you build these things without a ton of frameworks and libraries but man I do wish you’d explain what you’re doing. I know a lot of us westerners on YouTube can be rude about accents and such, but don’t let that stop you from doing it. You make great work, and people who actually want to learn would be highly appreciative of explanations to the code.

[pogboii]

honestly i love the style of coding youre doing. its great for me to just code along side you and learn the different methods of coding youre doing. i learn so much from you doing stuff like p.title-1 then pressing tab to speed up the coding process. thanks for the great video man

[kumite]

I just discovered you, I'm still following the movie app video with JS. I was looking for someone who publishes video with Api using plain js, a lot of people jump straight to React.
You're doing an amazing job with these videos, you should keep making API content with vanilla JS, one can learn a lot.
I read you live in a noisy place, but anyway, the only advice I may give you is to explain at least a bit of what you're doing, am sure you would have more subscribers.
Greetings from Italy

[SushilSharma_]

Your work is literally amazing, I am following since last one month and your projects helping me a lot but if you can add your voice along with the vidoes in will be so much helpful for viewers.
Btw, thanks a lot for your work.

[niteshprajapat]

So beautiful UI 😍
Nice initiative for developing realtime project 🔥
Thank you Sadee Sir ❤️

[ucandoitkkk]

Hello, I am Korean.

I've used this API before. You made it so pretty I'll watch the video and make it again! It's amazing!

[RCAcademy]

hello! codewithsadee, you are a true master, you make everything look easy, really spectacular designs in terms of the visual part, I love your originality in each project, my congratulations.

[gudluck]

Bro Please make voice over that make more sense for us to understand the concept by doing project

[emperorza]

Thank you so much for this!! I appreciate you walking us through everything even small things like where to get the initial files! It was very helpful for an intermediate coder. Great tutorial !

[huynhphatat]

This what I've always expected since I follow you. Amazing as usual

[Ludo]

i seriously have terrible css skill to do something as good as you. it's really impressive.
love the typing sound.

[tokhirovb]

Good work
We always watch you and everytime you urge me to challenge myself.

[odiniyaprince]

Your style of coding may not be as same as others as we all learn differently. this is y you need to explain your process when posting great stuffs like this. Kudos to for your time creating this so fine.

[_poke_rock]

An advice for any newcomer follow the code carefully cuz in the end when i was making js there was a "/" or "+" missing error in other files and it took 3-4 hours just to find one
even chat gpt can't do anything unless u paste every single file may be it can solve your errors

[adityadevchakke]

Hey, such a great project, I have learned a lot by doing this..! I'd like to suggest a slight improvement in the code. In line 412 of app.js, replace dt_txt with dt, and in line 415, multiply dt by 1000 to obtain the current date. This adjustment is necessary because the API passes data as dt, not dt_txt. This will correctly show data for next 5 days forecast

[ZuniRehman-fd]

The icons u add with m-icon class not shown please help...

[myviptuto]

Super nice project with a stunning design. It could be better. Please, make the page title dynamic to indicate the name and country code of the location it is currently showing weather details.

[azizbeksamatov]

Perfect project in js. Thanks for this content. By the way, I liked how you have used keyboard sounds and it's display. Can I ask, what soft you have used for that effect?

[gudiyaagrawal]

aap bohot accha kaam krte ho, keep it up

[yogesh]

Why dont you add your sound explaining the same ?