From a94db6738b04331e157e16b34a949824519a8be7 Mon Sep 17 00:00:00 2001 From: Balashov Nikita Date: Thu, 16 Aug 2018 18:21:19 +0300 Subject: [PATCH 1/4] task 0 --- js-core/homeworks/homework-22/src/task0.js | 76 ++++++++++++++++++++++ 1 file changed, 76 insertions(+) create mode 100644 js-core/homeworks/homework-22/src/task0.js 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..7764576 --- /dev/null +++ b/js-core/homeworks/homework-22/src/task0.js @@ -0,0 +1,76 @@ +/* +Task 0 +Напишите функцию которая будет складывать два числа. +Входные параметры всегда строка. + +*/ + +const solution = (strA, strB) => { + const reversedStrA = strA.split('').reverse(); + const reversedStrB = strB.split('').reverse(); + + let resultOfSum; + + if(reversedStrA.lenght > reversedStrB.lenght) { + 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 lengthOfSmallestStr = smallestStr.length + 1; + + const numA = parseInt(num, 10) || 0; + const numB = parseInt(smallestStr[i], 10) || 0; + const lastIndex = biggestStr.length - 1; + + if(i > lengthOfSmallestStr) { + remainder = 0; + } + + 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('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 From 2c473fddb45243ac2bebc6bdc94b6a550561dbc3 Mon Sep 17 00:00:00 2001 From: Balashov Nikita Date: Thu, 16 Aug 2018 18:21:37 +0300 Subject: [PATCH 2/4] homework-22 start --- js-core/homeworks/homework-22/index.html | 39 ++++++++++++ js-core/homeworks/homework-22/src/app.js | 11 ++++ .../homeworks/homework-22/src/controller.js | 61 +++++++++++++++++++ js-core/homeworks/homework-22/src/model.js | 27 ++++++++ js-core/homeworks/homework-22/src/view.js | 24 ++++++++ 5 files changed, 162 insertions(+) create mode 100644 js-core/homeworks/homework-22/index.html create mode 100644 js-core/homeworks/homework-22/src/app.js create mode 100644 js-core/homeworks/homework-22/src/controller.js create mode 100644 js-core/homeworks/homework-22/src/model.js create mode 100644 js-core/homeworks/homework-22/src/view.js diff --git a/js-core/homeworks/homework-22/index.html b/js-core/homeworks/homework-22/index.html new file mode 100644 index 0000000..1bfd823 --- /dev/null +++ b/js-core/homeworks/homework-22/index.html @@ -0,0 +1,39 @@ + + + + + Todo app + + + +
+ +
+

TO DO

+
+ +
+
    loading...
+
+ +
+ + +
+ + +
+ + + +
+ +
+ + + + + + + + \ 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..4e46242 --- /dev/null +++ b/js-core/homeworks/homework-22/src/app.js @@ -0,0 +1,11 @@ +(() => { + const initializeState = [ + 'learn JS', + 'learn MVC', + 'read book OOP' + ]; + + const model = new Model(initializeState); + const view = new View(initializeState); + 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..7e9cff4 --- /dev/null +++ b/js-core/homeworks/homework-22/src/controller.js @@ -0,0 +1,61 @@ +class Controller{ + constructor(model, view) { + this.model = model; + this.view = view; + this.init(); + } + + init() { + this.addHandlerForTask(); + this.addHandlerForRemove(); + this.addHandlerForUpdate(); + } + + addHandlerForTask() { + const input = this.view.elements.taskField; + const addButton = this.view.elements.addButton; + + const handlerForAddButton = () => { + if(input.value.length < 3) { + alert('Your length of input is so short'); + } + + this.model.addTodoItem(input.value); + this.view.render(this.model.data); + + input.value = ''; + } + + addButton.addEventListener('click', handlerForAddButton); + } + + addHandlerForRemove() { + const input = this.view.elements.removeField; + const removeBtn = this.view.elements.removeBtn; + + const handlerForRemoveButton = () => { + this.model.rempveItem(input.value); + this.view.render(this.model.data); + + input.value = ''; + }; + + removeBtn.addEventListener('click', handlerForRemoveButton) + } + + addHandlerForUpdate() { + const oldInput = this.view.elements.updateOld; + const newInput = this.view.elements.updateNew; + const updateBtn = this.view.elements.updateBtn; + + const handlerForUpdateButton = () => { + this.model.updateItem(oldInput.value, newInput.value); + this.view.render(this.model.data); + + oldInput.value = ''; + newInput.value = ''; + }; + + updateBtn.addEventListener('click', handlerForUpdateButton) + } +} \ 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..c489c45 --- /dev/null +++ b/js-core/homeworks/homework-22/src/model.js @@ -0,0 +1,27 @@ +class Model{ + constructor(initialState) { + this.data = initialState; + } + + addTodoItem(newItem) { + if(!newItem) return; + + this.data.push(newItem); + } + + rempveItem(itemToRemove) { + const itemInData = this.data.indexOf(itemToRemove); + if(itemInData === -1) return alert('Such item is not defined'); + + this.data = this.data.filter(task => task !== itemToRemove); + } + + updateItem(oldItem, newItem) { + const itemInData = this.data.indexOf(oldItem); + + if(itemInData !== -1) { + this.data[itemInData] = newItem; + } + + } +} \ 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..bfb2615 --- /dev/null +++ b/js-core/homeworks/homework-22/src/view.js @@ -0,0 +1,24 @@ +class View{ + constructor(initialState) { + this.elements = { + addButton: document.querySelector('#add-btn'), + listItems: document.querySelector('.list'), + taskField: document.querySelector('#input-task'), + removeField: document.querySelector('#remove-field'), + removeBtn: document.querySelector('#remove-btn'), + updateOld: document.querySelector('#update-old-item'), + updateNew: document.querySelector('#update-new-item'), + updateBtn: document.querySelector('#update-btn') + }; + + this.render(initialState); + } + + render(newData) { + const listItems = newData.reduce((colector, item) => { + return colector + `
  • ${item}
    • `; + }, ''); + + this.elements.listItems.innerHTML = listItems; + } +} \ No newline at end of file From fec27ce325a3f8b01ef843b95c952cb2894924dd Mon Sep 17 00:00:00 2001 From: Balashov Nikita Date: Thu, 16 Aug 2018 18:42:29 +0300 Subject: [PATCH 3/4] little fix task 0 --- js-core/homeworks/homework-22/src/task0.js | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/js-core/homeworks/homework-22/src/task0.js b/js-core/homeworks/homework-22/src/task0.js index 7764576..09c8e5d 100644 --- a/js-core/homeworks/homework-22/src/task0.js +++ b/js-core/homeworks/homework-22/src/task0.js @@ -11,7 +11,7 @@ const solution = (strA, strB) => { let resultOfSum; - if(reversedStrA.lenght > reversedStrB.lenght) { + if(strA.length > strB.length) { resultOfSum = sum(reversedStrA, reversedStrB); } else { resultOfSum = sum(reversedStrB, reversedStrA); @@ -24,15 +24,10 @@ function sum(biggestStr, smallestStr) { let remainder = 0; return biggestStr.reduce((output, num, i) => { - const lengthOfSmallestStr = smallestStr.length + 1; const numA = parseInt(num, 10) || 0; const numB = parseInt(smallestStr[i], 10) || 0; const lastIndex = biggestStr.length - 1; - - if(i > lengthOfSmallestStr) { - remainder = 0; - } const sum = (numA + numB + remainder).toString(); @@ -53,7 +48,8 @@ function sum(biggestStr, smallestStr) { 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')); From e54d918803e9dd244a9ed00b442156ea83dd6655 Mon Sep 17 00:00:00 2001 From: Balashov Nikita Date: Fri, 17 Aug 2018 15:05:09 +0300 Subject: [PATCH 4/4] To do MVC ready --- js-core/homeworks/homework-22/index.html | 27 +++--- js-core/homeworks/homework-22/main.css | 82 ++++++++++++++++++ js-core/homeworks/homework-22/src/app.js | 12 +-- .../homeworks/homework-22/src/controller.js | 83 +++++++++++-------- js-core/homeworks/homework-22/src/model.js | 29 +++---- js-core/homeworks/homework-22/src/view.js | 46 ++++++---- 6 files changed, 188 insertions(+), 91 deletions(-) create mode 100644 js-core/homeworks/homework-22/main.css diff --git a/js-core/homeworks/homework-22/index.html b/js-core/homeworks/homework-22/index.html index 1bfd823..5960885 100644 --- a/js-core/homeworks/homework-22/index.html +++ b/js-core/homeworks/homework-22/index.html @@ -3,31 +3,28 @@ Todo app + + +
    -

    TO DO

    +

    To Do

    -
    -
      loading...
    -
    +
    -
    - - -
    - - -
    - - - +
    + +
    + +
    +
    - +
    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 index 4e46242..2293cab 100644 --- a/js-core/homeworks/homework-22/src/app.js +++ b/js-core/homeworks/homework-22/src/app.js @@ -1,11 +1,7 @@ (() => { - const initializeState = [ - 'learn JS', - 'learn MVC', - 'read book OOP' - ]; - - const model = new Model(initializeState); - const view = new View(initializeState); + + 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 index 7e9cff4..4066f7c 100644 --- a/js-core/homeworks/homework-22/src/controller.js +++ b/js-core/homeworks/homework-22/src/controller.js @@ -2,60 +2,71 @@ class Controller{ constructor(model, view) { this.model = model; this.view = view; + this.init(); } init() { - this.addHandlerForTask(); - this.addHandlerForRemove(); - this.addHandlerForUpdate(); + this.applyListenersForInput(); + this.applyListenersForTaskBlock(); } - addHandlerForTask() { - const input = this.view.elements.taskField; - const addButton = this.view.elements.addButton; + applyListenersForInput() { + const input = this.view.elements.inputTodo; - const handlerForAddButton = () => { - if(input.value.length < 3) { - alert('Your length of input is so short'); - } + const handlerForInput = (e) => { + if(e.keyCode == 13) { + const valueLenght = input.value.length; + const VALUE = input.value; - this.model.addTodoItem(input.value); - this.view.render(this.model.data); + if(valueLenght < 3) { + alert('So short task name, please text real task'); + return; + } - input.value = ''; + input.value = ''; + this.model.setTask(VALUE); + this.view.render(); + } } - addButton.addEventListener('click', handlerForAddButton); + input.addEventListener('keydown', handlerForInput); } - addHandlerForRemove() { - const input = this.view.elements.removeField; - const removeBtn = this.view.elements.removeBtn; + applyListenersForTaskBlock() { + const tasksBlock = this.view.elements.tasksBlock; - const handlerForRemoveButton = () => { - this.model.rempveItem(input.value); - this.view.render(this.model.data); + const handlerForTasksBlock = (e) => { + if(e.target.classList.contains('mark-done')) { + const value = e.target.nextElementSibling.textContent; + const span = e.target.nextElementSibling; - input.value = ''; - }; - - removeBtn.addEventListener('click', handlerForRemoveButton) - } + e.target.checked === true + ? span.outerHTML = /*html*/`${value}` + : span.outerHTML = /*html*/`${value}` + } - addHandlerForUpdate() { - const oldInput = this.view.elements.updateOld; - const newInput = this.view.elements.updateNew; - const updateBtn = this.view.elements.updateBtn; + if(e.target.classList.contains('fa-edit')) { + const ID = e.target.parentElement.parentElement.id; + + const NEW_VALUE = prompt('New task name', ''); - const handlerForUpdateButton = () => { - this.model.updateItem(oldInput.value, newInput.value); - this.view.render(this.model.data); + if(NEW_VALUE.length < 3) { + alert('So short task name, please text real task'); + return; + } - oldInput.value = ''; - newInput.value = ''; - }; + this.model.editTask(ID, NEW_VALUE); + this.view.render(); + } - updateBtn.addEventListener('click', handlerForUpdateButton) + 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 index c489c45..e2b6a94 100644 --- a/js-core/homeworks/homework-22/src/model.js +++ b/js-core/homeworks/homework-22/src/model.js @@ -1,27 +1,20 @@ class Model{ - constructor(initialState) { - this.data = initialState; - } - - addTodoItem(newItem) { - if(!newItem) return; + constructor() {} - this.data.push(newItem); + id() { + const order = localStorage.length; + return order + '_' + Math.random().toString(36).substr(2, 9); } - rempveItem(itemToRemove) { - const itemInData = this.data.indexOf(itemToRemove); - if(itemInData === -1) return alert('Such item is not defined'); - - this.data = this.data.filter(task => task !== itemToRemove); + setTask(taskName) { + localStorage.setItem(`${this.id()}`, taskName); } - updateItem(oldItem, newItem) { - const itemInData = this.data.indexOf(oldItem); - - if(itemInData !== -1) { - this.data[itemInData] = newItem; - } + 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/view.js b/js-core/homeworks/homework-22/src/view.js index bfb2615..223fe62 100644 --- a/js-core/homeworks/homework-22/src/view.js +++ b/js-core/homeworks/homework-22/src/view.js @@ -1,24 +1,42 @@ class View{ - constructor(initialState) { + constructor() { this.elements = { - addButton: document.querySelector('#add-btn'), - listItems: document.querySelector('.list'), - taskField: document.querySelector('#input-task'), - removeField: document.querySelector('#remove-field'), - removeBtn: document.querySelector('#remove-btn'), - updateOld: document.querySelector('#update-old-item'), - updateNew: document.querySelector('#update-new-item'), - updateBtn: document.querySelector('#update-btn') + tasksBlock: document.querySelector('#tasks-block'), + inputTodo: document.querySelector('#add-task') }; - this.render(initialState); + this.render(); } - render(newData) { - const listItems = newData.reduce((colector, item) => { - return colector + `
  • ${item}
    • `; + 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} +
    + +
    + + +
    +
    + `; + + return collector + elem; }, ''); - this.elements.listItems.innerHTML = listItems; + this.elements.tasksBlock.innerHTML = tasksHtmlElements; } } \ No newline at end of file