A To-Do List application built with React.js and styled using Tailwind CSS. This app allows users to manage their tasks with features like adding, updating, and deleting tasks. Tasks can be marked as completed or pending, and the user interface is responsive and visually appealing thanks to Tailwind CSS.
- Add new tasks
- Mark tasks as completed or pending
- Delete tasks
- Responsive design
- Styled with Tailwind CSS
- React.js: A JavaScript library for building user interfaces
- Tailwind CSS: A utility-first CSS framework for creating custom designs
- Local Storage: For persisting tasks across page reloads
Make sure you have the following installed:
-
Clone the repository:
git clone https://github.com/moinmn/todo-using-reactjs.git cd todo-using-reactjs -
Install dependencies:
npm install
-
Start the development server:
npm start
Open your browser and navigate to
http://localhost:3000to view the app.
- Enter a task description in the input field and click the "Add Task" button or press
Enter.
- Click the checkbox next to the task to mark it as completed. The task will be visually distinguished with a strikethrough and gray color.
- Click the trash icon next to the task to remove it from the list.
Tailwind CSS is set up using the default configuration. You can customize Tailwind's configuration in tailwind.config.js to fit your needs.
-
Edit
tailwind.config.jsto customize colors, spacing, and other design tokens. -
Modify
src/index.cssto include Tailwind’s utility classes and any custom styles.
Feel free to fork the repository and submit pull requests for improvements. Ensure that your code adheres to the existing style and includes relevant tests.