From cee41822e1a250d2387d639709b52135c78d7e3e Mon Sep 17 00:00:00 2001 From: Tatiana Date: Fri, 4 May 2018 19:40:22 +0300 Subject: [PATCH 1/2] last task witout extend --- index.html | 20 ++++ script.js | 302 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 67 ++++++++++++ 3 files changed, 389 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..29a883e --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + Document + + + + + + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ba9fc57 --- /dev/null +++ b/script.js @@ -0,0 +1,302 @@ +class Worker { + constructor(name, surname, rate, days){ + this.name = name; + this.surname = surname; + this.rate = rate; + this.days = days; + } + get salary(){ + return this.rate * this.days; + } +} +// let worker = new Worker('name', 'surname', 9, 30 ); +// console.log(worker.salary); + + +// Task2 and Task3 + +function Worker2(name, surname, rate, days) { + + let name2 = name; + let surname2 = surname; + let rate2 = rate; + let days2 = days; + + this.getName= function(){ + return name2; + } + this.getSurname = function(){ + return surname2; + } + this.getRate = function(){ + return rate2; + } + this.setRate = function(value){ + rate2 = value; + } + this.getDays = function(){ + return days2; + } + this.setDays = function(value){ + days2 = value; + } + this.getSalary = function(){ + return rate2 * days2; + } +} +// let worker2 = new Worker2('name', 'surname', 9, 30 ); +// console.log(worker2.setRate(15)); + + +// Task4 +class MyString { + constructor(){ + + this.newStr = ''; + + } + + reverse(str){ + for (let i = str.length - 1; i >= 0; i--){ + this.newStr += str[i] + + } + return this.newStr; + + } + ucFirst(str){ + this.newStr= str[0].toUpperCase() + str.slice(1) + return this.newStr; + + } + ucWord(str){ + + for (let i = 0; i < str.length; i++){ + + if ((str[i-1] == ' ' ) || (i == 0)){ + + this.newStr += str[i].toUpperCase(); + }else{ + this.newStr += str[i]; + } + } + return this.newStr; + } +} +// let str = new MyString(); +// console.log(str.ucWord('str str str')) + + + +// Task5 +class User{ + constructor(name, surname, year){ + this.name = name; + this.surname = surname; + this.year = year; + } + get fullName(){ + return `${this.name} ${this.surname}` + } +} + + +class Student extends User{ + constructor(...arg){ + super(...arg) + } + get course() { + let nowYear = new Date().getFullYear(); + + if(nowYear == this.year){ + return 1 + }else if (((nowYear - this.year) > 6) || ((nowYear - this.year) < 0)){ + return 'incorrect value' + }else{ + return nowYear - this.year + } + + + } + +} +// let student = new Student('studName', 'studSern', '2018'); +// console.log(student.fullName) + +// Task6 +let amount = 0; + +function fun() { + + return ++amount + +} +// console.log(fun()) + +// Task7 + +class DOMINIT { + constructor(options){ + + this.ctrl = options.ctrl; + this.shift = options.shift; + this.parentElement = options.parentElement; + this.arrOfItems = options.arrOfItems; + this.onCreate = options.onCreate; + this.onDelete = options.onDelete; + + this.id = 1; + this.container = document.createElement('div'); + } + init(){ + this.container.classList.add('container'); + this.container.classList.add('d-flex'); + this.container.classList.add('justify-content-center'); + + document.body.insertAdjacentElement("afterbegin", this.container); + this.createCard() + } + createCard(){ + + this.card = document.createElement('div'); + this.card.classList.add('col-6'); + this.card.classList.add('card'); + let header = document.createElement('div'); + header.innerHTML = '

list

