Как сделать туду лист
Обновлено: 05.07.2024
"To do list" или Список TO DO — это простой список дел или список задач. Запиши в него все свои важные дела, чтобы не забыть.
Пример
В каких ситуациях используется?
Для чего инструмент?
Что в результате?
Список дел позволит вам эффективно организовать свое рабочее время. В него можно записать все: от списка покупок до важных деловых встреч.
Пример
Обучение партнеров из Костромы
Подготовка бланков. Тестирование
Подведение итогов тестирования
Изменение программы обучения управляющего кафе
Изменение стажировочного листа
Внедрение системы учета в iiko
Закрытие ЗП ноября
Обучение руководителя КЦ
Практическое задание
Сделайте Список TO DO, состоящий из примерно 20 задач на удобный или типичный для вас период планирования: неделю, месяц.
React Hooks — это функции, которые позволяют определять категорию состояния и жизненный цикл (state, lifecycle) React-компонента без использования ES6-классов.
Некоторые преимущества React Hooks:
Для демонстрации возможностей React Hooks построим приложение, в котором можно добавлять и удалять задачи (ToDo-приложение).
Так будет выглядеть готовое приложение
Это приложение будет выполнять следующие функции:
- отображать ваши текущие задачи;
- позволять добавлять новые задачи через поле ввода;
- удалять задачи.
Установка
Весь код доступен на GitHub и CodeSandbox.
Ветка master — уже готовый проект. Если вы хотите создавать приложение поэтапно, следуя статье, используйте ветку start .
Для запуска проекта используйте следующую команду:
Приложение должно запуститься на localhost:3000 . Вы увидите пустой начальный интерфейс с названием приложения. Весь дизайн уже настроен при помощи библиотеки material-ui, так что можно сразу добавлять функциональность.
Todo-форма
Создайте новый файл src/TodoForm.js и добавьте в него следующий код:
Как можно понять из названия формы, здесь главная задача — добавить что-либо в состояние React-компонента. Вот и первый hook.
useState
Теперь давайте рассмотрим такой код:
Это функция, которая принимает начальное состояние React-компонента и возвращает массив. Вы можете использовать console.log , чтобы посмотреть, что именно она возвращает.
Под первым индексом массива находится текущее значение состояния компонента, а во второй ячейке находится обновляющая функция. Они названы value и setValue , следуя ES6 destructuring assignment.
useState с формами
Ваша форма должна отслеживать значение, вводимое пользователем и вызывать метод saveTodo() при отправке формы. useState поможет вам с этим.
Узнать, как создать "список дел" с помощью CSS и JavaScript.
Список дел
Используйте CSS и JavaScript, чтобы создать "список дел" для организации и приоритизации ваших задач.
Создайте список дел
Шаг 1) Добавить HTML:
Пример
Мой список дел
- Попасть в спортзал
- Оплатить счета
- Познакомься с Джорджем
- Купить яйца
- Прочитать книгу
- Организовать офис
Шаг 2) Добавить CSS:
Стиль заголовка и списка:
Пример
/* Включение отступа и границы в общую ширину и высоту элемента */
* box-sizing: border-box;
>
/* Удалите поля и отступы из списка */
ul margin: 0;
padding: 0;
>
/* сделайте элементы списка невыбираемыми */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
>
/* Стиль кнопки "Закрыть" */
.close position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
>
/* Очистить поплавки после заголовка */
.header:after content: "";
display: table;
clear: both;
>
/* Стиль ввода */
input margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
font-size: 16px;
>
Сейчас существует огромное количество самых разных менеджеров задач на любой вкус. Однако у них есть недостаток: их работоспособность от вас не зависит. И в случае ликвидации любимого сервиса придётся заново осваивать другую программу. Если вас не устраивает такая перспектива, попробуйте ToDo.txt.
Что такое ToDo.txt
Это не программа и не веб‑приложение. Это система управления задачами, для которой достаточно только простого текстового файла в формате TXT. Придумала её блогер и разработчик Джина Трипани.
Суть этой системы в следующем: вы пишете свои дела в файлик TXT, строчка за строчкой, и отмечаете завершённые символом x. При необходимости можно добавлять теги и контекст, чтобы группировать задачи. Вот, в общем‑то, и всё. Идеальный инструмент для тайм‑менеджмента минималистов.
В чём плюсы ToDo.txt
У этого способа записи дел есть ряд преимуществ — вот основные из них:
Как составлять задачи в ToDo.txt
Написать статью и проверить ссылки.
Сходить в спортзал.
ToDo.txt лучше всего сохранить в Dropbox, Google Drive или любом другом облаке на ваш выбор: так список дел всегда будет под рукой.
Определение приоритетов
В ToDo.txt можно назначать задачам приоритеты. Таким образом вы будете видеть, какие дела особенно важны, а какие нет, не вчитываясь в содержимое пунктов. Чтобы назначить приоритет, поставьте перед пунктом букву A, B, С и так далее, заключив её в скобки. Вот как это будет выглядеть:
(A) Закончить важный проект.
(B) Накормить кота.
(C) Прибраться на кухне.
Большинство клиентов ToDo.txt могут сортировать ваши задачи по приоритетам, поэтому не забывайте проставлять их. Это, в принципе, необязательно, но полезно.
Группировка задач по проектам
Дела стоит группировать по проектам или темам, к которым они относятся: это позволит быстрее в них разбираться. Чтобы отнести задачу к тому или иному проекту, поставьте после неё знак + и сразу же, без пробела, укажите какое‑нибудь слово. Например так:
Закончить статью +Работа.
Заказать фитнес‑трекер +Личное.
Переустановить macOS +Личное.
Прибраться наконец на кухне +Личное +Уборка.
Как стало понятно из последнего пункта, одна и та же задача может относится к двум и более проектам.
Добавление тегов
Иногда одних только проектов недостаточно, чтобы рассортировать ваши задачи. В таком случае используйте теги. Они добавляются символом @. Выглядит это так:
Закончить статью @Лайфхакер.
Переустановить macOS @Mac @Личное.
Выбрать подставку для Mac @Mac @Покупки.
Прибраться на кухне @Уборка.
Их тоже можно добавлять сколько угодно.
Завершение задач
x Закончить статью.
x Заказать фитнес‑трекер.
x Переустановить macOS.
x Прибраться на кухне.
Расстановка сроков
Если у дела есть дедлайн, его можно добавить, написав слово due и дату в формате год — месяц — число (due: ГГГГ‑ММ‑ДД).
Закончить статью due: 2019‑11‑20.
Заказать фитнес‑трекер due: 2019‑12‑02.
Переустановить macOS due: 2019‑11‑25.
Прибраться на кухне due: 2019‑11‑25.
Форматирование списка задач
Само собой, все указанные элементы можно использовать вместе, чтобы одновременно назначать задачам приоритеты, проекты, теги и отмечать законченные дела. В итоге ваш ToDo.txt будет выглядеть примерно так:
x Закончить важный проект +Работа @Лайфхакер due: 2019‑11‑20.
x Покормить кота +Личное @Кот.
Заказать фитнес‑трекер +Покупки @Гаджеты.
Прибраться на кухне +Личное @Уборка @Кухня.
Какие приложения ToDo.txt можно использовать
2. TodoTxtMac
TodoTxtMac позволяет вести списки дел в macOS. Как и полагается программам для Mac, очень удобен и красив. Обладает продвинутой настраиваемой системой фильтров, так что вы не запутаетесь в вашем таск‑листе, даже если там десятки пунктов.
3. DayTasks
Приложение для Ubuntu и основанных на ней систем. Минималистичное и простенькое. Похвастаться настраиваемыми фильтрами, как предыдущие два кандидата, не может, но всё равно достаточно наглядно.
4. Todo.TXT Plus
Todo.TXT Plus — расширение для текстового редактора Atom. С его помощью можно добавлять пункты в список дел не отрываясь от работы с текстом: просто переключаетесь между вкладками с рабочими файлами и todo.txt в одном окне.
5. Simpletask
Simpletask — клиент для Android. Умеет работать с Dropbox и Nextcloud. Помимо приложения, предоставляет также виджет для домашнего экрана. Выделяет приоритеты задач цветами и сортирует дела по датам, контексту или категориям.
Читайте также: