Learn Alpine.js in practice #2: Alpine js project - TODO app | Alpine.js course
This is the 2nd video of the Alpine js course - Learn Alpine.js in practice. It's a step by step guide how to use Alpine js in your projects to add JavaScript driven functionality.
The final Alpine js project is a TODO app, it's small but it's a full CRUD Alpine js project.
Topics covered in the Alpine.js tutorial:
- What is Alpine x-model, x-bind, x-for directives, how to use Alpine.js getters.
==== Follow me ====
Telegram:
Twitter:
Facebook:
======================
Timecodes:
00:00 - beginning. Adding Bootstrap, and Alpine.js to the project
01:28 - adding basic Bootstrap layout and creating a form
03:48 - using of Alpine js x-model for data reactivity
05:39 - creating a Task in the Alpine js project
08:30 - adding keyup event listener to submit a form by pressing Enter
09:05 - adding a container to show tasks, and using of x-for directive
10:52 - styling tasks container with Bootstrap CSS styles
14:35 - completing tasks by clicking on checkboxes
15:43 - using of x-bind directive to add CSS class dynamically
17:59 - rearranging tasks to show uncompleted at the top of the list
21:39 - deleting tasks
The previous video:
Learn Alpine js in practice Alpine js project - get data from API:
Learn Alpine.js in practice Alpine js project - TODO app | Alpine.js course
