• • > 🔶 Todolist app 5 (v2) : Code | Demo
• • > [новые фичи: 1. Списки задач. 2. Сортировки по полям. 3. Поиск/фильтрация. 4. Вид списков: карточки. 5. Markdown notes. 6. Порядок списков через drag & drop?]
•
• • > 🔶 Todolist app 6 (original) : Code | Demo
•
•
• Особенности: Хорошо объясняет/комментирует; Отлично для начального туториала; Saas • Интересные фичи:
•
• Особенности: Хорошо объясняет/комментирует; Отлично для начального туториала; • Интересные фичи: localStorage
• • > 🔶 Todolist app 5 (original) : Code | Demo
•
•
• Особенности: Vue-cli, npm, Vuex, router, materialize, localStorage.
• Интересные фичи: 1. Дата/срок задачи. 2. Статус (active, completed, outdated) с фильтрацией. 3. Теги. 4. Вывод части description. 5. Редактирование задачи на отдельной странице.
• • > 🔶 Todolist app 4 (original) : Code | Demo
•
•
• Особенности: vue-cli, export/import components (.vue), vuex (state, mutations, actions, modules), bootstrap, babel
• Интересные фичи: 1. Редактирование заголовка задачи на месте через input (v-if, v-else h3/input)
• • > 🔶 Todolist app 3 (v2) : Code | Demo
• • > [новые фичи: 1. Завершённые задачи передвигаются вниз списка. 2. Счётчики задач для списков. 3. Редактирование названия и описания уже созданных задач (через promt и/или input/textarea). 4. Фильтр/поиск по задачам. 5. Добавление/удаление списков. 6. Смена порядка списков и задач.]
•
• • > 🔶 Todolist app 3 (original) : Code | Demo
•
•
• Особенности: Vue, Vue.component. • Интересные фичи: 1. Поле описания/description для задачи.
• • > 🔶 Todolist app 2 (v2) : Code | Mindmap Code | Demo
• • > [новые фичи: 1. Фон выполненной задачи помечается серым. 2. Счётчик всех и выполненных задач. 3. Подтверждение удаления. 4. Удаление всех выполненных/отмеченных задач.]
•
• • > 🔶 Todolist app 2 (original) : Code | Demo
•
•
• Особенности: Vue 1.0.12 • Интересные фичи: 1. Кнопка "Clear List". 2. Кнопка "удаление задачи (Х)" появляется только при наведении мышью на строку задачи. 3. Общий чекбокс, отмечающий все задачи
• • > 🔶 Todolist app 1 (v2) : Code | Demo
• • > [новые фичи: 1. Корзина (удаление, восстановление). 2. Дата/время добавления задач.]
•
• • > 🔶 Todolist app 1 (original) : Code | Demo
•
•
• Особенности: Vue 3; Отлично для начального туториала
- Todolist app N - оригинальный код из пройденного туториала
- Todolist app N (v2) - доработка кода (см. чеклист нач. кодера) + пара новых фич + фича от заказчика + Code Review
Vue
•
• Особенности: Vue 3 + Composition API; хорошее объяснение/комментарии • Интересные фичи:
•
• Особенности: стиль Wunderlist, .vue components • Интересные фичи: 1. Favorite status
• Github
•
• Особенности: Build and start a new vue project (npm); Bootstrap; Start the server; • Интересные фичи: local storage; hide completed;
•
• Особенности: Демонстрация работы To-Do List App и ссылка на код • Интересные фичи: Возможность создавать несколько списков, оформленных в виде карточек.
• Код
•
• Особенности: 🔥🔥🔥 • Интересные фичи: Несколько списков задач; мобильный интерфейс; процент завершённых задач в списке
•
• Особенности: 🔥🔥🔥🔥🔥 Vuetify (Material Framework) • Интересные фичи:
•
• Особенности: Vue, Vuetify, VueFire, and Firebase • Интересные фичи:
•
•
• Особенности: Vue, React, Svelte, Angular • Интересные фичи:
•
• Особенности: Vue.js, Full Stack, REST API, AdonisJs, register/login/auth, • Интересные фичи:
Angular
Angular 5 To Do List App Within 30 minutes
Angular Task List app using Firebase : Angular 2 and above
Angular To do list - explained
Angular Todo App - Basics - Part 1
Angular Todo App за 10 минут. Работаю с готовым backend на NestJs. Практика Ajax запросов
AngularJS : Create a ToDo App
Aprenda Angular 8 - Criando um TO-DO List - #12
Build Your First ANGULAR Web app ~ Beginner Angular Todo app
Creating a simple Todo List App in Angular
Full Tutorial Coding 4 Angular Apps in 8 Minutes! Todo App, Calculator, Quiz, and Weather
How to create todo List Using HTML , CSS & Angular(2020) | Product Todo-List using angular
To-do List with AngularJS and Local Storage
Todo App Tutorial with Angular 8 - In Hindi
Todo List App (Angular Beginner)
Todo List Tutorial - Angular 4 and Redux
React
14. Building a Todo List App in React - YouTube
5 Minute Coding Challenge | To Do List App | ReactJS
Build A Todo App With REACT | React Project For Beginners (FULL).
Build To Do App with React JS + Hooks + Redux
Build a Todo App with React Js | Using React Hooks
Building a React Todo App w/ Authentication - Redux & Firebase (playlist: 9 vids, ~10 hours)
Building a Todo List with React Hooks useState
Building a todolist with React (playlist)
Code your first React app | Beginner React app | To Do List
CodeLibrary #1 - Пишем приложение на React, Redux и Firebase
Coding a Todo List in React.js - Part 15
Complete React Tutorial (& Redux) #23 - Todo App (part 1)
Creating a Todo List App in React using Typescript (Part 1)
How to Build a TODO app with React + Firebase (LIVE)
How to make an app - React Native Tutorial - Create a Todo App in 25 minutes
React & Redux #22 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part I)
React & Redux #23 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part II)
React & Redux #24 Список дел на Реакт и Редакс (ToDo Application: React & Redux. Part III)
React - Simple To Do List
React Project using Material UI Free Code: Create ToDo List App in React in Hindi in 2020 #45
React Todo List App Tutorial - Beginner React JS Project Using Hooks
React Todo на React, Redux и Firebase #1
React Todo на React, Redux и Firebase #2
React Todo на React, Redux и Firebase #3
React Todo на React, Redux и Firebase #4
React Todo на React, Redux и Firebase #5
React for Beginners - Build a Todo-List App
To Do App in React (Adding, Editing and Deleting items) | Deploy in Github for freeTutorial
Todo List React App | Part 1
Todo List React App | Part 2
Todo List with React, Node, and Express - Part 1
ПИШЕМ ПРОСТОЙ TODO LIST НА REACT ЗА 10 МИНУТ
Пишем TodoList на React
Пишем свой To-Do list с нуля на REACT JS
Пишем список задач(todo app) на React
Разработка списка задача на ReactJS (ToDo) #1
Vanila JS
Awesome Todo List Using HTML & CSS & JavaScript (2020)
Beginner Vanilla Javascript Project Tutorial
Building A Vanilla JavaScript Todo App From Start To Finish | EP 1: Introduction & Project Setup
Building A Vanilla JavaScript Todo App From Start To Finish | EP 4: Adding Todos
Building a TODO list with Vanilla JS - LIVE class recording at Coding Bootcamp
Create a to do list app using JavaScript
Creating a better todo app - the HTML and CSS - YouTube
How To Code :: Javascript :: Todo App
How to Code A Better To-Do List - Tutorial
How to Make a To-Do List using HTML CSS JavaScript (2020)
How to create a todo list in javascript | Hindi | Javascript Mini Project
JavaScript BookList App | No Frameworks
JavaScript Tutorial TO-DO List App
Learn to code a to-do list app in JavaScript - Part 1
Let's make a TO DO LIST using Javascript
Making a ToDo List app with Local Storage!
Minimal To-do List using HTML CSS & Javascript | CodingNepal
Reactive Todo App in Vanilla JS | Intermediate Tutorial
To Do List App in JavaScript beginners
To Do List app in JavaScript for beginners
To Do List | Javascript Beginner Project Tutorial
To Do list using css and javascript
To-do List App - JavaScript Tutorial for Beginners
ToDo List - Vanilla JavaScript
ToDo List на JavaScript
ToDo Today Web App - Reviewing and Making Tutorial - Vanilla JavaScript Project - YouTube
Todo App With Vanilla JS | Separate list for every user | Using Firebase Auth & Firebase Firestore
Todo List application in JavaScript 2020 || CRUD operation in Javascript || Uses of local storage
Todo List App in JavaScript | JavaScript Project | How to create a todo list in Vanilla JavaScript.
Todo List App using HTML CSS & JavaScript | Todo List in JavaScript
Todo List Using HTML & CSS & JavaScript
Todolist with Vanilla JavaScript & Local Storage - Speed Coding - YouTube
Vanilla JS todo App
Vanilla JavaScript Todo App - YouTube (playlist)
Интенсив JS: Todo приложение 1-й день
Интенсив JS: Todo приложение 2-й день
Интенсив JS: Todo приложение 3-й день
Как просто создать to do list на JavaScript [GeekBrains]
Пишем на javascript простой todo list
Пишем приложение на голом JS с авторизацией без фреймворков
Практика JavaScript — пишем туду лист на JavaScript | Уроки для новичков
Создаём свой To Do List на чистом JavaScript
Создание приложения на JavaScript, Часть 1
Список дел | Todo list | vanilla javascript
Учим JavaScript 33. Создаем ToDo список дел
Практика JavaScript. Задача #2. ToDo List.
Уроки JavaScript Практика #17 To Do приложение на js
Other Frameworks
Svelte v3 - Basics - Todo App
Node.JS
Youtube search: node js
Blazor (.NET Core)
Youtube search: todo Blazor
Drag & Drop
Drag & Drop With Vanilla JS
Drag and Drop Todo List Using Vuejs & Firebase Part 1 (playlist)
Easy Drag n Drop with JavaScript - how to code tutorial
Todo App + Drag&Drop in Vanilla JS
Notes app
Creating the UI (Angular) - [2] Build a Notes App w/ Angular
Create notes app in plain Javascript
Youtube search: notes javascript
Youtube search: notes js
Youtube search: notes react
Youtube search: notes angular
Youtube search: notes vue
OutLiners
SuperCool Outliner
Outliner Alpha
Android / Mobile
Android. Пишем приложение - список дел, с использованием архитектурных компонентов от Google.
How To Code Your First Mobile App Using Vue Native
ASP.NET
ASP.NET Core 3 CRUD Project - TO DO list
Search projects
codepen.io : todo
codepen.io : notes
codepen.io : mindmap
github.com : todo
github.com : note taking
github.com : outliner
github.com : mindmap
sourceforge.net : notes
sourceforge.net : outliner
sourceforge.net : todo
sourceforge.net : mindmap
code-projects.org : js
GitHub projects vuetify-todo-pwa
Build a todo list with VueJS in 15 minutes
Code your first VUE JS App | Coding for Beginners | To Do List
Create A Todo List Using HTML, CSS And Vue js
Creating To-Do List Application with Using Materialize CSS and Vue.js
~~•
Vue.js Todo Task List App Tutorial
(Arabic) Vue.js Tutorials - How To Create To-Do List
Уроки Vue js практика - Task list
•
•
•
• • > [14/02] 🔶 Todolist app x (origin) : Code | Demo
•
•
• Особенности: • Интересные фичи:
- добавление задачи в список (input + button|key.enter)
- отметка/check выполненной задачи
- список выполненных задач
- удаление задачи (в корзину и окончательное)
- Удаление с подтверждением (через alert)
- подтверждение удаления задачи (вариант через модальное окно JS)
- удаление всех выполненных/отмеченных задач
- список удалённых задач (корзина) + при удалении задачи переносить её в этот список + возможность восстановить задачу
- счётчики текущих, выполненных и удалённых задач
- счётчик задач в конкретном списке или статусе (универсально)
- дата и время создания добавленных задач
- Редактирование заголовка и/или описания уже созданных задач (через promt или input/textarea)
- Многострочное описание/desc задачи
- Фильтр/поиск по задачам
- Завершённые задачи передвигаются вниз списка
- Счётчики задач для списков
- Редактирование названия и описания уже созданных задач (через promt и/или input/textarea)
- Фильтр/поиск по задачам
- Добавление/удаление списков
- Смена порядка списков и задач
- Дата/срок задачи
- Статус (активна/завершена, просрочена)
- Теги (через плагин materialize)
- Сохранение в локальное хранилище (local storage)
- Вид: иерархический список
- Вид: таблица
- Вид: карточки
- Вид: mindmap
- Форматирование Markdown (список и заметки к задачам)
- Undo / Redo
- Теги
- Сохранение в хранилище (local storage, indexdb)
- Поиск (продвинутый)
- drag n drop изменение порядка в списке
- drag n drop между двумя списками
- Удаление нескольких выделенных задач с подтверждением (через модальное окно)
- Возможность поставить дату исполнения, красить красным таски, которые близки к сроку, отмечать знаком просроченные
- Возможность добавить таймер с обратными отсчётом
- Сворачивание/разворачивание большого notes/desc в списке задач
- Отступы (гориз. и верт.) для хорошей читаемости кода
- избегать слишком большой вложенности ветвлений, циклов (if, for, while, switch)
- вместо var - const (константы) и let (изменяемые) (JS)
- Осмысленные названия переменных и функций
- Функции со сложной логикой, по возможности делить на более простые функции с понятными названиями, отражающими выполняемые действия/логику.
- для работы с итерируемыми объектами применять forEach, every, map, filter, reduce
- не заниматься преждевременной оптимизацией
- не погружаться в детали/украшательства на ранних стадиях разработки. Сначала - работающая программа, затем - полировка.
- стили именования (переменных, методов и т.д.): camelCase - переменные и методы; kebab-case - vue @events/события; PascalCase - типы или классы;