EasyCode-JavaScriptReact-v1 · horidon · Aug 16, 2018 · Aug 16, 2018 · Aug 16, 2018 · Aug 17, 2018
diff --git a/js-core/homeworks/homework-22/index.html b/js-core/homeworks/homework-22/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Todo app</title>
+    <link rel="stylesheet" href="main.css">
+    <link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+</head>
+<body>
+
+    <div id="app">
+
+        <div class="title">
+            <h1>To Do</h1>
+        </div>
+
+        <div class="task-list">
+
+            <div class="input-for-tasks">
+                <input id="add-task" type="text" placeholder="Your task">
+            </div>
+
+            <div id="tasks-block"></div>
+
+        </div>
+
+    </div>
+
+    <script src="src/task0.js"></script>
+    <script src="src/model.js"></script>
+    <script src="src/controller.js"></script>
+    <script src="src/view.js"></script>
+    <script src="src/app.js"></script>
+</body>
+</html>
diff --git a/js-core/homeworks/homework-22/main.css 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;
+}
diff --git a/js-core/homeworks/homework-22/src/app.js 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);
+
+})()
diff --git a/js-core/homeworks/homework-22/src/controller.js 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*/`<strike class="task-name">${value}</strike>`
+                    : span.outerHTML = /*html*/`<span class="task-name">${value}</span>`
+            }
+
+            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);
+    }
+}
diff --git a/js-core/homeworks/homework-22/src/model.js 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;
+    }
+}
diff --git a/js-core/homeworks/homework-22/src/task0.js 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')
+)
diff --git a/js-core/homeworks/homework-22/src/view.js 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*/`
+                <div id="${id}" class="task">
+                    <div class="wraper-for-task">
+                        <input class="mark-done" type="checkbox">
+                        <span class="task-name">${task}</span>
+                    </div>
+
+                    <div class="wraper-for-btns">
+                        <span class="fas fa-edit"></span>
+                        <span class="fas fa-times"></span>
+                    </div>
+                </div>
+            `;
+
+            return collector + elem;
+        }, '');
+
+        this.elements.tasksBlock.innerHTML = tasksHtmlElements;
+    }
+}