I Must Do - a Web TODO-application on React.js.
Basic features:
- viewing the task list;
- adding, editing and deleting tasks;
- view detailed information about a task.
Specific features:
- searching tasks by name;
- setting the task completion status (waiting, in progress, complete)
- dragging the border between the task list and the view & edit form
- counting the total number of tasks and each type of tasks separately
In the process of creating this application, I have learned the base of React.js in practice :
I also used the JavaScript Fetch API to get tasks data from a fake json server when the application is starting.
I used SASS (SCSS) for creating the styles of react-components as a scss-modules.
A particular difficulty for me was the dragging the border between the task list and the view & edit form.
I realized it with Resizer-element and events onDrugStart
and onDrug
function Resizer({ className, resizableElem }) {
let startPosition, tasksWidth
// creating an element for changing drag effect picture
const dragImg = document.createElement('canvas');
dragImg.classList.add('drag-img')
// get coordinates and width values at the start of resizing
const startResize = e => {
e.stopPropagation()
startPosition = e.clientX // X of resizer element
tasksWidth = resizableElem.current.offsetWidth // current width of Resizer element
e.dataTransfer.setDragImage(dragImg, 0, 0) // set drag image
e.target.style.cursor = 'col-resize'
}
// change width when border is moving
const resize = e => {
resizableElem.current.style.width = `${tasksWidth + e.clientX - startPosition}px`
}
return (
<div
className={ className }
draggable={ true }
onDragStart={ startResize }
onDrag={ resize }
/>
)
}
export default Resizer