diff --git a/js-core/classworks/classwork-22/app.js b/js-core/classworks/classwork-22/app.js
new file mode 100644
index 0000000..31a67d3
--- /dev/null
+++ b/js-core/classworks/classwork-22/app.js
@@ -0,0 +1,7 @@
+(function(){
+ const initialState = ['learn js', 'learn mvc', 'read book OOP'];
+ const model = new Model(initialState);
+ const view = new View(initialState);//запрос на сервер
+ const controller = new Controller(model, view)
+})()
+
diff --git a/js-core/classworks/classwork-22/controller.js b/js-core/classworks/classwork-22/controller.js
new file mode 100644
index 0000000..f2aea79
--- /dev/null
+++ b/js-core/classworks/classwork-22/controller.js
@@ -0,0 +1,34 @@
+function Controller(model, view){
+ this.model = model;
+ this.view = view;
+ this.init();
+}
+Controller.prototype.init = function(){
+ this.addHandlerForAddTask();
+}
+
+Controller.prototype.addHandlerForAddTask = function(){
+ /*1. получить значение из инпута
+ 2. получить кнопку, к которой нужно добвить событие вью
+ ! 2.5 создать обработчик, который будет добавлять значение в модель
+ 3. повесить событие на кнопку
+ 4. положить значение в модель
+ 5. вызвать рендер с новым вью
+ */
+ let button = this.view.elements.addButton;
+
+ button.addEventListener('click', this.addTask.bind(this));
+}
+
+Controller.prototype.addTask = function(){
+
+ let value = this.view.elements.input.value;
+ if(!value) {
+ return;
+ }
+ this.model.addTodoItem(value);
+ this.view.render(this.model.data);
+ this.view.elements.input.value = '';
+
+}
+
diff --git a/js-core/classworks/classwork-22/index.html b/js-core/classworks/classwork-22/index.html
new file mode 100644
index 0000000..a0e14b1
--- /dev/null
+++ b/js-core/classworks/classwork-22/index.html
@@ -0,0 +1,35 @@
+
+
+
+
+ TO DO
+
+
+
+
+
+ My todo list
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js-core/classworks/classwork-22/model.js b/js-core/classworks/classwork-22/model.js
new file mode 100644
index 0000000..fdd56a4
--- /dev/null
+++ b/js-core/classworks/classwork-22/model.js
@@ -0,0 +1,30 @@
+class Model {
+ constructor(initialState){
+ this.data = initialState;
+ }
+
+ addTodoItem (newItem) {
+ if (!newItem) {
+ return;
+ }
+
+ this.data.push(newItem);
+ }
+
+ removeItem(itemToRemove){
+ const itemInData = this.data.indexOf(itemToRemove);
+ if (itemInData === -1) {
+ return;
+ }
+ this.data.splice(itemInData, 1)
+ }
+
+ updateTodoItem(oldItem, newItem) {
+ let old = this.data.indexOf(oldItem);
+ if (old === -1) {
+ return;
+ }
+ this.data.splice(old, 1, newItem);
+ }
+
+}
\ No newline at end of file
diff --git a/js-core/classworks/classwork-22/view.js b/js-core/classworks/classwork-22/view.js
new file mode 100644
index 0000000..9d57d10
--- /dev/null
+++ b/js-core/classworks/classwork-22/view.js
@@ -0,0 +1,21 @@
+class View {
+ constructor(initialState){
+ this.data = initialState;
+ this.elements = {
+ addButton: document.querySelector('.controls__add'),
+ input: document.querySelector('.controls__input'),
+ listItems: document.querySelector('.list-items'),
+ }
+ this.render(initialState);
+ }
+
+ render(newData) {
+ let converted = newData.map((item) => {
+ return `${item}`;
+ }).join('');
+
+ this.elements.listItems.innerHTML = converted;//newData ->
+ }
+
+
+}
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/app.js b/js-core/homeworks/homework-22/app.js
new file mode 100644
index 0000000..245c9bb
--- /dev/null
+++ b/js-core/homeworks/homework-22/app.js
@@ -0,0 +1,40 @@
+/*Todo MVC - добавьте верстку любую. -> gh-pages
+
+@Super-Front-END => рекомендую взять отсюда http://todomvc.com/
+
+1. Переместите data в localStorage и инициализацию
+View сделайте из localStorage;
+
+// синхронизировать модель после изменения в модели
+
+2. Добавьте возможность удаления элемента следуя паттерну MVC
+
+3. Добавьте возможность редактирования элемента
+СЛЕДУЯ ПРИНЦИПУ MVC.*/
+
+/*(function init(){
+ const initialState = (window.localStorage.length) > 0 ? window.localStorage : {};
+
+ const model = new Model();
+ const view = new View(initialState);
+ const controller = new Controller(model, view)
+})()*/
+
+class App {
+ constructor() {
+ this.init();
+ }
+
+ init() {
+ const initialState =
+ window.localStorage.length > 0 ? window.localStorage : {};
+
+ const model = new Model();
+ const view = new View(initialState);
+ const controller = new Controller(model, view);
+ }
+}
+
+window.addEventListener("DOMContentLoaded", function() {
+ new App();
+});
diff --git a/js-core/homeworks/homework-22/controller.js b/js-core/homeworks/homework-22/controller.js
new file mode 100644
index 0000000..19dea0b
--- /dev/null
+++ b/js-core/homeworks/homework-22/controller.js
@@ -0,0 +1,91 @@
+function Controller(model, view) {
+ this.model = model;
+ this.view = view;
+ this.init();
+}
+Controller.prototype.init = function() {
+ this.addTaskHandler();
+ this.removeTaskHandler();
+ this.editTaskHandler();
+ this.markCompleteHandler();
+};
+
+Controller.prototype.addTaskHandler = function() {
+ /*1. получить значение из инпута
+ 2. получить кнопку, к которой нужно добвить событие вью
+ ! 2.5 создать обработчик, который будет добавлять значение в модель
+ 3. повесить событие на кнопку
+ 4. положить значение в модель
+ 5. вызвать рендер с новым вью
+ */
+ let addButton = this.view.elements.addButton;
+
+ addButton.addEventListener("click", this.addTask.bind(this));
+};
+
+Controller.prototype.addTask = function() {
+ let value = this.view.elements.input.value;
+ if (!value) {
+ return;
+ }
+
+ this.model.addItem(value);
+ this.view.render(
+ Object.values(window.localStorage),
+ Object.keys(window.localStorage)
+ );
+ this.view.elements.input.value = "";
+};
+
+Controller.prototype.removeTaskHandler = function() {
+ let parent = this.view.elements.ul;
+ parent.addEventListener("click", this.removeTask.bind(this));
+};
+
+Controller.prototype.removeTask = function(e) {
+ let target = e && e.target;
+ if (target.dataset.action) {
+ let shouldBeDeleted = target.parentNode.dataset.id;
+ console.log(shouldBeDeleted);
+ this.model.removeItem(shouldBeDeleted);
+ this.view.render(
+ Object.values(window.localStorage),
+ Object.keys(window.localStorage)
+ );
+ }
+};
+
+Controller.prototype.editTaskHandler = function() {
+ let parent = this.view.elements.ul;
+ parent.addEventListener("click", this.editTask.bind(this));
+};
+
+Controller.prototype.editTask = function(e) {
+ let target = e && e.target;
+ if (target.dataset.edit) {
+ let editedTask = prompt("Edit task, please", "");
+ let shouldBeEdited = target.parentNode.dataset.id;
+ if (editedTask === null) {
+ return;
+ }
+ this.model.updateItem(shouldBeEdited, editedTask);
+ this.view.render(
+ Object.values(window.localStorage),
+ Object.keys(window.localStorage)
+ );
+ }
+};
+
+Controller.prototype.markCompleteHandler = function() {
+ let parent = this.view.elements.ul;
+ parent.addEventListener("click", this.markComplete.bind(this));
+};
+
+Controller.prototype.markComplete = function(e) {
+ let target = e && e.target;
+ if (target.dataset.complete) {
+ let shouldBeMarked = target.parentNode.firstElementChild;
+
+ shouldBeMarked.classList.toggle("completed");
+ }
+};
diff --git a/js-core/homeworks/homework-22/index.html b/js-core/homeworks/homework-22/index.html
new file mode 100644
index 0000000..397ca3f
--- /dev/null
+++ b/js-core/homeworks/homework-22/index.html
@@ -0,0 +1,104 @@
+
+
+
+
+ TO DO
+
+
+
+
+
+
My todo list
+
+
+
+
+
+