🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Todo List

A list of tasks.

View Demo

Dependencies

All components are based on CodyFrame.

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 
});

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.