Advanced Weather App using CSS & JavaScript

Опубликовано: 30 Апрель 2026
на канале: CODE WITH HOSSEIN

17,556

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
Images: https://freepik.com/
Font: https://fonts.google.com/
Icons: https://fontawesome.com/

🔗 Source code
https://github.com/hosseinnabi-ir/Adv...

🔔 Subscribe Now!
   / @codewithhossein

⏱ 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®
Listen:    • #66 Anywhere (Official)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: BEAUZ & JVNA - Crazy [NCS Release]
Music provided by NoCopyrightSounds.
Watch:    • BEAUZ & JVNA - Crazy | Electronic Pop | NC...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Jordan Schor & Harley Bird - Home
Music provided by NoCopyrightSounds.
Watch:    • Jordan Schor & Harley Bird - Home  | Futur...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Song: Levianth & Axol - Remember (feat. The Tech Thieves)
Music provided by NoCopyrightSounds
Free Download/Stream: http://ncs.io/remember
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Vision pt. II (feat. She Is Jules)
Watch:    • Lost Sky - Vision pt. II (feat. She Is Jul...
Free Download / Stream: https://ncs.io/Vision2
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Track: Lost Sky - Where We Started (feat. Jex)
Music provided by NoCopyrightSounds.
Watch:    • Lost Sky - Where We Started (feat. Jex) | ...
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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

#javascript #js #frontend #webdesign #coding