https://github.com/shahdinsalman23/todolist-reactjs
This Todo List app in React with Tailwind CSS allows users to add, view, and delete tasks, showcasing React's state management and rendering basics.
https://github.com/shahdinsalman23/todolist-reactjs
javascript nextjs14 talwindcss todolist
Last synced: about 1 year ago
JSON representation
This Todo List app in React with Tailwind CSS allows users to add, view, and delete tasks, showcasing React's state management and rendering basics.
- Host: GitHub
- URL: https://github.com/shahdinsalman23/todolist-reactjs
- Owner: shahdinsalman23
- Created: 2024-11-09T16:13:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-11T14:00:28.000Z (over 1 year ago)
- Last Synced: 2025-01-29T16:28:33.550Z (over 1 year ago)
- Topics: javascript, nextjs14, talwindcss, todolist
- Language: JavaScript
- Homepage: https://reactjs-todolist-shahdin.vercel.app/
- Size: 166 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ToDo List App
A simple, responsive ToDo List app built with React and Tailwind CSS. Users can add tasks with a title and description, view the list of tasks, and delete tasks as needed.
## Features
- **Add Tasks**: Input title and description to create a new task.
- **Delete Tasks**: Remove tasks from the list with a single click.
- **Responsive Design**: Adjusts to different screen sizes (100% width for smaller screens and 50% for larger screens).
- **Custom Styling**: Styled with Tailwind CSS for a modern and clean look.
## Installation
1. Clone the repository:
```bash
git clone https://github.com/username/repository-name.git
## Code Overview
The main component, `Page`, manages the task list and includes the following key functions:
- **submitHandler**: Adds a new task to the list by taking the title and description from the input fields.
- **deleteHandler**: Removes a task from the list based on the index.
- **Conditional Rendering**: Displays tasks if available; otherwise, shows a "No Task Available" message to indicate an empty list.
## Usage
- **Add Task**: Fill in the title and description fields, then click "Add Task" to add the task to the list.
- **Delete Task**: Click "Delete" next to any task to remove it from the list.
## Technologies Used
- **React**: Used for building the user interface and managing state.
- **Tailwind CSS**: Used for styling and implementing responsive design.