From 5af66162b88d191402a2d9b9c67e432fa1b1d718 Mon Sep 17 00:00:00 2001 From: Anastasiya Santalova Date: Tue, 30 Jul 2019 15:27:52 +0300 Subject: [PATCH 1/8] Common markup added --- Anastasiya Santalova/app.html | 78 +++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 Anastasiya Santalova/app.html diff --git a/Anastasiya Santalova/app.html b/Anastasiya Santalova/app.html new file mode 100644 index 0000000..53bba6c --- /dev/null +++ b/Anastasiya Santalova/app.html @@ -0,0 +1,78 @@ + + + + + + + + ToDo List / Santalova + + + + + +
+ +
+ Welcome +
+ +
+

ToDo List

+
+ +
+ +
+ + + +
+ +
+ + + + Do/done + + + + + + + Deadline + + + + +
+ +
+ + + +
+ +
+ +
+

© Anastasiya Santalova, 2019

+
+ +
+ + + + + \ No newline at end of file From ef0e978821c1a201c5803e33d04d7184112a8475 Mon Sep 17 00:00:00 2001 From: Anastasiya Santalova Date: Tue, 30 Jul 2019 15:28:26 +0300 Subject: [PATCH 2/8] Basic styles added --- Anastasiya Santalova/SCSS/_mixins.scss | 61 +++++++ Anastasiya Santalova/SCSS/_variables.scss | 4 + Anastasiya Santalova/SCSS/app.scss | 195 ++++++++++++++++++++++ Anastasiya Santalova/app.css | 155 +++++++++++++++++ 4 files changed, 415 insertions(+) create mode 100644 Anastasiya Santalova/SCSS/_mixins.scss create mode 100644 Anastasiya Santalova/SCSS/_variables.scss create mode 100644 Anastasiya Santalova/SCSS/app.scss create mode 100644 Anastasiya Santalova/app.css diff --git a/Anastasiya Santalova/SCSS/_mixins.scss b/Anastasiya Santalova/SCSS/_mixins.scss new file mode 100644 index 0000000..051be9c --- /dev/null +++ b/Anastasiya Santalova/SCSS/_mixins.scss @@ -0,0 +1,61 @@ +@mixin gridTemplate { + display: grid; + + grid-template-areas: + "h h h" + ". tt ." + ". app ." + ". . ." + "f f f"; + + grid-template-columns: 1fr 700px 1fr; + grid-template-rows: 50px 2fr 400px 1fr 40px; +} + +@mixin fullContainer { + width: 100%; + height: 100%; +} + +@mixin appGridTemplate { + display: grid; + + grid-template-areas: + "input" + "filt" + "tsks"; + + grid-template-columns: 1fr; + grid-template-rows: 60px 40px 1fr; +} + +@mixin filterGridTemplate { + display: grid; + + grid-template-areas: + "filt1 filt2"; + + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; +} + +@mixin taskGridTemplate { + display: grid; + + grid-template-areas: + "check txt dt del"; + + grid-template-columns: 30px 1fr 100px 40px; + grid-template-rows: 1fr; +} + +@mixin borderGray ($bStyle: solid, $bWidth: 1px, $bColor: lightgrey) { + border: $bWidth $bStyle $bColor; +} + +@mixin verticalAlignCenter ($left: 50%) { + position: absolute; + top: 50%; + left: $left; + transform: translate(-50%, -50%) +} \ No newline at end of file diff --git a/Anastasiya Santalova/SCSS/_variables.scss b/Anastasiya Santalova/SCSS/_variables.scss new file mode 100644 index 0000000..03d9130 --- /dev/null +++ b/Anastasiya Santalova/SCSS/_variables.scss @@ -0,0 +1,4 @@ +// colors + +$lightColor: #F5EAEA; +$darkColor: #A95B62; \ No newline at end of file diff --git a/Anastasiya Santalova/SCSS/app.scss b/Anastasiya Santalova/SCSS/app.scss new file mode 100644 index 0000000..a05977d --- /dev/null +++ b/Anastasiya Santalova/SCSS/app.scss @@ -0,0 +1,195 @@ +@import "variables"; +@import "mixins"; + +html { + @include fullContainer; +} + +body { + margin: 0; + padding: 0; + + @include fullContainer; + text-align: center; + + background-color: $darkColor; + color: $lightColor; +} + +p { + margin: 0; +} + +#root { + margin: 0; + padding: 0; + + @include fullContainer; + @include gridTemplate; +} + +.header { + grid-area: h; + + vertical-align: middle; +} + +.footer { + grid-area: f; + position: relative; + + text-align: left; + + font-size: 0.8em; + + p { + margin: 0; + @include verticalAlignCenter(10%); + } +} + +.todo-title { + grid-area: tt; + position: relative; + + margin: 0; + + font-size: 30pt; + + h1 { + margin: 0; + @include verticalAlignCenter(); + } +} + +.todo-area { + grid-area: app; + + @include appGridTemplate; + + background-color: $lightColor; + color: $darkColor; + + @include borderGray(solid, 20px, $lightColor); + border-radius: 15px; +} + +.add-task { + grid-area: input; + position: relative; + + @include borderGray(solid, 2px); + + &__input { + height: 30px; + border-radius: 5px; + + &_task { + width: 45%; + padding: 0; + + @include borderGray(); + @include verticalAlignCenter(30%); + } + + &_date { + width: 20%; + padding: 0; + + @include borderGray(); + @include verticalAlignCenter(65%); + } + } + + &__button { + height: 30px; + width: 15%; + + margin-left: 10px; + + border-radius: 5px; + + background-color: $lightColor; + color: $darkColor; + + font-weight: 800; + + @include verticalAlignCenter(85%); + } +} + +.filter { + grid-area: filt; + position: relative; + + @include filterGridTemplate; + + &_checked { + grid-area: filt1; + margin: auto; + } + + &_deadline { + grid-area: filt2; + margin: auto; + } + + select { + margin-left: 15px; + } +} + +#tasks { + grid-area: tsks; + + background-color: white; + text-align: left; + + position: relative; + overflow: auto; + +} + +.tasks__element { + @include taskGridTemplate; + + width: 100%; + height: 40px; + + border-bottom: 1px dashed lightgray; + + //@include borderGray(dashed); + + &_checkbox { + grid-area: check; + + width: 20px; + height: 20px; + + border-radius: 5px; + + margin: auto; + } + + &_description { + grid-area: txt; + position: relative; + + margin: auto; + } + + &_date { + grid-area: dt; + position: relative; + + margin: auto; + } + + &_delete { + grid-area: del; + position: relative; + + margin: auto; + } +} + diff --git a/Anastasiya Santalova/app.css b/Anastasiya Santalova/app.css new file mode 100644 index 0000000..6e81138 --- /dev/null +++ b/Anastasiya Santalova/app.css @@ -0,0 +1,155 @@ +html { + width: 100%; + height: 100%; } + +body { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + text-align: center; + background-color: #A95B62; + color: #F5EAEA; } + +p { + margin: 0; } + +#root { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + display: grid; + grid-template-areas: "h h h" ". tt ." ". app ." ". . ." "f f f"; + grid-template-columns: 1fr 700px 1fr; + grid-template-rows: 50px 2fr 400px 1fr 40px; } + +.header { + grid-area: h; + vertical-align: middle; } + +.footer { + grid-area: f; + position: relative; + text-align: left; + font-size: 0.8em; } + .footer p { + margin: 0; + position: absolute; + top: 50%; + left: 10%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + +.todo-title { + grid-area: tt; + position: relative; + margin: 0; + font-size: 30pt; } + .todo-title h1 { + margin: 0; + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + +.todo-area { + grid-area: app; + display: grid; + grid-template-areas: "input" "filt" "tsks"; + grid-template-columns: 1fr; + grid-template-rows: 60px 40px 1fr; + background-color: #F5EAEA; + color: #A95B62; + border: 20px solid #F5EAEA; + border-radius: 15px; } + +.add-task { + grid-area: input; + position: relative; + border: 2px solid lightgrey; } + .add-task__input { + height: 30px; + border-radius: 5px; } + .add-task__input_task { + width: 45%; + padding: 0; + border: 1px solid lightgrey; + position: absolute; + top: 50%; + left: 30%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + .add-task__input_date { + width: 20%; + padding: 0; + border: 1px solid lightgrey; + position: absolute; + top: 50%; + left: 65%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + .add-task__button { + height: 30px; + width: 15%; + margin-left: 10px; + border-radius: 5px; + background-color: #F5EAEA; + color: #A95B62; + font-weight: 800; + position: absolute; + top: 50%; + left: 85%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } + +.filter { + grid-area: filt; + position: relative; + display: grid; + grid-template-areas: "filt1 filt2"; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; } + .filter_checked { + grid-area: filt1; + margin: auto; } + .filter_deadline { + grid-area: filt2; + margin: auto; } + .filter select { + margin-left: 15px; } + +#tasks { + grid-area: tsks; + background-color: white; + text-align: left; + position: relative; + overflow: auto; } + +.tasks__element { + display: grid; + grid-template-areas: "check txt dt del"; + grid-template-columns: 30px 1fr 100px 40px; + grid-template-rows: 1fr; + width: 100%; + height: 40px; + border-bottom: 1px dashed lightgray; } + .tasks__element_checkbox { + grid-area: check; + width: 20px; + height: 20px; + border-radius: 5px; + margin: auto; } + .tasks__element_description { + grid-area: txt; + position: relative; + margin: auto; } + .tasks__element_date { + grid-area: dt; + position: relative; + margin: auto; } + .tasks__element_delete { + grid-area: del; + position: relative; + margin: auto; } From 661a551bcb432b275feb041c1d63ebe2722b4293 Mon Sep 17 00:00:00 2001 From: Anastasiya Santalova Date: Tue, 30 Jul 2019 15:30:10 +0300 Subject: [PATCH 3/8] All functions added, but it works only adding tasks into task list and saving tasks after reloading --- Anastasiya Santalova/app.js | 234 ++++++++++++++++++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100644 Anastasiya Santalova/app.js diff --git a/Anastasiya Santalova/app.js b/Anastasiya Santalova/app.js new file mode 100644 index 0000000..83ab610 --- /dev/null +++ b/Anastasiya Santalova/app.js @@ -0,0 +1,234 @@ +'use strict' + +// function compareDates (date1, date2) { + +// var year1 = date1.getFullYear(); +// var year2 = date2.getFullYear(); +// var month1 = date1.getMonth(); +// var month2 = date2.getMonth(); +// var day1 = date1.getDate(); +// var day2 = date2.getDate(); + +// if (year1 === year2 && month1 === month2 && day1 === day2) { +// return "today"; +// } else if (year1 > year2 || +// (year1 === year2 && month1 > month2) || +// (year1 === year2 && month1 === month2 && day1 > day2)) { +// return "failed"; +// } else if (year1 === year2 && month1 === month2 && (day2 - day1)===1) { +// return "tomorrow"; +// } +// } + + +var list = (function (){ + + var taskList = [{id: 123, check: false, text: "drink cofee", deadline: "2019-07-30"}, + {id: 321, check: true, text: "call mom", deadline: "2019-07-29"}]; + + //localStorage.setItem('myArr', JSON.stringify(taskList)); + + console.log(localStorage.getItem('myArr')); + + return { + add: function (text,deadline) { + var newTask = {}; + + newTask.id = Date.now(); + newTask.check = false; + newTask.text = text; + newTask.deadline = deadline; + + return newTask; + }, + + push: function (newTask) { + taskList = JSON.parse(localStorage.getItem('myArr')); + taskList.push(newTask); + localStorage.setItem('myArr', JSON.stringify(taskList)); + taskList = JSON.parse(localStorage.getItem('myArr')); + console.log(localStorage.getItem('myArr')); + }, + + delete: function (id) { + taskList = JSON.parse(localStorage.getItem('myArr')); + + var ind; + + taskList.forEach(function (curr, i) { + console.log(i); + if (curr.id === id) { + ind = i; + } + }); + + taskList.splice(ind, 1); + localStorage.setItem('myArr', JSON.stringify(taskList)); + taskList = JSON.parse(localStorage.getItem('myArr')); + console.log(localStorage.getItem('myArr')); + }, + + get: function () { + taskList = JSON.parse(localStorage.getItem('myArr')); + return taskList; + }, + + show: function () { + taskList = JSON.parse(localStorage.getItem('myArr')); + var parentElem = document.getElementById('tasks'); + + while (parentElem.firstChild) { + parentElem.removeChild(parentElem.firstChild); + } + + return taskList.forEach(function(elem){ + + var div = document.createElement('div'); + var checkInput = document.createElement('input'); + var textLabel = document.createElement('label'); + var dateSpan = document.createElement('span'); + var delSpan = document.createElement('span'); + var delButton = document.createElement('button'); + + div.className = 'tasks__element'; + checkInput.className = 'tasks__element_checkbox' + checkInput.type = 'checkbox'; + textLabel.className = 'tasks__element_description'; + dateSpan.className = 'tasks__element_date'; + delSpan.className = 'tasks__element_delete'; + delButton.className = 'tasks__element_delbutton'; + delButton.type = 'button'; + delButton.id = elem.id; + + if (elem.check === false) { + checkInput.checked = false; + } else { + checkInput.checked = true; + }; + + textLabel.innerHTML = elem.text; + dateSpan.innerHTML = elem.deadline; + delButton.innerHTML = 'X'; + + parentElem.appendChild(div); + div.appendChild(checkInput); + div.appendChild(textLabel); + div.appendChild(dateSpan); + div.appendChild(delSpan); + delSpan.appendChild(delButton); + }) + }, + + filter: function (status, deadline) { + var filteredTaskList = []; + + if (status==="all") { + filteredTaskList = taskList; + } else { + taskList.forEach(function (curr) { + if (curr.status === status) { + filteredTaskList.push(curr); + } + }); + } + + var today = new Date(); + + var doubleFilteredTaskList = []; + + switch(deadline) { + case 'failed': + filteredTaskList.forEach(function (curr) { + if (compareDates(today, curr.date)==="failed") { + filteredTaskList.push(curr); + } + }); + break; + case 'today': + filteredTaskList.forEach(function (curr) { + if (compareDates(today, curr.date)==="today") { + filteredTaskList.push(curr); + } + }); + break; + case 'tomorrow': + filteredTaskList.forEach(function (curr) { + if (compareDates(today, curr.date)==="tomorrow") { + filteredTaskList.push(curr); + } + }); + break; + case 'week': + filteredTaskList.forEach(function (curr) { + if (compareDates(today, curr.date)==="week") { + filteredTaskList.push(curr); + } + }); + break; + case 'month': + filteredTaskList.forEach(function (curr) { + if (compareDates(today, curr.date)==="month") { + filteredTaskList.push(curr); + } + }); + break; + default: + doubleFilteredTaskList = filteredTaskList; + } + + return doubleFilteredTaskList; + } + }; + +})(); + +//var dd = new Date() +//var todayD = dd.getFullYear()+"-"+(dd.getMonth()+1)+"-"+dd.getDate() + +window.onload = function () { + + var addTask = document.getElementById('add-task'); + var addDate = document.getElementById('add-date'); + var addButton = document.getElementById('add-button'); + var delButton = document.getElementsByClassName('tasks__element_delbutton'); + + var delButton1 = document.getElementById('321'); + console.log(delButton1); + // console.log(delButton1.id); + + list.show(); + + addButton.onclick = function (e) { + e.preventDefault(); + if (addTask.value && addDate.value) { + var newTask = list.add(addTask.value, addDate.value); + + list.push(newTask); + list.show(); + } + };; + + + delButton.onclick = function () { + console.log(delButton.id); + list.delete(delButton.id); + list.show(); + } + + + + var filterChecked = document.getElementById('filter_checked'); + var filterDeadline = document.getElementById('filter_deadline'); + + filterChecked.onchange = function (e) { + e.preventDefault(); + list.filter(filterChecked.value); + list.show(); + } + + filterDeadline.onchange = function () { + list.filter(filterChecked.value, filterDeadline.value); + list.show(); + } + +} \ No newline at end of file From af1d6af590dd4dad2cc92c445d2448a748b1db48 Mon Sep 17 00:00:00 2001 From: Anastasiya Santalova Date: Wed, 31 Jul 2019 17:26:48 +0300 Subject: [PATCH 4/8] Small changes --- Anastasiya Santalova/app.html | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/Anastasiya Santalova/app.html b/Anastasiya Santalova/app.html index 53bba6c..9562a5d 100644 --- a/Anastasiya Santalova/app.html +++ b/Anastasiya Santalova/app.html @@ -31,28 +31,28 @@