' + this.card.appendChild(header) + let body = document.createElement('div'); + body.innerHTML = '
' + + '
' + this.card.appendChild(body); + + this.list = document.createElement(this.parentElement); + this.list.classList.add('to-do-list'); + + this.container.appendChild(this.card); + document.querySelector('.card-body').insertAdjacentElement("afterbegin", this.list); + + for (let i = 0; i < this.arrOfItems.length; i++){ + this.buildLI(this.arrOfItems[i]) + } + + this.addNewTask(); + this.removeItem(); + + + } + addNewTask(){ + this.parentBlock = document.querySelector('.block-extend-item-list'); + this.addBtn = this.parentBlock.querySelector('.add-new-item'); + this.addBtn.addEventListener('click', () => { + this.inputContent = this.parentBlock.querySelector('input').value; + this.parentBlock.querySelector('input').value = ''; + + this.buildLI(this.inputContent); + this.onCreate() + }) + } + + buildLI(inputContent){ + let list = document.querySelector('.to-do-list'); + let newLi = document.createElement('li'); + newLi.classList.add('list-item'); + newLi.id = this.id; + newLi.innerHTML = ` ${inputContent} `; + list.appendChild(newLi); + + this.clickAm = 0; + + newLi.addEventListener('click', (e) => { + let targetLi = e.target.closest('li'), + removeItemBtn = document.querySelector('.remove-item'), + allLi = list.children; + + if (!(this.ctrl) || ((this.ctrl) && (!event.ctrlKey))){ + for(let i = 0; i < allLi.length; i++){ + allLi[i].classList.remove('active') + } + } + targetLi.classList.toggle('active'); + + if ((this.shift) && (event.shiftKey)){ + + if (!(this.clickAm%2)) { + this.firstPicked = targetLi.id + }else{ + this.secondPicked = targetLi.id; + + if(this.firstPicked > this.secondPicked){ + + for(let i = this.secondPicked; i <= this.firstPicked; i++) { + let element = document.getElementById(i); + if (element){ + element.classList.add('active') + } + } + }else { + + for(let i = this.firstPicked; i <= this.secondPicked; i++) { + let element = document.getElementById(i) + if (element){ + element.classList.add('active') + } + } + } + } + this.clickAm++; + } + let containAct = [].slice.call(allLi).some( (li) => li.classList.contains('active')); + + if (containAct){ + removeItemBtn.classList.remove('d-none'); + }else{ + removeItemBtn.classList.add('d-none'); + } + }) + this.id++; + } + + removeItem(){ + let removeItemBtn = document.querySelector('.remove-item'); + removeItemBtn.addEventListener('click', () => { + let li = document.querySelectorAll('li.active'), + conf = confirm('Are you sure?'); + + if (conf){ + for (let i = 0; i < li.length; i++){ + li[i].remove(); + } + removeItemBtn.classList.add('d-none') + } + this.onDelete(); + }); + } +} + + +const options = { + ctrl: false, // если true - позволить выбор нескольких элементов списка с нажатой кнопкой ctrl + shift: true , + parentElement: 'ul', // родительский элемент списка ul, ol, div - чего душа желает + itemElement: 'li', // элемент списка li, div .... + arrOfItems: ['1', '2', '3', '4', '5'], // массив элементов которые будут изначально добавлены в список + onCreate: onCreate, // функция, которая будет выполнена при событии создания элемента списка + onDelete: onDelete, // функция, которая будет выполнена при событии удаления элемента списка + } + + +function onCreate(){ + alert('new item created') + +} +function onDelete(){ + alert('items removed') +} + + + +let initialList = new DOMINIT(options); +console.log(initialList.init()); + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..6a8105e --- /dev/null +++ b/style.css @@ -0,0 +1,67 @@ +/* reset*/ +*{ + box-sizing: border-box; +} + +body{ + font-family: 'Open Sans', sans-serif; + line-height: 1; + margin: 0; +} +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +h1, h2, h3, h4, h5, h6, p{ + margin: 0; + padding: 0; +} +a{ + color: inherit; + text-decoration: none; + cursor: pointer; +} +ul, li{ + list-style: none; +} +.card{ + margin: 50px 20px; + padding-bottom: 20px; + padding: 0; + +} +.card-body{ + padding: 10px 30px; +} +.card-footer{ + padding: 20px 30%; +} +.new-items{ + background-color: transparent; + line-height: 1.2; + border: none; +} + +.new-items:focus{ + outline: none; +} +.card-body{ + min-height: 250px; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.to-do-list{ + padding: 0; + margin-bottom: 30px; +} +.list-item{ + padding: 20px 10px; +} + +.remove-item{ + margin-left: 20px; +} +.active{ + background-color: rgba(223, 202, 210, .3) +} \ No newline at end of file From 7f41f61d87a8f8d258daddfe0ede7b870d4c08b6 Mon Sep 17 00:00:00 2001 From: Tatiana1908 Date: Fri, 4 May 2018 23:18:44 +0300 Subject: [PATCH 2/2] changed last task --- script.js | 170 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 96 insertions(+), 74 deletions(-) diff --git a/script.js b/script.js index ba9fc57..63a3104 100644 --- a/script.js +++ b/script.js @@ -134,19 +134,14 @@ function fun() { // console.log(fun()) // Task7 - -class DOMINIT { +class parent{ constructor(options){ - - this.ctrl = options.ctrl; - this.shift = options.shift; this.parentElement = options.parentElement; this.arrOfItems = options.arrOfItems; - this.onCreate = options.onCreate; - this.onDelete = options.onDelete; - this.id = 1; this.container = document.createElement('div'); + + this.id = 1; } init(){ this.container.classList.add('container'); @@ -156,17 +151,17 @@ class DOMINIT { document.body.insertAdjacentElement("afterbegin", this.container); this.createCard() } - createCard(){ + createCard(){ this.card = document.createElement('div'); - this.card.classList.add('col-6'); + this.card.classList.add('col-md-6'); this.card.classList.add('card'); let header = document.createElement('div'); header.innerHTML = '

