Мой TodoList :)
Tags: javascript, vanilajs, middleit
Published: 2022-01-17 11:55:38

Готовый продукт: [TodoList](https://ibrakhimzhanov.github.io/todo/)

## Планирование
Первоначальное планирование этого проекта было несколько простым из-за его низкой сложности.

Я начал с того, что поставил себя на место пользователей и, таким образом, смог написать следующие пользовательские истории :

1.	Как пользователь, я хочу иметь возможность создавать новый элемент списка дел
2.	Как пользователь, я хочу иметь возможность отмечать завершенные элементы.
3.	Как пользователь, я хочу иметь возможность удалять элементы, чтобы удалять нежелательные или ошибочные задачи.
4.	Как пользователь, я хочу видеть все элементы списка дел, которые я добавил, даже если я перезагружу страницу.
Теперь определимся с функциями 
Основываясь на ранее определенных пользовательских историях, я приступил к определению функций, которые будет реализовывать приложение To-Do:
       - Получение задач из сервера
       - Получение пользователей из сервера
       - Отрисовать задачи на странице
       - Добавить пользователей в выпадающий список
       - Логика добавления, удаления, изменения
       - Завершение дел
       - Обработка ошибок
       - Хранение дел на устройстве пользователя.

##Визуализация: создание блок-схемы
Записать все функции — это здорово, но я обнаружил, что обычно просмотр графического представления функций проливает больше света на то, как должно вести себя приложение. Вот почему я построил следующую блок-схему.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9no7zidtn2ixozzjraez.png)

## Постановка задач на канбан-доске в Notion

Я решил использовать фреймворк для решения определенных функций и начать работать над ними. В этом случае я решил использовать доску Канбан, немножко изменил его для себя, потому что проект довольно прост, и потому что у меня есть опыт управления проектами на доске этого типа. Я мог бы использовать Agile-фреймворк, но у меня нет с ним опыта.

Я использовал [Notion ](www.notion.so)для создания доски Kanban, но мог бы выбрать [Asana ](https://app.asana.com/-/login) или [Trello ](https://trello.com/en). Я выбрал Notion, потому что хотел научиться им пользоваться, а бесплатная версия показала несколько многообещающих функций.

Стоит отметить, что я также включил рабочий процесс проекта в доску Канбан, чтобы я мог отслеживать все необходимые действия для завершения проекта, от начального этапа планирования до окончательного развертывания.

Я начал с ввода всех задач, связанных с проектом.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toynsmg5bdjknr6p69cs.png)

Все задачи были помещены в колонку «Нужно сделать», что сделало их доступными для начала работы над ними.

Во время проекта канбан-доска была полезна для отслеживания того, что нужно сделать. Это снимок того, как это выглядело во время проекта:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/358gbmcsf2pr7btkm1wz.png)

**Дизайн**
Я не эксперт по дизайну, и мое основное внимание в этом проекте было сосредоточено на кодовой стороне приложения. При этом я сделал все возможное, чтобы дизайнеры дали мне, простой и понятный для пользователя макет.

## Основы кодирования: HTML, CSS и JavaScript

**Начальная точка: HTML** 
Как только у меня появилось четкое представление о том, что мне нужно сделать, я начал работать над HTML, определив семантические элементы, которые я собирался использовать, и классы, которые мне, скорее всего, понадобятся.

Тем кому интересно можете взглянуть на -> [github](https://github.com/Ibrakhimzhanov/todo)

**Преступаем работу с CSS** 

Поскольку у приложения были простое вид дизайна я потратил мало времени на работу с CSS. Но так между нами признаюсь, что мне CSS сложнее, чем JavaScript😊

Использование JavaScript, чтобы воплотить все в жизнь
Я решил разделить на некие категории свои функции, так будет проще ориентироваться в своем коде. 

1-	Асинхронные логики
2-	Привязка событии
3-	Логика для события
4-	Глобальные переменные
5-	Базовая логика 

Давайте познакомимся с некоторыми из них поверхностно, чтобы проявить свет:  

1	– Асинхронная логика
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsb2kc7d59ticwc61t3t.png)


5-	Базовая логика 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/db9p0e2qcvhw0bfe1bws.png)

**Тестирование приложения и просьба оставить отзыв** 

В процессе сборки я постоянно тестировал поведение приложения. Это привело к ряду изменений в коде HTML и CSS.
Я бы хотел вас попросить протестировать приложение, и предложить, если будут какие-то пожелания или улучшения работы приложения.

Я использовал Git, чтобы отслеживать изменения в проекте и иметь возможность публиковать его на GitHub, чтобы делиться им с другими.

В этот раз я использовал страницы [GitHub ](https://ibrakhimzhanov.github.io/todo/)для развертывания и публикации проекта из-за его простоты и образовательных целей, но я мог бы использовать бесплатный хостинги аналоги  или свой собственный хостинг .

## Проект закончен опыт получен)

Благодаря этому проекту я смог почувствовать, сколько работы требует приложение, подобное этому.

Я узнал о важности осмысленной семантической структуры HTML и о том, как хорошая структура HTML может облегчить нашу жизнь, когда мы начинаем работать с CSS и JavaScript на более поздних этапах проекта.

Я недооценил CSS 😅. Названия классов немного смешные и запутанные, так что в будущем попробую реализовать нотацию БЭМ и, возможно, SASS . 

Я обнаружил, что некоторое поведение, о котором первоначально 
думали, было в области JavaScript, может быть легко реализовано с помощью CSS, например анимация элементов.

> Как всегда, я открыт для любых ваших предложений