Animated To Do List // Beginner Vanilla JS, HTML & CSS
Learn how to build an awesome animated todo list with vanilla JS in this in-depth episode about HTML & CSS and see how to
✔️ build a sbumit micro interaction
✔️ read css variables with JS
✔️ build an unfolding menu
✔️ use CSS variables and calculations to keep things stable
✔️ embed SVGs in HTML
✔️ use CSS transitions
✔️ use CSS grid layout
✔️ reference external fonts in HTML
✔️ use local storage
⌨️ CODE ⌨️
Source code is available on my Ko-Fi page:
https://ko-fi.com/s/fbf4c8c547
https://ko-fi.com/s/da5d10166c
☕ SUPPORT MY WORK 🙏
https://ko-fi.com/crayoncode
https://www.buymeacoffee.com/crayoncode
🖇️ USEFUL LINKS 🖇️
🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔗 SVG Tutorial on MDN: https://developer.mozilla.org/en-US/d...
🔗 Google Fonts: https://fonts.google.com/
🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/d...
🔗 querySelector on MDN: https://developer.mozilla.org/de/docs...
🔗 addEventListener on MDN: https://developer.mozilla.org/en-US/d...
⚙️ USEFUL VSCODE EXTENSIONS ⚙️
Live server: https://marketplace.visualstudio.com/...
🔔 SUBSCRIBE & LIKE
/ crayoncode
👋 FOLLOW US
📸 INSTAGRAM: / crayon_code
⏱️ TIMESTAMPS ⏱️
00:00 Basic Markup & Header
03:57 List Items
05:50 Checkmark Animation
07:35 Strikeout Animation
09:12 Item Template & default items
12:20 Local storage integration
13:40 Navbar
15:18 Add button & panel
23:43 Item Appear Animation
25:29 Submit Animation
27:49 Important Button (Star)
31:50 Menu
41:38 Delete Button & Animation
🎨 ARTWORK 🎨
Icons from Iconly by Piqo Design
https://www.figma.com/community/file/...
🎼 MUSIC 🎼
Song: Hotham - Find
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported
Video Link: • Hotham - Find (Vlog No Copyright Music)
🏷️ HASHTAGS 🏷️
#html #css #js #tutorial