Skip to content

Nikita Korzhavin js-3 hw #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Nikita Korzhavin js-3 hw #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6f2c636
added drow todo table functionality
Jul 30, 2019
228f27c
added working todo app(in script1.js)
Aug 5, 2019
15c9f1f
todo app added
Aug 7, 2019
bf10bdd
moved updateLocalStorage
VKNS Sep 6, 2019
e28accd
more fixes
VKNS Sep 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions Nikita_Korzhavin/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./styles.css" />
<title>Document</title>
</head>
<body>
<div id="todo-app"></div>
<script type="text/javascript" src="script1.js"></script>
</body>
</html>
354 changes: 354 additions & 0 deletions Nikita_Korzhavin/script1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,354 @@
/*----------------setting local storage DB------------------ */

var moduleStorage = function() {
var storage = JSON.parse(localStorage.getItem('todos'));

var updateLocalStorage = function(storage) {
localStorage.setItem('todos', JSON.stringify(storage));
};

if (!storage) {
storage = {};
updateLocalStorage(storage);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would fail since updateLocalStorage is a function expression and hoisted

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for that. So stupid mistake. I fixed that in commit (hope it is visible here)

}

var getStorage = function() {
return storage;
};

var addToStorage = function(name, obj) {
storage[name] = obj;
updateLocalStorage(storage);
};

var removeFromStorage = function(name) {
delete storage[name];
updateLocalStorage(storage);
};


var setItemInStorage = function(itemName) {
storage[itemName].progress = !storage[itemName].progress;
updateLocalStorage(storage);
};

return {
getStorage,
addToStorage,
removeFromStorage,
setItemInStorage,
};
};

/*---------------------------------- */

