Code a Todo List App in HTML, SCSS and JavaScript – JavaScript Tutorial | ASMR Programming

In this ASMR Programming tutorial, build an intermediate-level To-do list application using HTML, SCSS, and JavaScript. Learn to handle form submissions, manage state with arrays and objects, and update the DOM.
This project takes a step further as we employ SCSS instead of CSS, leveraging a Visual Studio Code extension to compile our SCSS code into CSS. This efficient workflow helps create a practical, user-friendly to-do list app.

*💻 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:*
Countdown Timer → https://youtu.be/VgN8EPM18Vo
Master JavaScript Basics → https://www.youtube.com/watch?v=Lw9RKe3jqvQ
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:11 Index HTML & Dependencies
00:58 Todo Filters HTML
01:21 Todo Form HTML
02:01 Todo List HTML
02:13 Live Sass Compiler
02:24 Base CSS
02:49 Button & Main CSS
03:56 Todos Container CSS
04:51 Todo Filters CSS
05:19 Todo Form CSS
06:12 Fixing CSS Grid
06:44 JavaScript Elements & Global Variables
07:07 localStorage Functions
07:45 Add Todo JavaScript
09:25 Testing in localStorage
10:00 Load Todos JavaScript
12:12 Sort Todo’s JavaScript
13:33 Create Todo Element JavaScript
15:53 Convert Date JavaScript
16:33 Format Date JavaScript
17:33 Testing Loading Todo’s
17:45 Debugging & Fixing Load Todo’s Bug
17:59 Todo’s List CSS
20:21 Managing Todo State JavaScript
21:08 Toggle Todo State JavaScript
22:28 Testing Toggling Todo State
22:38 Delete Todo JavaScript
23:05 Fixing Delete Todo Bug
23:21 Debugging & Fixing loadTodos() Bug
23:45 Filter Todo’s Menu JavaScript
24:59 Filter Todo’s JavaScript
26:01 Filter Todays Todo’s JavaScript
26:46 Refactoring Functions to Support Filtering
28:17 Testing Today Filter
28:32 Finishing Filter Switch Statement
28:57 Filter Overdue Todo’s JavaScript
29:25 Filter Scheduled Todo’s JavaScript
29:43 Filter Todo’s by State JavaScript
30:13 Testing Filtering
30:37 Fixing State Filter Bug
30:48 Final Review

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

#ToDoListApp #LearnJavaScript #HTML #SCSS #CSS #JavaScript #ASMRProgramming #ASMRWebDev #NoTalking #SilentCoding #WebDevelopment #FormSubmissions #StateManagement #DOM #IntermediateProject