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..21b4b58 --- /dev/null +++ b/Anastasiya Santalova/SCSS/app.scss @@ -0,0 +1,193 @@ +@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; + + &_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; } diff --git a/Anastasiya Santalova/app.html b/Anastasiya Santalova/app.html new file mode 100644 index 0000000..a9da8df --- /dev/null +++ b/Anastasiya Santalova/app.html @@ -0,0 +1,77 @@ + + + + + + + + ToDo List / Santalova + + + + + +
+ +
+ +
+ +
+

ToDo List

+
+ +
+ +
+ + + +
+ +
+ + + + Do/done + + + + + + + Deadline + + + + +
+ +
+ + + +
+ +
+ + + +
+ + + + + \ No newline at end of file diff --git a/Anastasiya Santalova/app.js b/Anastasiya Santalova/app.js new file mode 100644 index 0000000..3cfda4d --- /dev/null +++ b/Anastasiya Santalova/app.js @@ -0,0 +1,357 @@ +'use strict' + +//********************** MAIN FUNCTION ********************** + +// Self-invoking function to save an array of data in a closure. +// There are 7 methods included: + +// * 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) + + +var list = (function() { + + var taskList; + var localTaskList = JSON.parse(localStorage.getItem('myArr')); + + 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 { + taskList = localTaskList; + } + + return { + create: function(text, deadline) { + var newTask = {}; + + newTask.id = Date.now(); + newTask.check = false; + newTask.text = text; + newTask.deadline = deadline; + + return newTask; + }, + + push: function(newTask) { + taskList.push(newTask); + toLocalStorage(taskList); + }, + + delete: function (id) { + + taskList = taskList.filter(task => task.id !== +id); + + toLocalStorage(taskList); + }, + + show: function(list) { + + if (!list) { + list = taskList; + }; + + var parentElem = document.getElementById('tasks'); + + // clear task-list + while (parentElem.firstChild) { + parentElem.removeChild(parentElem.firstChild); + } + + // show updated task-list + return list.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'; + checkInput.id = elem.id + "-1"; + 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 + "-2"; + + checkInput.checked = elem.check; + + 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); + + delButtonOnŠ”lick(); + checkboxOnclick(); + }) + }, + + filterCheck: function(check) { + var filteredTaskList = []; + + if (check === "all") { + return list.show(); + } else if (check === 'do') { + taskList.forEach(function(curr) { + if (!curr.check) { + filteredTaskList.push(curr); + } + }); + } else { + taskList.forEach(function(curr) { + if (curr.check) { + filteredTaskList.push(curr); + } + }); + } + return list.show(filteredTaskList); + }, + + filterDeadline: function(deadline) { + var filteredTaskList = []; + + switch (deadline) { + case '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) { + 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") { + filteredTaskList.push(curr); + } + }); + break; + case '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") { + filteredTaskList.push(curr); + } + }); + break; + default: + filteredTaskList = taskList; + } + + return list.show(filteredTaskList); + }, + + changestat: function(id) { + taskList.forEach(function(curr) { + if (curr.id === id) { + curr.check = !curr.check; + } + }); + toLocalStorage(taskList); + } + }; + +})(); + + +//************** HELPER FUNCTION FOR ADDING TASK LIST TO LOCALSTORAGE ************** + +function toLocalStorage (list) { + localStorage.setItem('myArr', JSON.stringify(list)); +} + + +//********************** HELPER FUNCTION FOR LIST.FILTERDEADLINE ********************** + +function compareDates (deadline) { + + //setting variables for TODAY, TOMORROW and DEADLINE dates + + var today = new Date(); + var todayYear = today.getFullYear(); + var todayMonth = today.getMonth(); + var todayDay = today.getDate(); + + var dl = Date.parse(deadline); + var deadlineDate = new Date(dl); + var deadlineYear = deadlineDate.getFullYear(); + var deadlineMonth = deadlineDate.getMonth(); + var deadlineDay = deadlineDate.getDate(); + + var tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + var tomorrowYear = tomorrow.getFullYear(); + var tomorrowMonth = tomorrow.getMonth(); + var tomorrowDay = tomorrow.getDate(); + + //comparing deadline with current date and adding special attributes into array + + if (todayYear === deadlineYear && todayMonth === deadlineMonth && todayDay === deadlineDay) { + + var arr1 = ["today", "month"]; + return arr1; + + } else if (todayYear > 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'); + + addButton.onclick = function (e) { + e.preventDefault(); + if (addTask.value && addDate.value) { + var newTask = list.create(addTask.value, addDate.value); + + list.push(newTask); + list.show(); + } + }; + +} + +function delButtonOnŠ”lick() { + + var delButton = document.getElementsByClassName('tasks__element_delbutton'); + + for (var i = 0; i < delButton.length; i++) { + delButton[i].onclick = function(e) { + var but = this.getAttribute('id'); + var butArr = but.split("-"); + + e.preventDefault(); + list.delete(butArr[0]); + list.show(); + } + } + +} + +function checkboxOnclick () { + + var checkBox = document.getElementsByClassName('tasks__element_checkbox'); + + for (var i = 0; i < checkBox.length; i++) { + checkBox[i].onclick = function(e) { + var check = this.getAttribute('id'); + var checkArr = check.split("-"); + + e.preventDefault(); + list.changestat(+checkArr[0]); + list.show(); + } + } + +} + +function filterCheckedOnchange () { + + var filterChecked = document.getElementById('filter_checked'); + + filterChecked.onchange = function(e) { + e.preventDefault(); + + list.filterCheck(filterChecked.value); + } + +} + +function filterDeadlineOnchange() { + + var filterDeadline = document.getElementById('filter_deadline'); + + filterDeadline.onchange = function(e) { + e.preventDefault(); + + list.filterDeadline(filterDeadline.value); + } + +} + + + +//***************** CALLING UP FUNCTIONS ON LOADING PAGE ***************** + + +window.onload = function() { + + list.show(); + + addButtonOnclick(); + delButtonOnŠ”lick(); + checkboxOnclick(); + filterCheckedOnchange(); + filterDeadlineOnchange(); + +} \ No newline at end of file