var module = function() {
var Store = moduleStorage();
var storage = Store.getStorage();

/* -----------------click handlers ------------------- */

var deleteTodoFromTable = function(todoName) {
Store.removeFromStorage(todoName);
var todoTable = document.getElementById('todo-table');
var todoItem = document.getElementById(todoName);
todoTable.removeChild(todoItem);
};

var switchProgress = function(todoName) {
Store.setItemInStorage(todoName);
redrawButtonProgress(todoName, storage[todoName].progress);
};

var constructDate = function(num) {
var now = new Date();
return new Date(now.getFullYear(), now.getMonth(), now.getDate() + num);
};

var filterTodos = function() {
var form = document.getElementById('filter-table');
var progressOption =
form.filterProgress.options[form.filterProgress.options.selectedIndex]
.value;
var progressValue =
progressOption === 'done'
? true
: progressOption === 'not done'
? false
: 'dont filter';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I don't find using chained ternary operators a good idea since it makes code less readable


var filteredByProgress =
progressOption !== 'false'
? Object.keys(storage).reduce(function(acc, todo) {
if (storage[todo].progress === progressValue) {
acc[todo] = storage[todo];
}
return acc;
}, {})
: storage;
//---------------------------------------------------------
var deadLineOption =
form.filterDeadline.options[form.filterDeadline.options.selectedIndex]
.value;

var deadLineValue =
deadLineOption === 'tomorrow'
? constructDate(1)
: deadLineOption === 'week'
? constructDate(7)
: 'dont filter';

var filteredByDeadLine =
deadLineOption !== 'false'
? Object.keys(filteredByProgress).reduce(function(acc, todo) {
var date1 = new Date(filteredByProgress[todo].deadLine);
var date2 = deadLineValue;

if (
date1.getDate() === date2.getDate() &&
date1.getFullYear() === date2.getFullYear() &&
date1.getMonth() === date2.getMonth()
) {
acc[todo] = filteredByProgress[todo];
}
return acc;
}, {})
: filteredByProgress;
redrawToDoTable(filteredByDeadLine);
};

var tableClickHandler = function(event) {
event.preventDefault();
var target = event.target;

if (target.id === 'filter-button') {
filterTodos();
} else if (target.id === 'add-todo-button') {
addTodoToTable();
} else {
var operationType = target.dataset.name;
var todoName = target.parentElement.id;
switch (operationType) {
case 'switch-progress-button':
switchProgress(todoName);
break;
case 'delete-button':
deleteTodoFromTable(todoName);
break;
default:
break;
}
}
};

// ------------------view fuctions-assist click handlers---

var addTodoToTable = function() {
var form = document.getElementById('todo-form');
var dataFromInput = {
task: form.text.value,
deadLine: form.date.value,
progress: false,
};

var todoName = Math.random();

Store.addToStorage(todoName, dataFromInput);
newTodoToTable(todoName, dataFromInput);
form.text.value = '';
form.date.value = '';
};

var newTodoToTable = function(todo, node) {
var todoApp = document.getElementById('todo-table');
var todoItem = document.createElement('div');
todoItem.classList.add('todo');
todoItem.id = todo;
for (var key in node) {
todoItem.appendChild(toDoChunkCreator(key, node[key]));
}
todoItem.appendChild(drawDeleteTodoButton());
todoApp.appendChild(todoItem);
};

var redrawButtonProgress = function(todoName, info) {
var todoItem = document.getElementById(todoName);
var children = todoItem.childNodes;
for (var i = 0; i < children.length; i++) {
if (children[i].dataset.name === 'switch-progress-button') {
children[i].innerHTML = info ? 'done' : 'not done';
}
}
};

var redrawToDoTable = function(newStorage) {
var todoApp = document.getElementById('todo-app');
var oldTodoTable = document.getElementById('todo-table');
var newTodoTable = addTable(newStorage);
todoApp.replaceChild(newTodoTable, oldTodoTable);
};

/*---------------- filter construction ---------------------- */

var createFilters = function() {
var parentDiv = document.createElement('form');
parentDiv.id = 'filter-table';
var filterProgressLabel = document.createElement('label');
filterProgressLabel.innerHTML = 'filter by progress: ';

var filterProgress = document.createElement('select');
filterProgress.name = 'filterProgress';
filterProgress.appendChild(new Option('default', false, true));
filterProgress.appendChild(new Option('done', 'done'));
filterProgress.appendChild(new Option('not done', 'not done'));
filterProgressLabel.appendChild(filterProgress);
parentDiv.appendChild(filterProgressLabel);

var filterDeadLineLabel = document.createElement('label');
filterDeadLineLabel.innerHTML = 'filter by date: ';
var filterDeadLine = document.createElement('select');
filterDeadLine.name = 'filterDeadline';
filterDeadLine.appendChild(new Option('default', false, true));
filterDeadLine.appendChild(new Option('tomorrow', 'tomorrow'));
filterDeadLine.appendChild(new Option('week', 'week'));

filterDeadLineLabel.appendChild(filterDeadLine);
parentDiv.appendChild(filterDeadLineLabel);

var submitButton = document.createElement('button');
submitButton.id = 'filter-button';
submitButton.innerHTML = 'filter';
parentDiv.appendChild(submitButton);
return parentDiv;
};

//---------------------add todo form

var drawForm = function() {
var form = document.createElement('form');
form.id = 'todo-form';

var todoTextLabel = document.createElement('label');
todoTextLabel.innerHTML = 'add todo: ';

var todoText = document.createElement('input');
todoText.placeholder = 'enter your task';
todoText.type = 'text';
todoText.name = 'text';

todoTextLabel.appendChild(todoText);
form.appendChild(todoTextLabel);

var todoDeadLineLabel = document.createElement('label');
todoDeadLineLabel.innerHTML = 'add deadline: ';

var todoDeadline = document.createElement('input');
todoDeadline.type = 'date';
todoDeadline.name = 'date';

todoDeadLineLabel.appendChild(todoDeadline);
form.appendChild(todoDeadLineLabel);

var button = document.createElement('button');
button.id = 'add-todo-button';
button.innerHTML = 'submit';
form.appendChild(button);
return form;
};

//---------------------todo item ------------------------------

var drawDeleteTodoButton = function() {
var button = document.createElement('button');
var text = document.createTextNode('delete');
button.dataset.name = 'delete-button';
button.classList.add('todo__delete');
button.appendChild(text);
return button;
};

var drawButtonProgress = function(info) {
var button = document.createElement('button');
var text = document.createTextNode(info ? 'done' : 'not done');
button.dataset.name = 'switch-progress-button';
button.classList.add('todo__progress');
button.appendChild(text);
return button;
};

var drawDeadLineInfo = function(deadLine) {
var todoChunk = document.createElement('span');
var text = document.createTextNode(deadLine);
todoChunk.classList.add('todo__deadline');
todoChunk.appendChild(text);
return todoChunk;
};

var drawTextNode = function(text) {
var todoChunk = document.createElement('span');
var text = document.createTextNode(text);
todoChunk.classList.add('todo__text');
todoChunk.appendChild(text);
return todoChunk;
};

var toDoChunkCreator = function(key, content) {
var chunk;
switch (key) {
case 'task':
chunk = drawTextNode;
break;
case 'deadLine':
chunk = drawDeadLineInfo;
break;
case 'progress':
chunk = drawButtonProgress;
break;
case 'deleteButton':
chunk = drawDeleteTodoButton;
break;
default:
break;
}

return chunk(content);
};

//----------construct table with todos--------------------------------
var addTable = function(newStorage) {
var todoTable = document.createElement('div');
todoTable.id = 'todo-table';
for (var todo in newStorage) {
var node = newStorage[todo];
var todoItem = document.createElement('div');
todoItem.classList.add('todo');
todoItem.id = todo;
//------------todoApp item chunk------------------------------
for (var key in node) {
todoItem.appendChild(toDoChunkCreator(key, node[key]));
}
todoItem.appendChild(drawDeleteTodoButton());
todoTable.appendChild(todoItem);
}
return todoTable;
};

var drawApp = function() {
var todoApp = document.getElementById('todo-app');
todoApp.classList.add('todo-app');
todoApp.onclick = tableClickHandler;
todoApp.appendChild(addTable(storage));
todoApp.appendChild(createFilters());
todoApp.appendChild(drawForm());
};

return {
drawApp: drawApp,
};
};

window.onload = function() {
var module1 = module();

module1.drawApp();
};
Loading