list

' - this.card.appendChild(header) + this.card.appendChild(header); let body = document.createElement('div'); - body.innerHTML = '
' + - '
' + body.innerHTML = '
'; + this.card.appendChild(body); this.list = document.createElement(this.parentElement); @@ -179,12 +174,42 @@ class DOMINIT { this.buildLI(this.arrOfItems[i]) } - this.addNewTask(); - this.removeItem(); + } + buildLI(inputContent) { + this.list = document.querySelector('.to-do-list'); + this.newLi = document.createElement('li'); + this.newLi.classList.add('list-item'); + this.newLi.id = this.id; + this.newLi.innerHTML = ` ${inputContent} `; + this.list.appendChild(this.newLi); + + this.id++; + } +} +class DOMINIT extends parent{ + constructor(options){ + super(options); + + this.ctrl = options.ctrl; + this.shift = options.shift; + this.onCreate = options.onCreate; + this.onDelete = options.onDelete; + } + initChild(){ + this.init(); + + this.addNewTask(); + this.removeItem(); } + addNewTask(){ + let footer = document.createElement('div'); + footer.classList.add('card-footer') + footer.innerHTML = '
' + this.card.appendChild(footer); + this.parentBlock = document.querySelector('.block-extend-item-list'); this.addBtn = this.parentBlock.querySelector('.add-new-item'); this.addBtn.addEventListener('click', () => { @@ -196,65 +221,62 @@ class DOMINIT { }) } - buildLI(inputContent){ - let list = document.querySelector('.to-do-list'); - let newLi = document.createElement('li'); - newLi.classList.add('list-item'); - newLi.id = this.id; - newLi.innerHTML = ` ${inputContent} `; - list.appendChild(newLi); + buildLI(inputContent){ + + super.buildLI(inputContent); this.clickAm = 0; - newLi.addEventListener('click', (e) => { - let targetLi = e.target.closest('li'), - removeItemBtn = document.querySelector('.remove-item'), - allLi = list.children; - - if (!(this.ctrl) || ((this.ctrl) && (!event.ctrlKey))){ - for(let i = 0; i < allLi.length; i++){ - allLi[i].classList.remove('active') - } - } - targetLi.classList.toggle('active'); - - if ((this.shift) && (event.shiftKey)){ - - if (!(this.clickAm%2)) { - this.firstPicked = targetLi.id - }else{ - this.secondPicked = targetLi.id; - - if(this.firstPicked > this.secondPicked){ - - for(let i = this.secondPicked; i <= this.firstPicked; i++) { - let element = document.getElementById(i); - if (element){ - element.classList.add('active') - } - } - }else { - - for(let i = this.firstPicked; i <= this.secondPicked; i++) { - let element = document.getElementById(i) - if (element){ - element.classList.add('active') - } - } - } - } - this.clickAm++; - } - let containAct = [].slice.call(allLi).some( (li) => li.classList.contains('active')); - - if (containAct){ - removeItemBtn.classList.remove('d-none'); - }else{ - removeItemBtn.classList.add('d-none'); - } - }) - this.id++; - } + this.newLi.addEventListener('click', (e) => { + + let targetLi = e.target.closest('li'), + removeItemBtn = document.querySelector('.remove-item'), + allLi = this.list.children; + + if (!(this.ctrl) || ((this.ctrl) && (!event.ctrlKey))){ + for(let i = 0; i < allLi.length; i++){ + allLi[i].classList.remove('active') + } + } + targetLi.classList.toggle('active'); + + if ((this.shift) && (event.shiftKey)){ + + if (!(this.clickAm%2)) { + this.firstPicked = targetLi.id + }else{ + this.secondPicked = targetLi.id; + + if(this.firstPicked > this.secondPicked){ + + for(let i = this.secondPicked; i <= this.firstPicked; i++) { + let element = document.getElementById(i); + if (element){ + element.classList.add('active') + } + } + }else { + + for(let i = this.firstPicked; i <= this.secondPicked; i++) { + let element = document.getElementById(i); + if (element){ + element.classList.add('active') + } + } + } + } + this.clickAm++; + } + let containAct = [].slice.call(allLi).some( (li) => li.classList.contains('active')); + + if (containAct){ + removeItemBtn.classList.remove('d-none'); + }else{ + removeItemBtn.classList.add('d-none'); + } + }) + + } removeItem(){ let removeItemBtn = document.querySelector('.remove-item'); @@ -273,7 +295,6 @@ class DOMINIT { } } - const options = { ctrl: false, // если true - позволить выбор нескольких элементов списка с нажатой кнопкой ctrl shift: true , @@ -293,10 +314,11 @@ function onDelete(){ alert('items removed') } - +let initialParent = new parent(options); +console.log(initialParent.init()); let initialList = new DOMINIT(options); -console.log(initialList.init()); +console.log(initialList.initChild());