From 594dec459c974831086815fe5cdbc428de6401fe Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Tue, 14 Aug 2018 21:29:17 +0300 Subject: [PATCH 1/2] classwork 22 MVC --- js-core/classworks/classwork-21/app.js | 7 ++++ js-core/classworks/classwork-21/controller.js | 34 ++++++++++++++++++ js-core/classworks/classwork-21/index.html | 35 +++++++++++++++++++ js-core/classworks/classwork-21/model.js | 30 ++++++++++++++++ js-core/classworks/classwork-21/view.js | 21 +++++++++++ 5 files changed, 127 insertions(+) create mode 100644 js-core/classworks/classwork-21/app.js create mode 100644 js-core/classworks/classwork-21/controller.js create mode 100644 js-core/classworks/classwork-21/index.html create mode 100644 js-core/classworks/classwork-21/model.js create mode 100644 js-core/classworks/classwork-21/view.js diff --git a/js-core/classworks/classwork-21/app.js b/js-core/classworks/classwork-21/app.js new file mode 100644 index 0000000..31a67d3 --- /dev/null +++ b/js-core/classworks/classwork-21/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-21/controller.js b/js-core/classworks/classwork-21/controller.js new file mode 100644 index 0000000..f2aea79 --- /dev/null +++ b/js-core/classworks/classwork-21/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-21/index.html b/js-core/classworks/classwork-21/index.html new file mode 100644 index 0000000..a0e14b1 --- /dev/null +++ b/js-core/classworks/classwork-21/index.html @@ -0,0 +1,35 @@ + + + + + TO DO + + + + +
+

My todo list

+ +
+ + +
+ + + + + + + + \ No newline at end of file diff --git a/js-core/classworks/classwork-21/model.js b/js-core/classworks/classwork-21/model.js new file mode 100644 index 0000000..fdd56a4 --- /dev/null +++ b/js-core/classworks/classwork-21/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-21/view.js b/js-core/classworks/classwork-21/view.js new file mode 100644 index 0000000..9d57d10 --- /dev/null +++ b/js-core/classworks/classwork-21/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 From a5530f7805eee4204c299b1cbd5307fe23496c29 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sat, 18 Aug 2018 16:43:37 +0300 Subject: [PATCH 2/2] to do is done --- .../{classwork-21 => classwork-22}/app.js | 0 .../controller.js | 0 .../{classwork-21 => classwork-22}/index.html | 0 .../{classwork-21 => classwork-22}/model.js | 0 .../{classwork-21 => classwork-22}/view.js | 0 js-core/homeworks/homework-22/app.js | 40 +++++++ js-core/homeworks/homework-22/controller.js | 91 +++++++++++++++ js-core/homeworks/homework-22/index.html | 104 ++++++++++++++++++ js-core/homeworks/homework-22/model.js | 27 +++++ js-core/homeworks/homework-22/view.js | 32 ++++++ 10 files changed, 294 insertions(+) rename js-core/classworks/{classwork-21 => classwork-22}/app.js (100%) rename js-core/classworks/{classwork-21 => classwork-22}/controller.js (100%) rename js-core/classworks/{classwork-21 => classwork-22}/index.html (100%) rename js-core/classworks/{classwork-21 => classwork-22}/model.js (100%) rename js-core/classworks/{classwork-21 => classwork-22}/view.js (100%) create mode 100644 js-core/homeworks/homework-22/app.js create mode 100644 js-core/homeworks/homework-22/controller.js create mode 100644 js-core/homeworks/homework-22/index.html create mode 100644 js-core/homeworks/homework-22/model.js create mode 100644 js-core/homeworks/homework-22/view.js diff --git a/js-core/classworks/classwork-21/app.js b/js-core/classworks/classwork-22/app.js similarity index 100% rename from js-core/classworks/classwork-21/app.js rename to js-core/classworks/classwork-22/app.js diff --git a/js-core/classworks/classwork-21/controller.js b/js-core/classworks/classwork-22/controller.js similarity index 100% rename from js-core/classworks/classwork-21/controller.js rename to js-core/classworks/classwork-22/controller.js diff --git a/js-core/classworks/classwork-21/index.html b/js-core/classworks/classwork-22/index.html similarity index 100% rename from js-core/classworks/classwork-21/index.html rename to js-core/classworks/classwork-22/index.html diff --git a/js-core/classworks/classwork-21/model.js b/js-core/classworks/classwork-22/model.js similarity index 100% rename from js-core/classworks/classwork-21/model.js rename to js-core/classworks/classwork-22/model.js diff --git a/js-core/classworks/classwork-21/view.js b/js-core/classworks/classwork-22/view.js similarity index 100% rename from js-core/classworks/classwork-21/view.js rename to js-core/classworks/classwork-22/view.js 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

    +
      +
      + + +
      +
      + + + + + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-22/model.js b/js-core/homeworks/homework-22/model.js new file mode 100644 index 0000000..5368891 --- /dev/null +++ b/js-core/homeworks/homework-22/model.js @@ -0,0 +1,27 @@ +class Model { + constructor() {} + + addItem(newItem) { + if (!newItem) { + return; + } + let id = + localStorage.length + "__" + Math.round(Math.random() * 1000000); + + window.localStorage.setItem(id, newItem); + } + + removeItem(itemToRemove) { + if (!itemToRemove) { + return; + } + window.localStorage.removeItem(itemToRemove); + } + + updateItem(oldItem, newItem) { + if (!oldItem) { + return; + } + window.localStorage[oldItem] = newItem; + } +} diff --git a/js-core/homeworks/homework-22/view.js b/js-core/homeworks/homework-22/view.js new file mode 100644 index 0000000..754f380 --- /dev/null +++ b/js-core/homeworks/homework-22/view.js @@ -0,0 +1,32 @@ +class View { + constructor(initialState) { + this.elements = { + addButton: document.querySelector(".controls__add"), + ul: document.querySelector(".list"), + input: document.querySelector(".controls__input"), + listItems: document.querySelector(".list") + }; + + let valuesArr = Object.values(initialState); + let keysArr = Object.keys(initialState); + + this.render(valuesArr, keysArr); + } + + render(values, keys) { + let wrapToLi = values + .map((item, i) => { + let id = keys[i]; + return ` +
    1. + + + + +
      2. `; + }) + .join(""); + + this.elements.listItems.innerHTML = wrapToLi; //values ->
    2. + } +}