task-list's Introduction
task-list's People
task-list's Issues
Task List
- По умолчанию у пользователя нет задач.
- Первая/ новая задача создается по нажатию кнопки Add Task
- У задачи редактируемое название. Переход в режим редактирования названия осуществляется по двойному клику мыши или автоматически при создании таска.
- У каждой задачи может быть любое количество шагов.
- У каждого шага может быть одно из 3-х состояний Todo/In Progress/Done. Состояние изменяется по клику на статус. Todo меняется на In Progress, In Progress на Done, Done на In Progress
- Шаг может быть удален по нажатию на кнопку удаления.
- Редактирование названия шага по двойному клику
- У каждой задачи показывается общее количество шагов и количество завершенных
- Если у задачи все шаги завершены то таска считается завершенной, это сотояние должно быть отмечено цветом фона
- Данные должны сохранятся в Local Storage
Avoid long code lines
Старайся чтобы строки кода не были очень длинные желательно до 100 символов, особенно это касается шаблонов
Обновлять только измененный элемент
Разделить данные и представление. При изменении обновлять только измененный элемент,
JS round 1
- Не создавать для каждой задачи и шага свои методы. Например deleteTask, newStep, showStep и тд создаются каждый раз в функции showTask. В большой кодовой базе и при большом объеме данных будет утечка памяти
- Не создавать отдельный обработчик для каждого повторяющего элемента, использовать делегирование событий. Например вместо $task.find('.js-task__delete-task').on('click', deleteTask);
использовать $('body').on('click', '.js-task__delete-task', deleteTask). - Сохранять данные каждый раз при изменении, а не только на unload. Данные не сохранятся при внештатном закрытии страницы
- Везде использовать строгое сравнени ===
- Не использовать if/else без скобок. Если нужна короткая запись то можно так flag && doSomething() или flag ? doSomething1() : doSomething2();
- Не использовать contentEditable использовать input. contentEditable имеет другое предназначение
- Вместо if(state) {$el.addClass('a'); else {$el.removeClass('a')'} можно использовать $el.toggleClass('a', state)
- Сейчас PROGRESS_STEP, db, initTasks, newId, removeByID глобальные. Что бы этого избежать нужно использовать самовызывающуюся функцию IIFE
Разбить js на модули
Есть несколько вариантов
- Разбить код на несколько файлов, а потом склеить файлы в нужно порядке галпом
- Лучший использовать JS модули. Через gulp и browserify или webpack. Я рекомендую webpack
JavaScript
Написать логику приложения на JS использую ES2015+ и JQuery
Rewrite the updateTaskProgress method
Метод принимает один аргумен e. Но аргумент e может быть нативным event-ом, так и кастомным объектом со свойством action. Такая реализаци сложно читается и не ясно намерение метода. Рекомендую поменять сигнатуру на ($task, action). + Такая реализация поможет избавится от call. Call и apply очень мощное средство, но нужно использовать при крайней необходимости.
Вторая проблема метод делает больше чем надо. По названию метод только должен обновлять статус, но никак не удалять задачу. Старайся, что бы каждый метод выполнял только одну задачу.
action === 'delete-step' || action === 'add-step' || action === 'change-step-progress' можно заменить на
['delete-step', 'add-step', 'change-step-progress'].includes(action)
Функциональность по определению завершенности задачи лучше поместить в модель
Layout
Сверстать все компоненты без js
Цвета и шрифты можно использовать любые. Для иконок использовать http://fontawesome.io/
Использовать Sass
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.