diff --git a/12-loops-conditionals/index.html b/12-loops-conditionals/index.html new file mode 100644 index 0000000..79b6461 --- /dev/null +++ b/12-loops-conditionals/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + diff --git a/12-loops-conditionals/index.js b/12-loops-conditionals/index.js new file mode 100644 index 0000000..8800356 --- /dev/null +++ b/12-loops-conditionals/index.js @@ -0,0 +1,87 @@ + + + +// let answer = confirm('Are u hungry?'); +// console.log('answer: ', answer); + +// let foodType = prompt('What u wanna eat?', 'pizza'); + +// console.log('foodType: ', foodType); + +// let age = parseInt(prompt('how old are u?'), 10); + +// let adult = age > 18; + +// let isIvan = true; + + +// let msg = age > 17 ? 'u got beer' : 'no beer'; + + +// console.log(msg); + +// let product = prompt('u got?'); + +// switch (product) { +// default: +// console.log('0grn'); +// break; +// case 'cola': +// case 'cola': +// case 'cola': +// case 'cola': +// case 'milk': +// console.log('20grn'); +// break; +// case 'bread': +// console.log('10grn'); +// break; +// } + + +let isIvan = true; +let isVlad = true; + +let age = 18; + +// let a = 0 +// let b = 5 + +// || повертає перше позитивне +// && повертає перше хибне + 10 || 15 +let condition = ('hi' && 10) || 15; + + + + + +// let answer = ''; + +// while (answer !== 'cursor') { +// answer = prompt('what programming school is the best?') +// if (answer === 'logos') { +// continue; +// } +// console.log('answer: ', answer); +// } + +// console.log('right answer') + + + +let str = 'hello'; + +let lCounter = 0; + +for (var i = 0; i < str.length; i++) { + console.log('i: ', i, str[i]); + if (str[i] === 'l') { + lCounter++; + } +} + + +// console.log('lCounter: ', lCounter); + + diff --git a/21-function/index.html b/21-function/index.html new file mode 100644 index 0000000..79b6461 --- /dev/null +++ b/21-function/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + diff --git a/21-function/index.js b/21-function/index.js new file mode 100644 index 0000000..e908e09 --- /dev/null +++ b/21-function/index.js @@ -0,0 +1,133 @@ + +// function isIvan(name) { +// if (name === 'Ivan' || name === 'ivan' || +// name === 'іван' || name === 'Іван') { +// return true; +// } else { +// return false; +// } +// } + +// const userName = 'Іван'; + +// if (isIvan(userName)) { +// console.log('hi Ivan'); +// } + + + + +// const sayHiUser = (name) => { +// console.log('Hello ' + name); +// return 'done'; +// } + +// const result = sayHiUser('Ivan'); +// console.log('result: ', result); + +// const isIvan = name => name === 'Ivan'; + +// const ivan = isIvan('ddd'); +// console.log('ivan: ', ivan); + + +(function() { + var a = 'dfd'; + var b = 'ddf'; + // console.log('bla bla'); +})(); + + +// let bar = 1; + +// function foo() { +// console.log('bar: ', bar); +// bar = 2; + +// function inner() { +// console.log('bar: ', bar); +// bar = 3; +// } + + +// inner(); +// } +// foo(); +// bar = 4; +// console.log('bar: ', bar); + + + + + +// const pure = a => a + 3; + +function removeA(str) { + let pureStr = ''; + for(let i = 0; i < str.length; i++) { + if (str[i] !== 'a') { + pureStr += str[i]; + } + } + return pureStr; +} + +function removeARecursion(str) { + const index = str.indexOf('a'); + return index === -1 ? str : + removeARecursion(str.substr(0, index) + str.substr(index + 1)) + + // const index = str.indexOf('a'); + // if (index !== -1) { + // let temp = str.substr(0, index) + str.substr(index + 1); + // return removeARecursion(temp); + // } else { + // return str; + // } +} + +const result = removeARecursion('ivan and ivan'); +// console.log('result: ', result); + + + +function square(x) { + return x * x; +} + + +function pow(n, exp) { + if (exp === 0) return 1; + let result = n; + for (let i = 1; i < exp; i++) { + result *= n; + } + + return result; +} + +// console.log( pow(2, 2) ); + + +function isPalindrome(str) { + let result = true; + const halfLength = Math.floor(str.length / 2); + + for (let i = 0; i < halfLength; i++) { + const leftChar = str[i]; + const rightChar = str[str.length - (i + 1)]; + + if (leftChar !== rightChar) { + return false; + } + } + + return result; +} + +const isPalindromeCope = str => str.split('').reverse().join('') === str; + + +console.log( isPalindrome('madam') ); + +let even = 10 % 2 === 0; diff --git a/32-objects/index.html b/32-objects/index.html new file mode 100644 index 0000000..79b6461 --- /dev/null +++ b/32-objects/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + diff --git a/32-objects/index.js b/32-objects/index.js new file mode 100644 index 0000000..820d8ac --- /dev/null +++ b/32-objects/index.js @@ -0,0 +1,254 @@ + +let key = 'age'; + +// let tel = 9999; + + +let user = { + hello: function() { + console.log('hello'); + }, + buy() { + console.log('buy'); + }, + 10: 'number', + '12': 'number', + 'first name': 'ivan', + [key]: 22, + ['hello' + 'afsd']: 'dfdf', + // tel +}; + + +user.tel = '00000'; +delete user.tel; +// user['hello'](); +// user.buy(); + + + + + +function addContact(book) { + let name = prompt('name'); + if (name in book) { + console.log('already exists'); + return; + } + let tel = prompt('tel'); + + book[name] = tel; + console.log(' book: ', book); +} + +// addContact(contactsBook); + +// console.log('contactsBook: ', contactsBook); + +let user1 = {name: 'ivan'}; + +let user2 = user1; + +let a = 2120; +let b = a; + +// console.log('user1: ', user1); +// console.log('user2: ', user2); + +// user2.name = 'vlad'; + +// console.log('user1: ', user1); +// console.log('user2: ', user2); + + +// console.log({} === {}); +// console.log(user1 === user2); + +const str = {name: 'ivan'}; +str.name = 222 +// console.log('str: ', str); + + + + + + +let mainBook = { + IVAN: 12312, + vlad: 99999, + innerBook: { + littleIvan: 555 + } +}; +let ivanaBook = { + IVAN: 666, +}; + +let copyBook = {...mainBook}; + +// let copyBook = Object.assign({}, mainBook); + + +let defaultCar = { + capacity: '1.2L', + color: 'blue', + wheelsAmount: 4 +} + +function configureCar(options) { + let car = Object.assign({}, defaultCar, options); + return car; +} + + +let ivanCar = configureCar({color: 'black', wheelsAmount: 3}); +// console.log(ivanCar === defaultCar); + +// console.log('ivanCar: ', ivanCar); +// console.log('defaultCar: ', defaultCar); + + + +user = { + name: 'ihor', + age: 30, + lastName: 'Borodin' +}; + +// let { name, age } = user; + +let arr = ['valera']; + +// let [name, age = 20] = arr; + + +function helloUser({name, age}) { + console.log(`hello ${name} ${age}`) +} + +// helloUser(user); + + +function getContact() { + let name = prompt('name'); + let tel = prompt('tel'); + return [name, tel, 3, 324, 21312]; +} + +// let [name, tel, ...restData] = getContact(); +// console.log('restData: ', restData); +// console.log('name, tel: ', name, tel); + + +// let [...restData] = [...someData] + + +// let contactBook = { +// ivan: 12312, +// vlad: 99999, +// }; + +// for (key in contactBook) { +// console.log('key: ', key); +// } + +// Object.entries(contactBook).forEach(([key, val]) => { +// console.log('key, val: ', key, val); +// }) + +let users = [ + {name: 'ivan', id: 'adf8f32h32fh9832'}, + {name: 'vlad', id: 'adf8f32h32fh9833'}, + {name: 'ihor', id: 'adf8f32h32fh9834'}, +]; + +let ihor = users.find(user => { + return user.id === 'adf8f32h32fh9834'; +}) +// console.log('ihor: ', ihor); + + +// let usersObj = { +// adf8f32h32fh9832: {name: 'ivan', id: 'adf8f32h32fh9832'}, +// adf8f32h32fh9833: {name: 'vlad', id: 'adf8f32h32fh9833'}, +// adf8f32h32fh9834: {name: 'ihor', id: 'adf8f32h32fh9834'}, +// }; + +// console.log(usersObj['adf8f32h32fh9834']); + +let usersObj = users.reduce((acc, user) => { + acc[user.id] = user; + return acc; +}, {}) + +// console.log('usersObj: ', usersObj); + + + +user = { + firstName: 'ivan', + lastName: 'vorobev', + fullName() { + console.log(this.firstName + ' ' + this.lastName); + } +}; + +// user.fullName(); + + +let contactBook = { + ivan: 12312, + vlad: 99999, + ihor: 324132, + valera: 53453, + test() { + // console.log(this) + }, + getRecordsAmount() { + return Object.keys(this).length - 1; + }, + search(str) { + let keys = Object.keys(this); + let result = keys.filter(key => { + return key.includes(str); + }); + + return result; + } +}; + + +// console.log(this); +contactBook.test(); + +function generateCombinations(word) { + let result = []; + word = word.split(''); + for (let i = 0; i < 1; i++) { + let letter = word[0]; + let copy = [...word] + copy.shift(); + for (let j = i; j < word.length; j++) { + copy.splice(j + 1, 0, letter); + result.push(copy); + copy.splice(j + 1, 1); + // console.log(copy); + } + } + // console.log(result); +} + +generateCombinations("man"); + +function getModa(...arr) { + // console.log('arr: ', arr); + let result = {}; + arr.forEach(n => { + result[n] = result[n] + 1; + }); +} + +getModa(6, 2, 55, 11, 78, 2, 55, 77, 57, 87, 23, 2, 56, 3, 2); + + +// console.log(contactBook.search('i')); diff --git a/41-closure/index.html b/41-closure/index.html new file mode 100644 index 0000000..a0a8756 --- /dev/null +++ b/41-closure/index.html @@ -0,0 +1,15 @@ + + + + + + + Document + + + + + + + + diff --git a/41-closure/index.js b/41-closure/index.js new file mode 100644 index 0000000..e505334 --- /dev/null +++ b/41-closure/index.js @@ -0,0 +1,122 @@ +// let a = 'a'; + +// function foo() { +// console.log(a); +// console.log(b); +// } + +// function bar() { +// let b = 'b'; +// foo(); +// } + +// bar(); + + +function createFunc() { + let msg = 'hello'; + + return function() { + console.log('print msg: ', msg); + } +} + + +let func = createFunc(); + +function createCounter() { + let counter = 0; + + return function() { + counter++; + console.log('counter: ', counter); + } +} + +let count = createCounter(); + +// count(); +// count(); + +let count2 = createCounter(); + +// count2(); + + + +function ownForEach(arr, callback) { + for (let i = 0; i < arr.length; i++) { + callback(arr[i]); + } +} + +let group = { + name: 'PPZ45', + students: ['Ihor', 'Vlad', 'Ivan'], + printStudents() { + + this.students.forEach((studentName) => { + console.log(this.name, studentName); + }); + } +}; + +// group.printStudents(); + + + +function printName(startStr, endStr) { + console.log(startStr, this.firstName, this.lastName, endStr); +} + +let user1 = { + firstName: 'Ivan', + lastName: 'Horovec', +} + +let user2 = { + firstName: 'Anton', + lastName: 'Borovec', +} + +// printName.apply(user1, ['Hi', '!!!']); +// printName.apply(user2, ['buy', '!!!']); + +// let printUser1Name = printName.bind(user1, 'hello'); +// printUser1Name('!!'); + + +function multiply(a, b) { + return a * b; +} +let double = multiply.bind(null, 2); +// console.log(double(5)); + + +let double2 = (n) => { + return multiply(2, n); +} + +// console.log(double2(11)); + + +function hello(msg) { + console.log('hi', msg); +} + +// setTimeout(hello, 1000, 'whats up'); +let timeout = setTimeout(group.printStudents, 3000, 'you'); +// clearTimeout(timeout); + + + + + +// let interval = setInterval(hello, 1000, 'ola'); + +// setTimeout(function() { + +// clearInterval(interval) +// }, 5000); + + diff --git a/41-closure/index0.js b/41-closure/index0.js new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/41-closure/index0.js @@ -0,0 +1 @@ + diff --git a/42-class/index.html b/42-class/index.html new file mode 100644 index 0000000..fcbc152 --- /dev/null +++ b/42-class/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + diff --git a/42-class/index.js b/42-class/index.js new file mode 100644 index 0000000..73353ca --- /dev/null +++ b/42-class/index.js @@ -0,0 +1,181 @@ + + +let user = { + firstName: 'ivan', + lastName: 'bbbadsas', + getName() { + return this.firstName + ' ' + this.lastName; + } +} + +// console.log('user: ', user); + + +// console.log('old user', user); +// console.log(user.getName()); + +class User { + constructor(name, birthYear) { + this.name = name; + this.birthYear = birthYear; + } + + get age() { + return 2020 - this.birthYear; + } + + get name() { + return this.firstName + ' ' + this.lastName; + } + + set name(value) { + if (value.length < 4) { + console.log('sorry name is too short'); + return; + } + + [this.firstName, this.lastName] = value.split(' '); + } + + testMethod() { + console.log('heelloo'); + } +} + + + +let ivan = new User('ivan anonym', 1990); +// console.log('ivan: ', ivan); +// console.log('ivan: ', ivan); +// console.log('ivan age: ', ivan.age); +ivan.birthYear = 2000; +// console.log('ivan: ', ivan); +// console.log('ivan age: ', ivan.age); + + + +function OldUser(name) { + this.name = name; +} + +OldUser.prototype.testMethod = function() { + console.log('heelloo'); +} + +let ihor = new OldUser('ihor'); +// ihor.testMethod(); +// console.log('ihor: ', ihor); + + +String.prototype.split = function() { + console.log('hello Ivan'); +} + + +class Human { + constructor(name, age) { + this.name = name; + this.age = age; + } + + getInfo() { + return this.name + ' ' + this.age; + } +} + +class SuperHero extends Human { + constructor(name, age, superPower) { + super(name, age); + this.superPower = superPower; + + this._weakness = superPower + age + 'vvvvaddde'; + } + + static fight(hero1, hero2) { + if (hero1.superPower.length > hero2.superPower.length) { + return 'hero ' + hero1.name + ' wwon'; + } else { + return 'hero ' + hero2.name + ' wwon'; + } + } + + getInfo() { + return super.getInfo() + ' ' + this.superPower; + } + + useSuperPower() { + console.log(this.superPower + ' completed'); + this._privetPower(); + } + + _privetPower() { + + } +} + +// let human = new Human('Oleh', 29); +// console.log('human: ', human); +// console.log( human.getInfo() ); + +let student = new SuperHero('IvanStudent', 18, 'vyzhyty na stypendiyu'); +let ironIvan = new SuperHero('IvanStark', 39, 'dofiga babla'); + +console.log( + SuperHero.fight(student, ironIvan) +); + + +class ContactBook { + static sos = 911; + + constructor() { + this.numberList = {}; + this._countryCode = '+38'; + } + + getNumber(name) { + return this.numberList[name] || 'no such contact'; + } + + addNumber(name, tel) { + if (name in this.numberList) { + console.log('already exists'); + return; + } + + if (!tel.includes(this._countryCode)) { + tel = this._countryCode + tel; + } + + if (this._checkTelDuplication(tel)) return; + + this.numberList[name] = tel + } + + _checkTelDuplication(tel) { + if (Object.values(this.numberList).includes(tel)) { + console.log('tel already exist'); + return true; + } else return false; + } + + get amount() { + return Object.keys(this.numberList).length; + } +} + +console.log('ContactBook.sos: ', ContactBook.sos); + +let book = new ContactBook(); + +book.addNumber('Ivan Grygorovych', '3423414534'); +book.addNumber('Ivan Vasylovych', '+383423414534'); + +console.log('book: ', book); +console.log(book.getNumber('Ivan Grygorovych')); + +console.log(book.getNumber('asdfasdfs')); + +console.log(book.amount); + + diff --git a/51-dom/index.html b/51-dom/index.html new file mode 100644 index 0000000..5d5cd80 --- /dev/null +++ b/51-dom/index.html @@ -0,0 +1,46 @@ + + + + + + + Document + + + + +
+

