Weather App with JavaScript & API | ASMR Programming

In this ASMR Programming tutorial, build a Weather App using HTML, SCSS, and JavaScript. This project involves working with multiple APIs for location search, geocoding, and fetching weather data.

Understand how to handle promises with async/await functions and manage error handling with try/catch.

Design inspiration: https://dribbble.com/shots/18070219-Cuacane-Dashboard

*? Code:* https://dub.sh/nmnhpHZ
*? Subscribe:* https://www.youtube.com/@WebDevASMR/videos?sub_confirmation=1

*My Equipment:*
⌨️ Keyboard → https://dub.sh/T4lk9vy
?️ Monitor → https://dub.sh/2zFkULj
? Microphone → https://dub.sh/P3kajc3

*? More videos:*
Image Slideshow → https://youtu.be/nUMGu8cc03w
Todo List → https://youtu.be/AmL4qFjkWx0
Playlist → https://www.youtube.com/playlist?list=PLGRd5--RHu5cdtjHAXWTMpO1TDKSwfy4q

*About WebDevASMR:*
Web Dev Tutorials with an ASMR twist ?
Please support the channel by liking and subscribing! ?❤️

*Disclaimer:*
_Do not re-upload or edit our videos_
_All videos are for educational and entertainment purposes only._
_I am human, so videos might contain mistakes._
_Some links in the description may be affiliate links._
_Any company logo/reference does not imply endorsement or affiliation_

*Timestamps:*
00:00 Preview
00:21 Base HTML and Dependencies
01:32 Location Input HTML
02:51 Weather Grid HTML
05:25 Starting Live Sass Compiler
05:35 Base CSS Styles
06:46 Base Responsive CSS
07:49 Location Input CSS
09:10 JavaScript Global Constants
09:46 Location Input Event Listeners
10:13 debounce() JavaScript Function
11:32 Hide Location Results JavaScript
12:03 Show Location Results JavaScript
12:52 Location Search API
15:16 Debugging & Fixing Location Search Bug
15:54 displayNoLocationsFound() Function
16:58 Testing displayNoLocationsFound()
17:12 displayLocationResults() Function
19:15 Testing displayLocationResults()
19:28 Location Results CSS
21:32 Location Results Event Listeners
22:18 handleLocationClick() Function
23:21 Weather API
27:18 Testing Weather API
27:55 displayWeatherData() Function
29:34 formatDate() Function
31:16 displayWeatherData() Continued
32:43 getWeatherCondition() Function
33:35 Debugging & Fixing Weather Condition Bug
34:37 displayWeatherData() Continued
35:30 Testing Weather Data
35:42 Setting Weather Condition Image
36:24 Weather Grid CSS
39:13 Weather Cards CSS
40:56 Updating Responsive CSS
41:44 Hiding Weather Grid & Cards
42:14 Animating Weather Grid
43:02 Animating Weather Cards
44:07 Testing Animations
44:25 Final Review & Testing Condition Image

*Music:*
Song: Lullaby
Artist: Owl Nest
Music by: CreatorMix.com
Video: https://youtu.be/OeBPTXZdaoY

#WeatherApp #SCSS #JavaScript #HTML #ASMRProgramming #ASMRCoding #ASMRWebDev #APIs #AsyncAwait #TryCatch #Geocoding #LocationSearch #WebDevelopment