diff --git a/js-core/homeworks/homework-22/index.html b/js-core/homeworks/homework-22/index.html
new file mode 100644
index 0000000..5960885
--- /dev/null
+++ b/js-core/homeworks/homework-22/index.html
@@ -0,0 +1,36 @@
+
+
+
+
+ Todo app
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/main.css b/js-core/homeworks/homework-22/main.css
new file mode 100644
index 0000000..e02ae59
--- /dev/null
+++ b/js-core/homeworks/homework-22/main.css
@@ -0,0 +1,82 @@
+*{
+ font-family: 'Nixie One', cursive;
+}
+
+body{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.app{
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.title{
+ color: rgb(57, 12, 182);
+ font-weight: 300;
+ text-align: center;
+}
+
+#add-task{
+ width: 550px;
+ height: 55px;
+ padding: 16px 16px 16px 60px;
+ background: rgba(104, 88, 88, 0.2);;
+ box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+ border: none;
+ font-size: 24px;
+ transition: .2s ease;
+}
+
+#add-task:hover{
+ cursor: pointer;
+}
+
+#add-task:focus{
+ background-color: #fff;
+}
+
+.task{
+ width: inherit;
+ height: 55px;
+ background-color: rgba(221, 129, 129, 0.2);
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.wraper-for-task{
+ margin-left: 40px;
+}
+
+.wraper-for-btns{
+ margin-right: 40px;
+}
+
+.fas{
+ font-size: 18px;
+ transition: .1s ease;
+}
+
+.fas:hover{
+ color: rgba(85, 81, 81, 0.6);
+ cursor: pointer;
+}
+
+.fa-edit{
+ margin-right: 10px;
+}
+
+.task-name{
+ font-size: 20px;
+}
+
+.mark-done{
+ cursor: pointer;
+ font-size: 20px;
+}
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/src/app.js b/js-core/homeworks/homework-22/src/app.js
new file mode 100644
index 0000000..2293cab
--- /dev/null
+++ b/js-core/homeworks/homework-22/src/app.js
@@ -0,0 +1,7 @@
+(() => {
+
+ const model = new Model();
+ const view = new View();
+ const controller = new Controller(model, view);
+
+})()
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/src/controller.js b/js-core/homeworks/homework-22/src/controller.js
new file mode 100644
index 0000000..4066f7c
--- /dev/null
+++ b/js-core/homeworks/homework-22/src/controller.js
@@ -0,0 +1,72 @@
+class Controller{
+ constructor(model, view) {
+ this.model = model;
+ this.view = view;
+
+ this.init();
+ }
+
+ init() {
+ this.applyListenersForInput();
+ this.applyListenersForTaskBlock();
+ }
+
+ applyListenersForInput() {
+ const input = this.view.elements.inputTodo;
+
+ const handlerForInput = (e) => {
+ if(e.keyCode == 13) {
+ const valueLenght = input.value.length;
+ const VALUE = input.value;
+
+ if(valueLenght < 3) {
+ alert('So short task name, please text real task');
+ return;
+ }
+
+ input.value = '';
+ this.model.setTask(VALUE);
+ this.view.render();
+ }
+ }
+
+ input.addEventListener('keydown', handlerForInput);
+ }
+
+ applyListenersForTaskBlock() {
+ const tasksBlock = this.view.elements.tasksBlock;
+
+ const handlerForTasksBlock = (e) => {
+ if(e.target.classList.contains('mark-done')) {
+ const value = e.target.nextElementSibling.textContent;
+ const span = e.target.nextElementSibling;
+
+ e.target.checked === true
+ ? span.outerHTML = /*html*/`${value}`
+ : span.outerHTML = /*html*/`${value}`
+ }
+
+ if(e.target.classList.contains('fa-edit')) {
+ const ID = e.target.parentElement.parentElement.id;
+
+ const NEW_VALUE = prompt('New task name', '');
+
+ if(NEW_VALUE.length < 3) {
+ alert('So short task name, please text real task');
+ return;
+ }
+
+ this.model.editTask(ID, NEW_VALUE);
+ this.view.render();
+ }
+
+ if(e.target.classList.contains('fa-times')) {
+ const ID = e.target.parentElement.parentElement.id;
+ this.model.removeTask(ID);
+ this.view.render();
+ }
+ }
+
+ tasksBlock.addEventListener('click', handlerForTasksBlock);
+ }
+}
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/src/model.js b/js-core/homeworks/homework-22/src/model.js
new file mode 100644
index 0000000..e2b6a94
--- /dev/null
+++ b/js-core/homeworks/homework-22/src/model.js
@@ -0,0 +1,20 @@
+class Model{
+ constructor() {}
+
+ id() {
+ const order = localStorage.length;
+ return order + '_' + Math.random().toString(36).substr(2, 9);
+ }
+
+ setTask(taskName) {
+ localStorage.setItem(`${this.id()}`, taskName);
+ }
+
+ removeTask(taskId) {
+ localStorage.removeItem(taskId);
+ }
+
+ editTask(taskId, newValue) {
+ localStorage[taskId] = newValue;
+ }
+}
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/src/task0.js b/js-core/homeworks/homework-22/src/task0.js
new file mode 100644
index 0000000..09c8e5d
--- /dev/null
+++ b/js-core/homeworks/homework-22/src/task0.js
@@ -0,0 +1,72 @@
+/*
+Task 0
+Напишите функцию которая будет складывать два числа.
+Входные параметры всегда строка.
+
+*/
+
+const solution = (strA, strB) => {
+ const reversedStrA = strA.split('').reverse();
+ const reversedStrB = strB.split('').reverse();
+
+ let resultOfSum;
+
+ if(strA.length > strB.length) {
+ resultOfSum = sum(reversedStrA, reversedStrB);
+ } else {
+ resultOfSum = sum(reversedStrB, reversedStrA);
+ }
+
+ return resultOfSum.reverse().join('');
+};
+
+function sum(biggestStr, smallestStr) {
+ let remainder = 0;
+
+ return biggestStr.reduce((output, num, i) => {
+
+ const numA = parseInt(num, 10) || 0;
+ const numB = parseInt(smallestStr[i], 10) || 0;
+ const lastIndex = biggestStr.length - 1;
+
+ const sum = (numA + numB + remainder).toString();
+
+ if(sum > 9) {
+ const firstNum = parseInt(sum[0], 10);
+ const secondNum = parseInt(sum[1], 10);
+
+ remainder = firstNum;
+ output.push(secondNum);
+ if(lastIndex === i) {
+ output.push(firstNum);
+ }
+ } else {
+ output.push(parseInt(sum, 10));
+ remainder = 0;
+ }
+
+ return output;
+ }, []);
+}
+console.log(solution('1234', '9'))
+console.log(solution('99999', '1'));
+console.log(solution('9', '08'));
+console.log(solution('2987654', '45678'));
+console.log(solution('123456789', '987654322'));
+console.log(solution('945521', '823864'));
+console.log(solution(
+ '823094582094385190384102934810293481029348123094818923749817',
+ '234758927345982475298347523984572983472398457293847594193837')
+);
+console.log(
+ solution('987429134712934876249385134781395873198472398562384958739845234859234758913759182357398457398474598237459823745928347538835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789',
+ '835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789')
+);
+console.log(
+ solution('666666665656566666666565656666666656565666666665656566666666835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789835743829547328954732895474893754893753281957319857432958432548937859483265893274891378593187431583942678439217431924789',
+ '464646464646464644646464646464646464646464646463463463463466')
+);
+console.log(
+ solution('854694587458967459867923420398420394845873945734985374844444',
+ '333333333333439439483948394839834938493843948394839432322229')
+)
\ No newline at end of file
diff --git a/js-core/homeworks/homework-22/src/view.js b/js-core/homeworks/homework-22/src/view.js
new file mode 100644
index 0000000..223fe62
--- /dev/null
+++ b/js-core/homeworks/homework-22/src/view.js
@@ -0,0 +1,42 @@
+class View{
+ constructor() {
+ this.elements = {
+ tasksBlock: document.querySelector('#tasks-block'),
+ inputTodo: document.querySelector('#add-task')
+ };
+
+ this.render();
+ }
+
+ render() {
+ const tasksLenght = localStorage.length;
+ const tasks = Object.values({...localStorage});
+ const identificators = Object.keys({...localStorage});
+
+ if(tasksLenght === 0) {
+ this.elements.tasksBlock.innerHTML = ``;
+ return;
+ }
+
+ const tasksHtmlElements = tasks.reduce((collector, task, i) => {
+ const id = identificators[i];
+ const elem = /*html*/`
+
+
+
+ ${task}
+
+
+
+
+
+
+