+ + title + + + 1 + +

+ +

Title 2

+

Title 3

+
+ +

+ + 0 + +

+ + + + + + diff --git a/51-dom/index.js b/51-dom/index.js new file mode 100644 index 0000000..17317b0 --- /dev/null +++ b/51-dom/index.js @@ -0,0 +1,92 @@ +// let h1 = { +// tagName: 'h1', +// id: 'main-title', +// textContent: 'title', +// parent: div +// }; + +// let div = { +// tagName: 'div', +// children: [h1] +// }; + + + +// let title = document.getElementById('main-title'); +// let title = document.querySelector('h1#main-title'); +// setTimeout(() => { +// title.textContent = 'not a title'; +// }, 3000); + +// let spanIndex = title.querySelector('#main-title > .index'); +// console.dir(spanIndex); + + +// let titles = document.querySelectorAll('.title')[0]; + +// titles.forEach((item) => { +// console.log('item: ', item); +// }); + +let titles = document.getElementsByClassName('title'); + +Array.from(titles).forEach((item, i) => { + item.textContent = 'ola ' + i; +}); + + +let counter = document.querySelector('.counter'); + +console.log('counter: ', counter); +// setInterval(() => { +// counter.innerText = +counter.innerText + 1; +// }, 1000); + +let sec = 0; +let color = ['red', 'blue', 'green']; +// setInterval(() => { +// let classIndex = sec % color.length; + +// counter.className = 'counter ' + color[classIndex]; +// counter.style.fontSize = 20 + sec + 'px'; +// counter.innerHTML = ++sec; +// }, 1000); + + +let title = document.querySelector('h1#main-title'); + +// title.innerHTML = `` + +// title.firstChild.value = '212312'; + +// setTimeout(() => { +// console.log(title.firstChild.value); +// }, 3000); + +console.log(title.getAttribute('custom-attr')); + + +// setTimeout(() => { +// title.style.backgroundColor = 'orange'; +// title.style.color = 'blue'; +// // console.log(title.style.cssText); +// }, 3000); + + +console.log( + parseInt(getComputedStyle(title)['font-size']) +); + + +let button = document.createElement('button'); + +button.innerText = 'click'; + +title.insertAdjacentHTML('beforebegin', ''); + +button.remove(); + + +title.innerHTML = title.innerHTML + ''; + + diff --git a/52-dom/index.css b/52-dom/index.css new file mode 100644 index 0000000..e8e0c7d --- /dev/null +++ b/52-dom/index.css @@ -0,0 +1,33 @@ +.button-wrap { + width: 100px; + height: 100px; + background-color: antiquewhite; + display: flex; + align-items: center; + justify-content: center; +} + + + +.mosaic { + flex-basis: 20px; + height: 20px; +} + + + +#div2 { + background: red; + width: 50px; + height: 50px; +} + +.wrapper { + display: flex; + flex-wrap: wrap; +} +.square { + background: blue; + width: 100px; + height: 100px; +} diff --git a/52-dom/index.html b/52-dom/index.html new file mode 100644 index 0000000..cd245b8 --- /dev/null +++ b/52-dom/index.html @@ -0,0 +1,52 @@ + + + + + + + Document + + + + + + +
+
+
+
+
+ +
+ link +
+ + +
+ +
+ + + + + diff --git a/52-dom/index.js b/52-dom/index.js new file mode 100644 index 0000000..304ee1b --- /dev/null +++ b/52-dom/index.js @@ -0,0 +1,81 @@ +// console.dir(btn); + +// btn.onclick = function() { +// console.log('click 1'); +// } + +// const btn = document.getElementById('button'); + +// function logClick(msg) { +// console.log(msg + ' click 2'); +// } + +// const logWrapper = logClick.bind(null, 'adsfdsf'); + +// document.getElementById('add') +// .addEventListener('click', function() { +// btn.addEventListener('click', logWrapper); +// }); + +// document.getElementById('remove') +// .addEventListener('click', function() { +// btn.removeEventListener('click', logWrapper); +// }); + + +// document.getElementById('click-once') +// .addEventListener('click', function(event) { +// this.textContent = 'dfsfs'; +// // console.log('event: ', event); +// console.log('Once'); +// }, { once: true }); + +// document.getElementById('click-once') +// .addEventListener('click', function(event) { +// // console.log('test1', event.target === this); +// // console.log('event1: ', event); +// console.log('btn click'); +// }); + +// document.querySelector('.container') +// .addEventListener('click', function(event) { +// // console.log('test2', event.target === this); +// // console.log('event2: ', event); +// console.log('container click'); +// }, { capture: true }); + + +let squares = document.getElementsByClassName('square'); + +[...squares].forEach(square => { + square.addEventListener('click', function(event) { + event.stopPropagation(); + this.style.background = 'red'; + }); +}) + +document.querySelector('.wrapper') + .addEventListener('click', function(event) { + // event.target.style.background = 'red'; + console.log('click'); + // console.log('event: ', event.target); + }); + +document.querySelector('.link') + .addEventListener('click', function(event) { + event.preventDefault(); + console.log('link click'); + }) + +document.getElementById('pass-input') + .addEventListener('keypress', function(event) { + console.log('keypress'); + if (this.value === 'ivan') { + this.after('access granted') + } + }); + +document.getElementById('pass-input') +.addEventListener('keydown', function(event) { + console.log('keydown'); +}); diff --git a/52-dom/sidebar.css b/52-dom/sidebar.css new file mode 100644 index 0000000..071fd52 --- /dev/null +++ b/52-dom/sidebar.css @@ -0,0 +1,38 @@ +body { + margin: 0; + height: 100vh; +} + +.menu-wrapper { + position: fixed; + top: 0; + left: 100px; + width: 100%; + height: 100%; + pointer-events: none; +} + +.menu { + position: fixed; + z-index: 100; + top: 0; + left: 0; + height: 100%; + width: 100px; + background: #ccc; + transform: translateX(-100%); + transition: transform .3s; +} + +.menu.menu--open { + transform: translateX(0); +} + +.menu.menu--open + .menu-wrapper { + pointer-events: auto; +} + +#open { + transition: all .3s; +} + diff --git a/52-dom/sidebar.html b/52-dom/sidebar.html new file mode 100644 index 0000000..4ccfd29 --- /dev/null +++ b/52-dom/sidebar.html @@ -0,0 +1,25 @@ + + + + + + + Document + + + + +
+ +

