A simple and interactive To-Do List application built with React. This app allows you to add, delete, and rearrange tasks to keep track of your daily activities.
- Add Tasks: Enter a task in the input field and click 'Add' to include it in your list.
- Delete Tasks: Remove a task from your list by clicking the 'Delete' button.
- Move Tasks Up/Down: Reorder tasks by moving them up or down the list using the respective buttons.
This is the main component of the application. It includes the following states and functions:
-
States
tasks
: An array of tasks.newTask
: A string for the new task input.
-
Functions
handleInputChange(event)
: UpdatesnewTask
state based on the input value.addTask()
: Adds a new task to thetasks
array if the input is not empty.deleteTask(index)
: Removes a task from thetasks
array based on its index.moveTaskUp(index)
: Moves a task one position up in thetasks
array.moveTaskDown(index)
: Moves a task one position down in thetasks
array.
- Input Field: Allows users to type in a new task.
- Add Button: Adds the typed task to the list.
- Task List: Displays tasks in an ordered list with options to delete or move each task up or down.