EasyCode-JavaScriptReact-v1 · viskosa · Aug 14, 2018 · Aug 18, 2018
diff --git a/js-core/classworks/classwork-22/app.js 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
@@ -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
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>TO DO</title>
+	<style type="text/css">
+/* 		.box {
+	width: 200px;
+	height: 200px;
+	background: blue;
+position: absolute;
+} */
+	</style>
+
+</head>
+<body>
+	<div id="app"></div>
+	<h1>My todo list</h1>
+	<ul class="list-items">Loading</ul>
+	<div class="controls">
+		<label for="controls__input">
+			<input type="text" name=""
+					class="controls__input"
+					id="controls__input">
+		</label>
+		<button class="controls__add">Add task</button>
+	</div>
+
+
+<script type="text/javascript" src="model.js"></script>
+<script type="text/javascript" src="view.js"></script>
+<script type="text/javascript" src="controller.js"></script>
+<script type="text/javascript" src="app.js"></script>
+</body>
+</html>
diff --git a/js-core/classworks/classwork-22/model.js 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);
+	}
+
+}
diff --git a/js-core/classworks/classwork-22/view.js 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 `<li>${item}</li>`;
+		}).join('');
+
+		this.elements.listItems.innerHTML = converted;//newData -> <li>
+	}
+
+
+}
diff --git a/js-core/homeworks/homework-22/app.js 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
@@ -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
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>TO DO</title>
+	<style type="text/css">
+		#app {
+			display: flex;
+			flex-direction: column;
+			width: 600px;
+			margin: 50px auto;
+			background-color: cornsilk;
+			border: 1px solid burlywood;
+			padding: 20px;
+		}
+		h1 {
+			box-shadow: 0 0 5px 0 rgba(0,0,0,.2) inset;
+			margin: 0;
+			padding: 20px;
+			text-align: center;
+
+		}
+		ol {
+			padding: 0;
+		} 
+		li {
+			box-shadow: 0 0 5px 0 rgba(0,0,0,.2) inset;
+			list-style-position: inside;
+			padding: 10px;
+			margin-bottom: 1px;
+		}
+		.controls {
+			display: flex;
+			justify-content: space-between;
+		}
+		.controls__input {
+			width: 300px;
+			padding: 5px;
+
+		}
+		.list__item{
+			display: flex;
+			justify-content: space-between;
+			vertical-align: middle;
+		}
+		.completed {
+			text-decoration: line-through;
+		}
+/*		.destroy {
+			position: relative;
+			width: 20px;
+			height: 20px;
+			cursor: pointer;
+
+		}
+ 		.destroy:before {
+	content: 'X';
+	display: none;
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	right: 10px;
+}
+.list__item:hover>.destroy:before{
+	display: block;
+} */
+		button {
+			cursor: pointer;
+			background-color: azure;
+			border: 1px solid burlywood;
+			padding: 5px 93px;
+			margin-left: 10px;
+		}
+		.label {
+			flex: 1;
+		}
+		.change,
+		.destroy,
+		.complete {
+			padding: 5px;
+		}
+	</style>
+
+</head>
+<body>
+	<div id="app">
+		<h1>My todo list</h1>
+		<ol class="list"></ol>
+		<div class="controls">
+			<label for="controls__input">
+				<input type="text" name=""
+						class="controls__input"
+						id="controls__input">
+			</label>
+			<button class="controls__add">Add task</button>
+		</div>
+	</div>
+
+<script type="text/javascript" src="model.js"></script>
+<script type="text/javascript" src="view.js"></script>
+<script type="text/javascript" src="controller.js"></script>
+<script type="text/javascript" src="app.js"></script>
+</body>
+</html>