ToDo List

- + Do/done - + + + - + Deadline - + + + + + + From 5c46b89ee02f217747051ab0f202ba3ac7e27076 Mon Sep 17 00:00:00 2001 From: Anastasiya Santalova Date: Wed, 31 Jul 2019 17:28:43 +0300 Subject: [PATCH 5/8] Improved all functions. It remains to finish minor improvements on the functional and visual parts. --- Anastasiya Santalova/app.js | 206 +++++++++++++++++++++++------------- 1 file changed, 131 insertions(+), 75 deletions(-) diff --git a/Anastasiya Santalova/app.js b/Anastasiya Santalova/app.js index 83ab610..deaf914 100644 --- a/Anastasiya Santalova/app.js +++ b/Anastasiya Santalova/app.js @@ -1,37 +1,67 @@ 'use strict' -// function compareDates (date1, date2) { - -// var year1 = date1.getFullYear(); -// var year2 = date2.getFullYear(); -// var month1 = date1.getMonth(); -// var month2 = date2.getMonth(); -// var day1 = date1.getDate(); -// var day2 = date2.getDate(); - -// if (year1 === year2 && month1 === month2 && day1 === day2) { -// return "today"; -// } else if (year1 > year2 || -// (year1 === year2 && month1 > month2) || -// (year1 === year2 && month1 === month2 && day1 > day2)) { -// return "failed"; -// } else if (year1 === year2 && month1 === month2 && (day2 - day1)===1) { -// return "tomorrow"; -// } -// } - +function compareDates (date1, date2) { + + var date2Arr = date2.split("-"); + var year1 = date1.getFullYear(); + var year2 = +date2Arr[0]; + var month1 = date1.getMonth()+1; + var month2 = +date2Arr[1]; + var day1 = date1.getDate(); + var day2 = +date2Arr[2]; + console.log(day1); + console.log(day2); + console.log(month1); + console.log(month2); + console.log(year1); + console.log(year2); + + if (year1 === year2 && month1 === month2 && day1 === day2) { + console.log("today"); + return "today"; + } else if (year1 > year2 || + (year1 === year2 && month1 > month2) || + (year1 === year2 && month1 === month2 && day1 > day2)) { + console.log("failed"); + return "failed"; + } else if (year1 === year2 && month1 === month2 && (day2 - day1)===1) { + console.log("tomorrow"); + return "tomorrow"; + } +} + +function toLocalStorage (list) { + localStorage.setItem('myArr', JSON.stringify(list)); +} + +function delButtonOnclick () { + var delButton = document.getElementsByClassName('tasks__element_delbutton'); -var list = (function (){ + for (var i=0; i Date: Thu, 1 Aug 2019 13:12:21 +0300 Subject: [PATCH 6/8] Small changes --- Anastasiya Santalova/app.html | 1 - 1 file changed, 1 deletion(-) diff --git a/Anastasiya Santalova/app.html b/Anastasiya Santalova/app.html index 9562a5d..dbc640d 100644 --- a/Anastasiya Santalova/app.html +++ b/Anastasiya Santalova/app.html @@ -51,7 +51,6 @@

