Component – Todo List

A list of tasks.Download + DemoView DemoDownload ComponentHow To
The Todo List component is a list of tasks that can be ‘marked as done’ by the user.
Use the available custom properties to modify the style of the checkbox:
:root {
–todo-list-checkbo…


This content originally appeared on CodyHouse and was authored by CodyHouse

A list of tasks.Todo List

Download + Demo

How To

The Todo List component is a list of tasks that can be 'marked as done' by the user.

Use the available custom properties to modify the style of the checkbox:

:root {
  --todo-list-checkbox-size: 20px; /* checkbox size */
  --todo-list-checkbox-icon-size: 16px; /* checkbox icon size */
  --todo-list-checkbox-margin-right: var(--space-xxs); /* gap between custom input and content */
}

If you need to target the end of the 'marked as done' animation (e.g., to remove the marked task), use the transitionend event on the .todo__label element:

label.addEventListener('transitionend', function(event){
  // code to be executed at the end of the 'marked as done' animation 
});


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-07-05T12:35:10+00:00) Component – Todo List. Retrieved from https://www.scien.cx/2021/07/05/component-todo-list/

MLA
" » Component – Todo List." CodyHouse | Sciencx - Monday July 5, 2021, https://www.scien.cx/2021/07/05/component-todo-list/
HARVARD
CodyHouse | Sciencx Monday July 5, 2021 » Component – Todo List., viewed ,<https://www.scien.cx/2021/07/05/component-todo-list/>
VANCOUVER
CodyHouse | Sciencx - » Component – Todo List. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/07/05/component-todo-list/
CHICAGO
" » Component – Todo List." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/07/05/component-todo-list/
IEEE
" » Component – Todo List." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/07/05/component-todo-list/. [Accessed: ]
rf:citation
» Component – Todo List | CodyHouse | Sciencx | https://www.scien.cx/2021/07/05/component-todo-list/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts