Skip to content

Commit 01d8b73

Browse files
Balashov NikitaOlegLustenko
Balashov Nikita
authored and
OlegLustenko
committed
classwork-22
1 parent 816e370 commit 01d8b73

File tree

5 files changed

+162
-0
lines changed

5 files changed

+162
-0
lines changed

‎js-core/classworks/classwork-22/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Todo app</title>
6+
</head>
7+
<body>
8+
9+
<div id="app">
10+
11+
<div class="title">
12+
<h1>TO DO</h1>
13+
</div>
14+
15+
<div class="block-list">
16+
<ul class="list">loading...</ul>
17+
</div>
18+
19+
<div class="controls">
20+
<input id="input-task" type="text" placeholder="Your task" required>
21+
<button id="add-btn">Add</button>
22+
<br>
23+
<input id="remove-field" type="text" placeholder="Item for remove" required>
24+
<button id="remove-btn">Remove</button>
25+
<br>
26+
<input id="update-old-item" type="text" placeholder="Old item" required>
27+
<input id="update-new-item" type="text" placeholder="New Item" required>
28+
<button id="update-btn">Update</button>
29+
</div>
30+
31+
</div>
32+
33+
34+
<script src="src/model.js"></script>
35+
<script src="src/controller.js"></script>
36+
<script src="src/view.js"></script>
37+
<script src="src/app.js"></script>
38+
</body>
39+
</html>

‎js-core/classworks/classwork-22/src/app.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
(() => {
2+
const initializeState = [
3+
'learn JS',
4+
'learn MVC',
5+
'read book OOP'
6+
];
7+
8+
const model = new Model(initializeState);
9+
const view = new View(initializeState);
10+
const controller = new Controller(model, view);
11+
})()

‎js-core/classworks/classwork-22/src/controller.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
class Controller{
2+
constructor(model, view) {
3+
this.model = model;
4+
this.view = view;
5+
this.init();
6+
}
7+
8+
init() {
9+
this.addHandlerForTask();
10+
this.addHandlerForRemove();
11+
this.addHandlerForUpdate();
12+
}
13+
14+
addHandlerForTask() {
15+
const input = this.view.elements.taskField;
16+
const addButton = this.view.elements.addButton;
17+
18+
const handlerForAddButton = () => {
19+
if(input.value.length < 3) {
20+
alert('Your length of input is so short');
21+
}
22+
23+
this.model.addTodoItem(input.value);
24+
this.view.render(this.model.data);
25+
26+
input.value = '';
27+
}
28+
29+
addButton.addEventListener('click', handlerForAddButton);
30+
}
31+
32+
addHandlerForRemove() {
33+
const input = this.view.elements.removeField;
34+
const removeBtn = this.view.elements.removeBtn;
35+
36+
const handlerForRemoveButton = () => {
37+
this.model.rempveItem(input.value);
38+
this.view.render(this.model.data);
39+
40+
input.value = '';
41+
};
42+
43+
removeBtn.addEventListener('click', handlerForRemoveButton)
44+
}
45+
46+
addHandlerForUpdate() {
47+
const oldInput = this.view.elements.updateOld;
48+
const newInput = this.view.elements.updateNew;
49+
const updateBtn = this.view.elements.updateBtn;
50+
51+
const handlerForUpdateButton = () => {
52+
this.model.updateItem(oldInput.value, newInput.value);
53+
this.view.render(this.model.data);
54+
55+
oldInput.value = '';
56+
newInput.value = '';
57+
};
58+
59+
updateBtn.addEventListener('click', handlerForUpdateButton)
60+
}
61+
}

‎js-core/classworks/classwork-22/src/model.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
class Model{
2+
constructor(initialState) {
3+
this.data = initialState;
4+
}
5+
6+
addTodoItem(newItem) {
7+
if(!newItem) return;
8+
9+
this.data.push(newItem);
10+
}
11+
12+
rempveItem(itemToRemove) {
13+
const itemInData = this.data.indexOf(itemToRemove);
14+
if(itemInData === -1) return alert('Such item is not defined');
15+
16+
this.data = this.data.filter(task => task !== itemToRemove);
17+
}
18+
19+
updateItem(oldItem, newItem) {
20+
const itemInData = this.data.indexOf(oldItem);
21+
22+
if(itemInData !== -1) {
23+
this.data[itemInData] = newItem;
24+
}
25+
26+
}
27+
}

‎js-core/classworks/classwork-22/src/view.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
class View{
2+
constructor(initialState) {
3+
this.elements = {
4+
addButton: document.querySelector('#add-btn'),
5+
listItems: document.querySelector('.list'),
6+
taskField: document.querySelector('#input-task'),
7+
removeField: document.querySelector('#remove-field'),
8+
removeBtn: document.querySelector('#remove-btn'),
9+
updateOld: document.querySelector('#update-old-item'),
10+
updateNew: document.querySelector('#update-new-item'),
11+
updateBtn: document.querySelector('#update-btn')
12+
};
13+
14+
this.render(initialState);
15+
}
16+
17+
render(newData) {
18+
const listItems = newData.reduce((colector, item) => {
19+
return colector + `<li>${item}</li>`;
20+
}, '');
21+
22+
this.elements.listItems.innerHTML = listItems;
23+
}
24+
}

0 commit comments

Comments
 (0)