ToDo List

- From 52a61f909bc2289cc35039a0739c628866dd988b Mon Sep 17 00:00:00 2001 From: Anastasiya Santalova Date: Thu, 1 Aug 2019 13:13:14 +0300 Subject: [PATCH 7/8] All functions work. Comments added. --- Anastasiya Santalova/app.js | 253 +++++++++++++++++++++++------------- 1 file changed, 163 insertions(+), 90 deletions(-) diff --git a/Anastasiya Santalova/app.js b/Anastasiya Santalova/app.js index deaf914..308c911 100644 --- a/Anastasiya Santalova/app.js +++ b/Anastasiya Santalova/app.js @@ -1,52 +1,18 @@ 'use strict' -function compareDates (date1, date2) { - - var date2Arr = date2.split("-"); - var year1 = date1.getFullYear(); - var year2 = +date2Arr[0]; - var month1 = date1.getMonth()+1; - var month2 = +date2Arr[1]; - var day1 = date1.getDate(); - var day2 = +date2Arr[2]; - console.log(day1); - console.log(day2); - console.log(month1); - console.log(month2); - console.log(year1); - console.log(year2); - - if (year1 === year2 && month1 === month2 && day1 === day2) { - console.log("today"); - return "today"; - } else if (year1 > year2 || - (year1 === year2 && month1 > month2) || - (year1 === year2 && month1 === month2 && day1 > day2)) { - console.log("failed"); - return "failed"; - } else if (year1 === year2 && month1 === month2 && (day2 - day1)===1) { - console.log("tomorrow"); - return "tomorrow"; - } -} +//********************** MAIN FUNCTION ********************** -function toLocalStorage (list) { - localStorage.setItem('myArr', JSON.stringify(list)); -} +// Self-invoking function to save an array of data in a closure. +// There are 7 methods included: -function delButtonOnclick () { - var delButton = document.getElementsByClassName('tasks__element_delbutton'); +// * CREATE: creates new task as an object +// * PUSH: adds task into taskList array +// * DELETE: delete task from array +// * SHOW: displays task list on the screen +// * FILTERCHECK: filters tasks by the completed / not completed parameter +// * FILTERDEADLINE: filters tasks by deadline parameter +// * CHANGESTAT: change and save task status (completed / not completed) - for (var i=0; i deadlineYear || + (todayYear === deadlineYear && todayMonth > deadlineMonth) || + (todayYear === deadlineYear && todayMonth === deadlineMonth && todayDay > deadlineDay)) { + + var arr2 = ["failed"]; + + if (todayYear === deadlineYear && todayMonth === deadlineMonth) { + arr2.push("month"); + } + return arr2; + + } else if (tomorrowYear === deadlineYear && + tomorrowMonth === deadlineMonth && + tomorrowDay === deadlineDay) { + + var arr3 = ["tomorrow"]; + if (todayMonth === deadlineMonth) { + arr3.push("month"); + } + return arr3; + + } else if (todayYear === deadlineYear && todayMonth === deadlineMonth) { + + var arr4 = ["month"]; + return arr4; + + } else { + + var arr5 = [""]; + return arr5; + + } +} + + + +// *************** ONCLICK FUNCTIONS *************** + + +function addButtonOnclick () { var addTask = document.getElementById('add-task'); var addDate = document.getElementById('add-date'); var addButton = document.getElementById('add-button'); - - var checkBox = document.getElementsByClassName('tasks__element_checkbox'); - - list.show(); addButton.onclick = function (e) { e.preventDefault(); @@ -246,45 +285,79 @@ window.onload = function () { } };; - delButtonOnclick(); - +} + +function delButtonOnclick () { + + var delButton = document.getElementsByClassName('tasks__element_delbutton'); + for (var i=0; i Date: Sat, 31 Aug 2019 21:01:24 +0300 Subject: [PATCH 8/8] Small changes --- Anastasiya Santalova/SCSS/app.scss | 2 - Anastasiya Santalova/app.html | 4 +- Anastasiya Santalova/app.js | 110 ++++++++++++++--------------- 3 files changed, 54 insertions(+), 62 deletions(-) diff --git a/Anastasiya Santalova/SCSS/app.scss b/Anastasiya Santalova/SCSS/app.scss index a05977d..21b4b58 100644 --- a/Anastasiya Santalova/SCSS/app.scss +++ b/Anastasiya Santalova/SCSS/app.scss @@ -158,8 +158,6 @@ p { border-bottom: 1px dashed lightgray; - //@include borderGray(dashed); - &_checkbox { grid-area: check; diff --git a/Anastasiya Santalova/app.html b/Anastasiya Santalova/app.html index dbc640d..a9da8df 100644 --- a/Anastasiya Santalova/app.html +++ b/Anastasiya Santalova/app.html @@ -14,7 +14,7 @@
- Welcome +
@@ -38,7 +38,7 @@

