'To-do List' is an application built using the React.js library.
The application enables:
- downloading example tasks,
- adding new tasks to the list,
- marking tasks as completed,
- searching for tasks,
- displaying task details,
- removing tasks from the list,
- hiding completed tasks,
- marking all tasks as completed.
Utilize this application to efficiently manage your tasks and track progress in completing your duties!
User Instructions:
- Downloading example tasks:
- Select the "Download sample tasks" option to load a set of sample tasks into the list.
- Adding a task:
- Enter the task name in the text field.
- Press the "Dodaj zadanie" button or hit the Enter key to add the task to the list.
- Marking a task as completed:
- Click on the checkbox next to the task to mark it as completed.
- Searching for tasks:
- Enter the desired word or phrase in the search field.
- Tasks matching the search criteria will be automatically displayed on the list.
- Displaying task details:
- Click on the task in the list to view its details.
- Removing a task:
- Click the delete button (trash can icon) next to the task to remove it from the list.
- Hiding completed tasks:
- Use the "Ukryj ukończone" or "Pokaż ukończone" option to hide or reveal completed tasks on the list.
- Marking all tasks as completed:
- Utilize the "Ukończ wszystkie" option to mark all tasks as completed.
- JavaScript ES6+ Features
- React
- JSX
- CSS Grid
- CSS Flex
- Normalize.css
- Styled Components
- Media Queries
- Controlled Components
- Redux
- Redux Toolkit
- Redux Saga
- Redux Router
To run the program from the 'to-do-list-react' repository on your local computer, you can follow these steps:
- Downloading the source code:
Clone the repository from the GitHub page to your local computer using the command:
git clone https://github.com/mariuszmmm/to-do-list-react.git
- Dependency Installation:
Navigate to the project directory, then install all required dependencies using a package manager like npm:
cd to-do-list-react
npm install
- Launching the Application:
After installing the dependencies, you can run the application locally. Use the command:
npm start
This command will start the application in developer mode, opening it in a browser at http://localhost:3000.
The application is fully responsive and adapts to various devices.
Screenshots showcase the app's appearance on both phones and tablets, demonstrating how it responsively adjusts to screen size changes
- 320 x 568
- 600 x 960