item 1

+

item 2

+

item 3

+
+
+
+ + + + + + diff --git a/52-dom/sidebar.js b/52-dom/sidebar.js new file mode 100644 index 0000000..e663d8f --- /dev/null +++ b/52-dom/sidebar.js @@ -0,0 +1,23 @@ +const open = document.getElementById('open'); + +const menu = document.querySelector('.menu'); +const close = document.querySelector('#close'); +const wrapper = document.querySelector('.menu-wrapper'); + +function toggleMenu() { + menu.classList.toggle('menu--open'); +} + +open.addEventListener('click', toggleMenu); + +close.addEventListener('click', toggleMenu); + +wrapper.addEventListener('click', toggleMenu); + + + +// document.addEventListener('click', function(event) { +// if (event.target !== menu && menu.classList.contains('menu--open')) { +// menu.classList.remove('menu--open'); +// } +// }, {capture: true}); diff --git a/52-dom/square.css b/52-dom/square.css new file mode 100644 index 0000000..8329881 --- /dev/null +++ b/52-dom/square.css @@ -0,0 +1,22 @@ +body { + margin: 0; +} + +#square { + width: 140px; + height: 40px; + font-size: 20px; + color: white; + background-color: crimson; + border: none; + text-transform: uppercase; + letter-spacing: 4px; + font-weight: bold; + border-radius: 5px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: all .3s; +} diff --git a/52-dom/square.html b/52-dom/square.html new file mode 100644 index 0000000..cb4019e --- /dev/null +++ b/52-dom/square.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + + + + + diff --git a/52-dom/square.js b/52-dom/square.js new file mode 100644 index 0000000..e77832a --- /dev/null +++ b/52-dom/square.js @@ -0,0 +1,56 @@ + +class Square { + constructor(arr = [2,56,6]) { + console.log(arr); + this.square = document.getElementById('square'); + + this.square.addEventListener('click', () => { + this._start(); + }, {once: true}); + } + + _start() { + console.log('click'); + this.square.style.width = '100px'; + this.square.style.height = '100px'; + this.square.textContent = ''; + setTimeout(() => { + this.square.style.transition = 'all 0s'; + }, 300) + + // requestAnimationFrame + const moveCallback = (event) => { + this._move(event); + }; + + this.square.addEventListener('mousedown', () => { + document.addEventListener('mousemove', moveCallback); + }); + + document.addEventListener('mouseup', () => { + document.removeEventListener('mousemove', moveCallback); + }); + } + + _move(event) { + if (window.innerHeight > event.y + 50 && 0 < event.y - 50) { + this.square.style.top = event.y + 'px'; + } + if (window.innerWidth > event.x + 50) { + this.square.style.left = event.x + 'px'; + } + } + +} + + + + + + + + +document.addEventListener('DOMContentLoaded', function() { + new Square(); +}); + diff --git a/52-dom/square2.html b/52-dom/square2.html new file mode 100644 index 0000000..d176b0d --- /dev/null +++ b/52-dom/square2.html @@ -0,0 +1,16 @@ + + + + + + + Document + + + + + + + + + diff --git a/52-dom/square2.js b/52-dom/square2.js new file mode 100644 index 0000000..c7944e9 --- /dev/null +++ b/52-dom/square2.js @@ -0,0 +1,56 @@ +const square = document.getElementById('square'); + +square.addEventListener('click', function() { + this.style.width = '100px'; + this.style.height = '100px'; + this.textContent = ''; + setTimeout(() => { + this.style.transition = 'all 0s'; + }, 300) + + init(); +}, { once: true }); + + +function moveSquare(event) { + let { x, y } = event; + + const halfSquare = 50; + if (x < halfSquare) x = halfSquare; + if (x > window.innerWidth - halfSquare) x = window.innerWidth - halfSquare; + square.style.left = x + 'px'; + + if (y < halfSquare) y = halfSquare; + if (y > window.innerHeight - halfSquare) y = window.innerHeight - halfSquare; + square.style.top = y + 'px'; +} + +function init() { + square.addEventListener('mousedown', function() { + document.addEventListener('mousemove', moveSquare); + }); + document.addEventListener('mouseup', function() { + document.removeEventListener('mousemove', moveSquare); + }); + + square.addEventListener('keydown', (event) => { + const leftCode = 37; + const upCode = 38; + const rightCode = 39; + const downCode = 40; + switch (event.keyCode) { + case leftCode: + moveSquare({x: square.offsetLeft - 20, y: square.offsetTop}); + break; + case upCode: + moveSquare({x: square.offsetLeft, y: square.offsetTop - 20}); + break; + case rightCode: + moveSquare({x: square.offsetLeft + 20, y: square.offsetTop}); + break; + case downCode: + moveSquare({x: square.offsetLeft, y: square.offsetTop + 20}); + break; + } + }) +} diff --git a/61-ajax/index.html b/61-ajax/index.html new file mode 100644 index 0000000..fc2deac --- /dev/null +++ b/61-ajax/index.html @@ -0,0 +1,72 @@ + + + + + + + Document + + +
+ +
+ +
+
+
+ + + + + + + + diff --git a/61-ajax/index.js b/61-ajax/index.js new file mode 100644 index 0000000..f1cba35 --- /dev/null +++ b/61-ajax/index.js @@ -0,0 +1,148 @@ +// let test = { +// marks: [1, 2, 5], +// msg: "hello" +// }; + +// console.log( JSON.parse(JSON.stringify(test)) ); +// let testCopy = JSON.parse(JSON.stringify(test)); + + +// const xhr = new XMLHttpRequest(); +// console.log('xhr: ', xhr); + +// xhr.open('GET', 'https://api.themoviedb.org/3/discover/movie?api_key=4adb59ec9a677a24e9098f3069908adb'); + +// xhr.send(); + +// xhr.onload = function() { +// console.log('response ', JSON.parse(xhr.response)); +// } + +let key = '?api_key=4adb59ec9a677a24e9098f3069908adb'; + +function getMovies() { + return axios.get('https://api.themoviedb.org/3/discover/movie' + key) +} + +function getCast(id) { + return axios.get(`https://api.themoviedb.org/3/movie/${id}/credits${key}`); +} + +function getActor(actorId) { + return axios.get(`https://api.themoviedb.org/3/person/${actorId}${key}`); +} + + +getMovies() + .then(res => { + return getCast(res.data.results[0].id); + }) + .then(res => { + let actorPromise1 = getActor(res.data.cast[0].id); + + let actorPromise2 = getActor(res.data.cast[1].id); + + return Promise.race([actorPromise1, actorPromise2]) + }).then(res => { + // console.log(res.data.name); + // console.log(arr[0].data.name + ' ' + arr[1].data.name); + }).catch(err => { + // console.log('err: ', err); + }) + + + + + + + +function getPromise() { + console.log('getpromise'); + return axios.get('https://api.themoviedb.org/3/discover/movie' + key); +} + + +// getPromise().then(() => { +// console.log('yeah promise 1 resolved'); +// getPromise().then(() => { +// console.log('yeah promise 2 resolved'); +// getPromise().then(() => { +// console.log('yeah promise 3 resolved'); +// }); +// }); +// }); + +// getPromise().then(getPromise).then(getPromise) +// .then(() => { +// console.log('yeah promise 3 resolved'); +// }); + +// ?api_key=4adb59ec9a677a24e9098f3069908adb +// https://image.tmdb.org/t/p/original/ + +// /movie/{movie_id} +// /movie/{movie_id}/credits +// /person/{person_id} +// /person/{person_id}/movie_credits + + +function lateLog(msg, ivan) { + const promise = new Promise((resolve, reject) => { + console.log('promise func'); + if (ivan === 'ivan') { + setTimeout(() => { + console.log(msg); + resolve('im done'); + }, 3000); + } else { + reject('only for ivan') + } + }); + + return promise; +} + + + +// lateLog('hey', 'vlad').then(res => { +// console.log('res: ', res); +// }).catch((err) => { +// console.log('err: ', err); +// }); + + + +async function getMoviesNew() { + try { + let res = await axios.get('https://api.themoviedb.org/3/discover/movie' + key); + console.log('res: ', res); + let credits = await getCast(res.data.results[0].id); + console.log('credits: ', credits); + + let [actor1, actor2] = await Promise.all([ + getActor(credits.data.cast[0].id), + getActor(credits.data.cast[1].id) + ]); + + console.log('actor1: ', actor1, actor2); + + } catch (err) { + console.log('err: ', err); + } +} + +getMoviesNew(); + +// let unknownString = '{}{}aasdf'; + +// console.log(1); + +// try { +// console.log('result: ', result); +// } catch (err) { +// console.log('hey user type normal json ', err); +// } finally { +// console.log('yes'); +// } + +// console.log(2); diff --git a/61-ajax/test.json b/61-ajax/test.json new file mode 100644 index 0000000..56bfe0a --- /dev/null +++ b/61-ajax/test.json @@ -0,0 +1,4 @@ +{ + "marks": [1, 2, 5], + "msg": "hello" +} diff --git a/62-ajax/index.css b/62-ajax/index.css new file mode 100644 index 0000000..0b10d41 --- /dev/null +++ b/62-ajax/index.css @@ -0,0 +1,65 @@ +form { + margin: 20px auto; +} + +.users { + display: flex; + flex-wrap: wrap; + justify-content:space-around +} + +.user { + flex-basis: 200px; + margin: 10px; + display: flex; + flex-direction: column; + align-items: center; + background-color: #f3f2ee; + text-align: center; + padding: 0 5px; + cursor: pointer; + box-shadow: 0 3px 5px 3px rgba(0,0,0,.13); +} +.user__img { + max-width: 100%; + max-height: 200px; +} +.details { + display: none; + position: fixed; + top: 0; + bottom: 0; + right: 0; + left: 0; + background-color: rgba(0,0,0, .5); + align-items: center; + justify-content: center; +} +.details.shown { + display: flex; +} +.details__content { + width: 400px; + min-height: 400px; + background-color: #fff; + box-shadow: 0 3px 5px 3px rgba(0,0,0,.13); + display: flex; + flex-direction: column; + align-items: center; + background-color: #f3f2ee; + text-align: center; + padding: 20px; +} + +.user__remove { + position: absolute; + top: 5px; + right: 5px; + border: none; + background: none; + font-weight: bold; + cursor: pointer; +} +.user__remove:hover { + background: #fdfdfd; +} diff --git a/62-ajax/index.html b/62-ajax/index.html new file mode 100644 index 0000000..79c45e7 --- /dev/null +++ b/62-ajax/index.html @@ -0,0 +1,56 @@ + + + + + + + Document + + + + +
+ + + + +
+ + + +
+
+ + +
+
+ +
+ + + + + + +
+
+
+ + + + + + + diff --git a/62-ajax/index.js b/62-ajax/index.js new file mode 100644 index 0000000..4c7e3d1 --- /dev/null +++ b/62-ajax/index.js @@ -0,0 +1,132 @@ +// GET ivan.com/users?limit=10&sort=last-name +// GET ivan.com/users/{id} +// path variable - :id {id} +// POST ivan.com/users - create user +// PUT ivan.com/users/{id} - update user +// DELETE ivan.com/users/{id} - delete user + + +// localStorage.setItem('user', JSON.stringify({name: 'ivan'})); +// sessionStorage.setItem('user', 'ivan'); + +// console.log(JSON.parse(localStorage.getItem('user'))); +async function a() { + try { + let res = await axios('https://jsonplaceholder.typicode.com/user'); + console.log('resa: ', res.data); + } catch(err) { + console.log('erra: ', err); + } +} + +async function f() { + try { + let res = await fetch('https://jsonplaceholder.typicode.com/user'); + console.log('res: ', res); + if (!res.ok) { + throw 'request failed ' + res.status; + } + let data = await res.json(); + console.log('resf: ', data); + } catch(err) { + console.log('errf: ', err); + } +} + + + + +const KEY = 'XHk1e8xUVoVSk1NXVDUnmJvkCrXbpSxLWmwW' +const BASE = 'https://gorest.co.in/public-api' + + +async function getUsers(nameFilter) { + try { + const config = { + headers: {'Authorization': 'Bearer ' + KEY}, + params: {first_name: nameFilter} + }; + + const res = await axios.get(BASE + '/users', config); + + return res.data.result; + } catch (err) { + console.log('something bad happened'); + return []; + } +} + +function renderUsers(users) { + const container = document.querySelector('.users'); + container.innerHTML = ''; + + users.forEach(user => { + const userDiv = document.createElement('div'); + userDiv.classList.add('user'); + {/* */} + userDiv.innerHTML = ` +