ToDo List

diff --git a/Anastasiya Santalova/app.js b/Anastasiya Santalova/app.js index 308c911..3cfda4d 100644 --- a/Anastasiya Santalova/app.js +++ b/Anastasiya Santalova/app.js @@ -14,12 +14,12 @@ // * CHANGESTAT: change and save task status (completed / not completed) -var list = (function (){ +var list = (function() { var taskList; var localTaskList = JSON.parse(localStorage.getItem('myArr')); - if (localTaskList.length == 0) { + if (!localTaskList || localTaskList.length === 0) { taskList = [{id: 123, check: false, text: "drink cofee", deadline: "2019-07-30"}, {id: 321, check: true, text: "call mom", deadline: "2019-07-29"}]; } else { @@ -27,7 +27,7 @@ var list = (function (){ } return { - create: function (text,deadline) { + create: function(text, deadline) { var newTask = {}; newTask.id = Date.now(); @@ -38,25 +38,24 @@ var list = (function (){ return newTask; }, - push: function (newTask) { + push: function(newTask) { taskList.push(newTask); toLocalStorage(taskList); }, delete: function (id) { - var ind; - taskList.forEach(function (curr, i) { - if (curr.id == id) { - ind = i; - } - }); + taskList = taskList.filter(task => task.id !== +id); - taskList.splice(ind, 1); toLocalStorage(taskList); }, - show: function (list = taskList) { + show: function(list) { + + if (!list) { + list = taskList; + }; + var parentElem = document.getElementById('tasks'); // clear task-list @@ -65,7 +64,7 @@ var list = (function (){ } // show updated task-list - return list.forEach(function(elem){ + return list.forEach(function(elem) { var div = document.createElement('div'); var checkInput = document.createElement('input'); @@ -85,11 +84,7 @@ var list = (function (){ delButton.type = 'button'; delButton.id = elem.id + "-2"; - if (elem.check === false) { - checkInput.checked = false; - } else { - checkInput.checked = true; - }; + checkInput.checked = elem.check; textLabel.innerHTML = elem.text; dateSpan.innerHTML = elem.deadline; @@ -102,24 +97,24 @@ var list = (function (){ div.appendChild(delSpan); delSpan.appendChild(delButton); - delButtonOnclick(); + delButtonOnŠ”lick(); checkboxOnclick(); }) }, - filterCheck: function (check) { + filterCheck: function(check) { var filteredTaskList = []; - if (check==="all") { + if (check === "all") { return list.show(); - } else if (check==='do') { - taskList.forEach(function (curr) { - if (curr.check === false) { + } else if (check === 'do') { + taskList.forEach(function(curr) { + if (!curr.check) { filteredTaskList.push(curr); } }); } else { - taskList.forEach(function (curr) { + taskList.forEach(function(curr) { if (curr.check) { filteredTaskList.push(curr); } @@ -128,47 +123,46 @@ var list = (function (){ return list.show(filteredTaskList); }, - filterDeadline: function (deadline) { + filterDeadline: function(deadline) { var filteredTaskList = []; - switch(deadline) { + switch (deadline) { case 'failed': - taskList.forEach(function (curr) { - if (compareDates(curr.deadline)[0]==="failed" || - compareDates(curr.deadline)[1]==="failed") { + taskList.forEach(function(curr) { + if (compareDates(curr.deadline)[0] === "failed" || + compareDates(curr.deadline)[1] === "failed") { filteredTaskList.push(curr); } }); break; case 'today': - taskList.forEach(function (curr) { - console.log(compareDates(curr.deadline)); - if (compareDates(curr.deadline)[0]==="today" || - compareDates(curr.deadline)[1]=== "today") { + taskList.forEach(function(curr) { + if (compareDates(curr.deadline)[0] === "today" || + compareDates(curr.deadline)[1] === "today") { filteredTaskList.push(curr); } }); break; case 'tomorrow': - taskList.forEach(function (curr) { - if (compareDates(curr.deadline)[0]==="tomorrow" || - compareDates(curr.deadline)[1]==="tomorrow") { + taskList.forEach(function(curr) { + if (compareDates(curr.deadline)[0] === "tomorrow" || + compareDates(curr.deadline)[1] === "tomorrow") { filteredTaskList.push(curr); } }); break; case 'week': - taskList.forEach(function (curr) { - if (compareDates(curr.deadline)[0]==="week" || - compareDates(curr.deadline)[1]==="week") { + taskList.forEach(function(curr) { + if (compareDates(curr.deadline)[0] === "week" || + compareDates(curr.deadline)[1] === "week") { filteredTaskList.push(curr); } }); break; case 'month': - taskList.forEach(function (curr) { - if (compareDates(curr.deadline)[0]==="month" || - compareDates(curr.deadline)[1]==="month") { + taskList.forEach(function(curr) { + if (compareDates(curr.deadline)[0] === "month" || + compareDates(curr.deadline)[1] === "month") { filteredTaskList.push(curr); } }); @@ -181,7 +175,7 @@ var list = (function (){ }, changestat: function(id) { - taskList.forEach(function (curr) { + taskList.forEach(function(curr) { if (curr.id === id) { curr.check = !curr.check; } @@ -214,11 +208,11 @@ function compareDates (deadline) { var dl = Date.parse(deadline); var deadlineDate = new Date(dl); var deadlineYear = deadlineDate.getFullYear(); - var deadlineMonth = deadlineDate.getMonth();; + var deadlineMonth = deadlineDate.getMonth(); var deadlineDay = deadlineDate.getDate(); var tomorrow = new Date(); - tomorrow.setDate(today.getDate()+1); + tomorrow.setDate(today.getDate() + 1); var tomorrowYear = tomorrow.getFullYear(); var tomorrowMonth = tomorrow.getMonth(); var tomorrowDay = tomorrow.getDate(); @@ -269,7 +263,7 @@ function compareDates (deadline) { // *************** ONCLICK FUNCTIONS *************** -function addButtonOnclick () { +function addButtonOnclick() { var addTask = document.getElementById('add-task'); var addDate = document.getElementById('add-date'); @@ -283,16 +277,16 @@ function addButtonOnclick () { list.push(newTask); list.show(); } - };; + }; } -function delButtonOnclick () { +function delButtonOnŠ”lick() { var delButton = document.getElementsByClassName('tasks__element_delbutton'); - for (var i=0; i