Advanced Weather App using CSS & JavaScript

Hey guys 😁 Are you looking for a Weather App Project using CSS & JavaScript, don't miss this advanced tutorial! Today, I'm gonna teach you how to use an API Key to receive data and show them in an amazing UI 😎 Hope you enjoy this video, don't forget to hit the subscribe button!

📂 Assets

🔗 Source code

🔔 Subscribe Now!

⏱ Timestamps
00:00 Weather App Preview
01:34 Search Box Elements
02:14 General Styles
02:37 Container Styles
03:11 Search Box Styles
05:19 Adding Weather Box
05:52 Weather Box Styles
07:18 Adding Weather Details
08:07 Weather Details Styles
09:38 Adding 404 Box
09:58 404 Box Styles
10:45 Handling Searches using JS
11:42 Getting API Key
12:52 Fetching Data from API
13:46 Handling Unexpected Searches
14:53 Fade-In Showing Effect
15:38 Handling Normal Searches
17:23 Showing Weather Data
22:36 Thanks For Watching :)

🎵 Music
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Ikson - Anywhere [Official]
Music provided by Ikson®
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Vision pt. II (feat. She Is Jules)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Thanks for watching, I appreciate it 🙏
Made with 💗 by Hossein

#javascript #js #frontend #webdesign #coding

[JBurky]

One small piece of advice, and it's honestly just to help make the process a bit quicker in the future for yourself and viewers; setup your colors as variables in your CSS using :root. It's just a helpful trick to have around to both speed things up and hopefully avoid typos. Otherwise, a solid little code-along. I'm always interested to see what other people are doing on the internet and this is one of my favorite weather apps I have seen someone do.

[benhumble]

Bro your designing is better than apple😂❣️💪
I really admire u!

[masumheart]

I am waiting for your next videos.. That is extraordinary.. mind blowing..

[GamingWithParamYT]

I'm beginner and currently learning Java script
After see this video - i make decision in my mind this is my first small project after learning decent Java script and html css

[aki]

Great project as always! Bro what do you think about full web application developing video using react? I think it would be really cool, ik it doesn't really fit in your channel content but anyways

[embraceterror]

Thank you bro that's clean, also what extensions are you using ??

[rajeshkrchaudhary]

bro my api is not working still showing 401 unauthorized

[Iceice]

This is impressive my dude. By the way is it uses internet to collect the weather data?

[ssk]

just one correction: api sometimes returns type as fog, which is not handled here in images so it shows blank...

[webdesigner]

It's great to see bigger successes 😊

[gurdeepsinghsathi]

Sir the search button is not responsive
What can be the be problem

[rockieso]

This is a great project! Thanks a lot bro.

[DeepanshuKhatana]

When you will do facecam and voice over videos 😅😅😅

[yours_positively]

We also need tutorial on mouse move parallax effects, some animation projects, banner images slide effects..

[DLS_T_M]

It would be great if you could facemash like Mark Zuckerberg

[baksonyanik]

What a nice weather in the world, and in Russia we have minus