${user.first_name} ${user.last_name}

+
${user.email}
+ `; + container.append(userDiv); + }) +} + +function createUser(fname, lname, email) { + const config = { + method: 'POST', + headers: {'Authorization': 'Bearer ' + KEY}, + data: { + first_name: fname, + last_name: lname, + email, + gender: 'male' + } + }; + + return axios(BASE + '/users', config).catch((err) => { + console.log('errr', err); + }) +} + +function filterInit() { + document.filterForm.elements.filterApply.addEventListener('click', async function(event) { + const val = document.filterForm.elements.filterInput.value; + if (!val) return; + + const users = await getUsers(val); + document.filterForm.elements.filterInput.value = ''; + renderUsers(users); + }); +} + + +function createInit() { + const fnameEl = document.querySelector('#fname'); + const lnameEl = document.querySelector('#lname'); + const emailEl = document.querySelector('#email'); + const btnCreate = document.querySelector('#create'); + + btnCreate.addEventListener('click', () => { + if (fnameEl.value && lnameEl.value && emailEl.value) { + createUser(fnameEl.value, lnameEl.value, emailEl.value) + .then(() => { + fnameEl.value = ''; + lnameEl.value = ''; + emailEl.value = ''; + }); + } + }); +} + + +filterInit(); +createInit(); +getUsers().then((users) => { + renderUsers(users); +}); +// getUsers().then(renderUsers) + + + + diff --git a/71-generators/index.html b/71-generators/index.html new file mode 100644 index 0000000..c5b81ee --- /dev/null +++ b/71-generators/index.html @@ -0,0 +1,14 @@ + + + + + + + Document + + + + + + + diff --git a/71-generators/index.js b/71-generators/index.js new file mode 100644 index 0000000..bb47b18 --- /dev/null +++ b/71-generators/index.js @@ -0,0 +1,148 @@ +// const now = new Date(2020, 1, 11, 11, 11, 11, 222); +// const now = new Date('2019-01-11T10:10:11.111Z'); +// const now = new Date(); + +// timestamp +// console.log('now: ', now.getTime()); +// console.log('now: ', Date.now()); + +// console.log( now.getDay() ); // нд 0, пн - 1\ +// now.setDate(now.getDate() - 1); +// now.setFullYear(2000); +// console.log( now.getDay() ); +// console.log('now: ', now); +// console.log( now.getMonth() ); + +// console.log( +// now.toLocaleString('ua', {year: 'numeric'}) + ' ' + +// now.toLocaleString('ua', {month: 'long'}) +// ); + + +const now = new Date(); + +const past = new Date('2010-10-10') + +function isAdult(birthday) { + let minDate = new Date(); + minDate.setFullYear(minDate.getFullYear() - 18); + return Date.parse(birthday) <= minDate; +} + +// console.log( isAdult('2005-10-10') ); + +// console.log(performance.now()); + +// for (let i = 0; i < 100000; i++) { +// isAdult('2005-10-10'); +// } +// console.log(Date.now()); + + +// let ivan = {name: 'ivan'}; + +// let obj = {}; +// obj[ivan] = 'hey'; +// console.log('obj: ', obj); + +// let map = new Map(); +// map.set(ivan, 'hey').set('test', 'hello'); + +// console.log('map: ', map); + +// let set = new Set(['adsf', '34', ivan, ivan]); + +// console.log('set: ', set); + +// let arr = [1, 45, 1, 55]; +// arr = [...new Set(arr)]; +// console.log('arr: ', arr); + + +function call(func, context) { + const symbKey = Symbol(); + context[symbKey] = func; + context[symbKey](); + delete context[symbKey]; +} + +function printName() { + console.log(this.name); +} + + + +let user = { name: 'ivan', uniqukey: 'haha' }; + +// call(printName, user); + + +// let symbol1 = Symbol('test'); + +// console.log(Symbol.for('test') === Symbol.for('test')); + +// console.log('user: ', user); +// console.log('symbol: ', symbol1); + +let range = { + from: 0, + to: 10, + [Symbol.iterator]() { + console.log('hey'); + let to = this.to; + let i = this.from; + return { + next() { + let done = i === to; + i++; + return { done, value: i - 1 }; + } + }; + } +}; + +let range2 = { + from: 0, + to: 10, + *[Symbol.iterator]() { + for (let i = this.from; i <= this.to; i++) { + yield i; + } + } +}; + +// for (key of range2) { +// console.log('key: ', key); +// } + + +function* test() { + let input = yield 1; + console.log('input: ', input); + yield 2; + yield 3; +} + +const gen = test(); +// gen.next().value; +// gen.next('hello').value; + +function lateLog(msg) { + setTimeout(() => { + console.log(msg); + }, 100) +} + + +function* counter() { + let i = 0; + while(true) { + yield i++; + } +} + +let count = counter(); +console.log(count.next().value); +console.log(count.next().value); +console.log(count.next().value); +console.log(count.next().value);