A modern, responsive task management application built with React and Tailwind CSS. This application helps users organize their tasks with features like priority setting, searching, sorting, and local storage persistence.
- Adding the Task
- Tick marking the task
3.Search Task in Search bar
4.Sorting the task by prority
- Create, read, update, and delete tasks
- Mark tasks as complete/incomplete
- Set priority levels (High, Medium, Low)
- Search tasks by title
- Sort tasks by:
- Date added
- Priority
- Title
- Persistent storage using localStorage
- Responsive design with animations
- locally stord task
- Color-coded priority indicators
- Smooth transitions and hover effects
- Responsive layout for all screen sizes
- Interactive UI elements with visual feedback
- React 18
- Tailwind CSS
- Vite
- LocalStorage API
-
Clone the repository: git clone https://github.com/vivektivarii/Task-manager.git
-
Install dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and visit:
- Files are in src folder with main app.jsx which have resuable components in components folder
-
Adding Tasks
- Enter task title in the input field
- Select priority level from dropdown
- Click "Add Task" or press Enter
-
Managing Tasks
- Click checkbox to toggle completion
- Click delete button to remove task
- Tasks are automatically saved to localStorage
-
Searching and Sorting
- Use the search bar to filter tasks
- Use the sort dropdown to change task order