diff --git a/Kirill Zhuck/index.html b/Kirill Zhuck/index.html
new file mode 100644
index 0000000..4a8bab9
--- /dev/null
+++ b/Kirill Zhuck/index.html
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Kirill Zhuck/script.js b/Kirill Zhuck/script.js
new file mode 100644
index 0000000..a33eb51
--- /dev/null
+++ b/Kirill Zhuck/script.js
@@ -0,0 +1,120 @@
+(function () {
+ let tasks = {
+ current: [{
+ taskId: doId(),
+ taskContent: "Buy products",
+ taskState: "current"
+ }, {
+ taskId: doId(),
+ taskContent: "Build a house",
+ taskState: "current"
+ }],
+ done: [{
+ taskId: doId(),
+ taskContent: "Burn everything to hell",
+ taskState: "done"
+ }],
+ get allTasks() {
+ return this.current.length + this.done.length;
+ },
+ get doneTasks() {
+ return this.done.length;
+ }
+ },
+ tasksList = document.getElementById("app__list"),
+ allTasks = document.getElementById("js-all-tasks"),
+ doneTasks = document.getElementById("js-done-tasks"),
+ addNewTaskField = document.getElementById("app__task-new");
+
+ function INIT() {
+ for (const item of tasks.current) {
+ createItem(item);
+ }
+ for (const item of tasks.done) {
+ createItem(item);
+ }
+ allTasks.innerHTML = tasks.allTasks;
+ doneTasks.innerHTML = tasks.doneTasks;
+ }
+
+ function createItem(el) {
+ let item = document.createElement('li'),
+ remove = document.createElement('div'),
+ text = document.createElement('span');
+ remove.classList.add('app__list-remove');
+ remove.addEventListener('click', function () {
+ removeTask(this);
+ });
+ text.classList.add('app__list-text');
+ text.addEventListener('click', function () {
+ doneTask(this);
+ });
+ switch (el.taskState) {
+ case 'done':
+ item.classList.add('app__list-item', 'app__list-item--done');
+ break;
+ default:
+ item.classList.add('app__list-item');
+ }
+ item.id = el.taskId;
+ text.innerHTML = el.taskContent;
+ item.appendChild(text);
+ item.appendChild(remove);
+ tasksList.appendChild(item);
+ }
+
+ function doneTask(el) {
+ let elem = el.parentNode,
+ elemId = elem.id,
+ elemState = elem.classList.contains('app__list-item--done');
+
+ const [itemsRemove, itemsAdd] = elemState ? [tasks.done, tasks.current] : [tasks.current, tasks.done];
+ elem.classList.toggle('app__list-item--done');
+ for (const [index, item] of itemsRemove.entries()) {
+ if (item.taskId !== elemId) continue;
+ itemsAdd.push(item);
+ itemsRemove.splice(index, 1);
+ }
+ doneTasks.innerHTML = tasks.doneTasks;
+ }
+
+ function removeTask(el) {
+ let removeEl = el.parentNode,
+ removeElId = removeEl.id,
+ removeElState = removeEl.classList.contains('app__list-item--done');
+
+ removeEl.remove();
+ const items = removeElState ? tasks.done : tasks.current;
+ for (const [index, item] of items.entries()) {
+ if (item.taskId !== removeElId) continue;
+ items.splice(index, 1);
+ }
+ allTasks.innerHTML = tasks.allTasks;
+ doneTasks.innerHTML = tasks.doneTasks;
+ }
+
+ function addTasks(str) {
+ let elem = {
+ taskId: doId(),
+ taskContent: str,
+ taskState: "current"
+ };
+ tasks.current.push(elem);
+ createItem(elem);
+ allTasks.innerHTML = tasks.allTasks;
+ }
+
+ function doId() {
+ return Math.random().toString(36).substr(2, 16);
+ }
+
+ INIT();
+
+ addNewTaskField.addEventListener('keyup',function (e) {
+ if(e.keyCode === 13) {
+ addTasks(this.value);
+ this.value = "";
+ }
+ })
+
+})();
\ No newline at end of file
diff --git a/Kirill Zhuck/styles.css b/Kirill Zhuck/styles.css
new file mode 100644
index 0000000..ae8ae15
--- /dev/null
+++ b/Kirill Zhuck/styles.css
@@ -0,0 +1,146 @@
+html,
+body {
+ height: 100%;
+}
+
+body {
+ background-image: url("./tristan-gevaux-ATtLrdUekdI-unsplash.jpg") ;
+ background-size: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+ul,
+li {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+
+.wrapper {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+}
+
+.app {
+ box-shadow: 0 0 1px 0 black;
+ display: flex;
+ flex-direction: column;
+ max-width: 500px;
+ width: 100%;
+}
+
+.app__header {
+ background-color: #ccc;
+}
+
+.app__title {
+ font-size: 20px;
+ font-weight: 600;
+ padding: 8px 16px;
+ text-align: center;
+}
+
+.app__info {
+ display: flex;
+ padding: 8px 16px;
+}
+
+.app__info-item {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.app__body {
+ background-color: #ddd;
+}
+
+.app__footer {
+ background-color: #ccc;
+ padding: 8px 16px;
+}
+
+.app__list-item {
+ align-items: center;
+ display: flex;
+ position: relative;
+}
+
+.app__list-item:hover {
+ background-color: #fff;
+}
+
+.app__list-item:hover .app__list-remove {
+ opacity: 0.5;
+}
+
+.app__list-item:hover .app__list-remove:hover {
+ opacity: 1;
+}
+
+.app__list-item.app__list-item--done {
+ background-color: #8fc579;
+}
+
+.app__list-item.app__list-item--done .app__list-text {
+ text-decoration: line-through;
+}
+
+.app__list-text {
+ cursor: pointer;
+ flex: 1;
+ line-height: 24px;
+ padding: 8px 16px;
+}
+
+.app__list-remove {
+ border: 1px solid red;
+ border-radius: 50%;
+ cursor: pointer;
+ height: 32px;
+ fles-shrink: 0;
+ margin-left: auto;
+ margin-right: 5px;
+ opacity: 0;
+ padding: 0 8px;
+ transform: rotate(45deg);
+ transition: all linear 0.3s;
+ width: 32px;
+}
+
+.app__list-remove:before, .app__list-remove:after {
+ content: "";
+ background-color: red;
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.app__list-remove:before {
+ height: 3px;
+ width: 20px;
+}
+
+.app__list-remove:after {
+ height: 20px;
+ width: 3px;
+}
+
+.app__task-new {
+ border: 0;
+ line-height: 40px;
+ min-height: 40px;
+ padding: 0 8px;
+ width: 100%;
+}
+
diff --git a/Kirill Zhuck/styles.css.map b/Kirill Zhuck/styles.css.map
new file mode 100644
index 0000000..bb2cbe7
--- /dev/null
+++ b/Kirill Zhuck/styles.css.map
@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAEA;IACK;EACH,MAAM,EAAE,IAAI;;AAGd,IAAK;EACH,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGZ,CAAE;EACA,UAAU,EAAE,UAAU;;AAGxB;EACG;EACD,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,eAAe,EAAE,IAAI;;AAGvB,QAAS;EACP,WAAW,EAAE,MAAM;EACnB,gBAAgB,EAAE,IAAI;EACtB,OAAO,EAAE,IAAI;EACb,eAAe,EAAE,MAAM;EACvB,MAAM,EAAE,IAAI;;AAGd,IAAK;EACH,UAAU,EAAE,eAA0B;EACtC,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,SAAS,EAlCC,KAAK;EAmCf,KAAK,EAAE,IAAI;EACX,YAAU;IACR,gBAAgB,EAAE,IAAI;EAExB,WAAS;IACP,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,GAAG;IAChB,OAAO,EAAE,QAA6B;IACtC,UAAU,EAAE,MAAM;EAEpB,UAAQ;IACN,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAA6B;IACtC,eAAO;MACL,WAAW,EAAE,MAAM;MACnB,OAAO,EAAE,IAAI;MACb,cAAc,EAAE,MAAM;MACtB,IAAI,EAAE,CAAC;EAGX,UAAQ;IACN,gBAAgB,EAAE,IAAI;EAExB,YAAU;IACR,gBAAgB,EAAE,IAAI;IACtB,OAAO,EAAE,QAA6B;EAGtC,eAAO;IACL,WAAW,EAAE,MAAM;IACnB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,QAAQ;IAClB,qBAAQ;MACN,gBAAgB,EAAE,IAAI;MACtB,uCAAkB;QAChB,OAAO,EAAE,GAAG;QACZ,6CAAQ;UACN,OAAO,EAAE,CAAC;IAIhB,oCAAuB;MACrB,gBAAgB,EAAE,OAAO;MACzB,oDAAgB;QACd,eAAe,EAAE,YAAY;EAInC,eAAO;IACL,MAAM,EAAE,OAAO;IACf,IAAI,EAAE,CAAC;IACP,WAAW,EAAE,IAAI;IACjB,OAAO,EAAE,QAA6B;EAExC,iBAAS;IACP,MAAM,EAAE,aAAa;IACrB,aAAa,EAAE,GAAG;IAClB,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,IAAgB;IACxB,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,IAAI;IACjB,YAAY,EAAE,GAAG;IACjB,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,KAAc;IACvB,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE,eAAe;IAC3B,KAAK,EAAE,IAAgB;IACvB,iDACQ;MACN,OAAO,EAAE,EAAE;MACX,gBAAgB,EAAE,GAAG;MACrB,OAAO,EAAE,KAAK;MACd,IAAI,EAAE,GAAG;MACT,QAAQ,EAAE,QAAQ;MAClB,GAAG,EAAE,GAAG;MACR,SAAS,EAAE,qBAAqB;IAElC,wBAAS;MACP,MAAM,EAAE,GAAG;MACX,KAAK,EAAE,IAAkB;IAE3B,uBAAQ;MACN,MAAM,EAAE,IAAkB;MAC1B,KAAK,EAAE,GAAG;EAIhB,cAAY;IACV,MAAM,EAAE,CAAC;IACT,WAAW,EAAE,IAAI;IACjB,UAAU,EAAE,IAAI;IAChB,OAAO,EAAE,KAAc;IACvB,KAAK,EAAE,IAAI",
+"sources": ["styles.scss"],
+"names": [],
+"file": "styles.css"
+}
\ No newline at end of file
diff --git a/Kirill Zhuck/styles.scss b/Kirill Zhuck/styles.scss
new file mode 100644
index 0000000..ac4e0c3
--- /dev/null
+++ b/Kirill Zhuck/styles.scss
@@ -0,0 +1,131 @@
+$base-gutter: 8px;
+$app-width: 500px;
+html,
+body {
+ height: 100%;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+ul,
+li {
+ padding: 0;
+ margin: 0;
+ list-style-type: none;
+}
+
+.wrapper {
+ align-items: center;
+ background-color: #000;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+}
+
+.app {
+ box-shadow: 0 0 1px 0 rgba(0, 0, 0, 1);
+ display: flex;
+ flex-direction: column;
+ max-width: $app-width;
+ width: 100%;
+ &__header {
+ background-color: #ccc;
+ }
+ &__title {
+ font-size: 20px;
+ font-weight: 600;
+ padding: $base-gutter $base-gutter * 2;
+ text-align: center;
+ }
+ &__info {
+ display: flex;
+ padding: $base-gutter $base-gutter * 2;
+ &-item {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ }
+ }
+ &__body {
+ background-color: #ddd;
+ }
+ &__footer {
+ background-color: #ccc;
+ padding: $base-gutter $base-gutter * 2;
+ }
+ &__list {
+ &-item {
+ align-items: center;
+ display: flex;
+ position: relative;
+ &:hover {
+ background-color: #fff;
+ .app__list-remove {
+ opacity: 0.5;
+ &:hover {
+ opacity: 1;
+ }
+ }
+ }
+ &.app__list-item--done {
+ background-color: #8fc579;
+ .app__list-text {
+ text-decoration: line-through;
+ }
+ }
+ }
+ &-text {
+ cursor: pointer;
+ flex: 1;
+ line-height: 24px;
+ padding: $base-gutter $base-gutter * 2;
+ }
+ &-remove {
+ border: 1px solid red;
+ border-radius: 50%;
+ cursor: pointer;
+ height: $base-gutter * 4;
+ fles-shrink: 0;
+ margin-left: auto;
+ margin-right: 5px;
+ opacity: 0;
+ padding: 0 $base-gutter;
+ transform: rotate(45deg);
+ transition: all linear 0.3s;
+ width: $base-gutter * 4;
+ &:before,
+ &:after {
+ content: "";
+ background-color: red;
+ display: block;
+ left: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ &:before {
+ height: 3px;
+ width: $base-gutter * 2.5;
+ }
+ &:after {
+ height: $base-gutter * 2.5;
+ width: 3px;
+ }
+ }
+ }
+ &__task-new {
+ border: 0;
+ line-height: 40px;
+ min-height: 40px;
+ padding: 0 $base-gutter;
+ width: 100%;
+ }
+}
diff --git a/Kirill Zhuck/tristan-gevaux-ATtLrdUekdI-unsplash.jpg b/Kirill Zhuck/tristan-gevaux-ATtLrdUekdI-unsplash.jpg
new file mode 100644
index 0000000..5dd2698
Binary files /dev/null and b/Kirill Zhuck/tristan-gevaux-ATtLrdUekdI-unsplash.jpg differ