diff --git a/Call Book/add-user.html b/Call Book/add-user.html new file mode 100644 index 0000000..951c548 --- /dev/null +++ b/Call Book/add-user.html @@ -0,0 +1,23 @@ + + + + + + + Edit contact + + + + + + +
+ +
+ + + + + diff --git a/Call Book/edit-contact.html b/Call Book/edit-contact.html new file mode 100644 index 0000000..81f4cb5 --- /dev/null +++ b/Call Book/edit-contact.html @@ -0,0 +1,24 @@ + + + + + + + Edit contact + + + + + + +
+ +
+ + + + + + diff --git a/Call Book/index.html b/Call Book/index.html new file mode 100644 index 0000000..403428b --- /dev/null +++ b/Call Book/index.html @@ -0,0 +1,26 @@ + + + + + + + Contacts + + + + + + +
+ +
+ + + + + + + + diff --git a/Call Book/js/add-user.js b/Call Book/js/add-user.js new file mode 100644 index 0000000..c2e5b80 --- /dev/null +++ b/Call Book/js/add-user.js @@ -0,0 +1,64 @@ +class addUser{ +constructor(options){ + + } + + addEditFieldToMainInfo (arr){ + const fields = arr.map(value => + `
+ +
` + ).join("") + return `
${fields}
` + } + + addEditFieldToScrollHolder (arr) { + const scrollHolder = arr.map(value => + `
+ +
` + ).join("") + + return `
+
+ ${scrollHolder} +
+ +
+
+
` + } + + addUserPageOutput (){ + let main = document.getElementById('app') + + main.innerHTML += `
+
+ +
+
+
+
+
+
+ +
+ ${this.addEditFieldToMainInfo(["First Name",'Last Name','Company'])} +
+ ${this.addEditFieldToScrollHolder(['add mobile phone','add home phone', + 'add email','add address','add birthday','add social profile', 'add field'])} +
+
` + } + } + +let myAddUser = new addUser() +myAddUser.addUserPageOutput() diff --git a/Call Book/js/context.js b/Call Book/js/context.js new file mode 100644 index 0000000..651d32f --- /dev/null +++ b/Call Book/js/context.js @@ -0,0 +1,166 @@ + +class Context { + constructor() { + + this.dataBase = [{ + id: 1, + name: 'Vasya', + surname: "Ivanov", + numb: `(099)33-78-130` + }, + { + id: 2, + name: 'Dima', + surname: "Petrov", + numb: `(099)33-78-130` + }, + { + id: 3, + name: 'Grisha', + surname: "Adianow", + numb: `(099)33-78-130` + }, + { + id: 4, + name: 'Jora', + surname: "Shewshenko", + numb: `(099)33-78-130` + }, + { + id: 5, + name: 'Jora', + surname: "Ivanov", + numb: `(099)33-78-130` + }, + { + id: 6, + name: 'Dima', + surname: "Dimonov", + numb: `(099)33-78-130` + } + ] + } + + searchUsers(username) { + let allUsers = []; + this.dataBase.forEach((value, index, arr)=> { + + if (value.name == username) { + allUsers.push(this.dataBase[index]); + + } + }) + + this.dataBase = allUsers + this.buildHtmlTags() + return this.dataBase + } + + + createTh(arr){ + const innerTr = arr.map(value => + `${value}` + ).join(''); + return ` + ${innerTr} + ` + } + + + buildHtmlTags (){ + let main = document.getElementById('app') + main.innerHTML = `
+
+

Contacts

+
+
+
+
+
+
+ + +
+
+ + + ${this.createTh(['name','surname', 'number'])} + + + +
+
+
` + this.outputDataArray(this.dataBase) + + + let formToSearch = document.querySelector(".form-control") + + window.addEventListener("keydown", e => { + + if (e.keyCode == 13) { + this.searchUsers(`${formToSearch.value}`) + } + // console.log(`${formToSearch.value}`); + }) + this.checkUser() + } + + createElement (value, key, index){ + let td = document.createElement('td'); + let rtById = document.getElementById(`tr_${index}`) + rtById.appendChild(td) + td.textContent = value[key] + } + + outputDataArray(options) { + let tabelBody = document.getElementById("tbody_id") + options.forEach((value, index, arr) => { + let tr = document.createElement('tr') + tr.setAttribute('id', `tr_${index}`); + tr.setAttribute('class', `tr_class`); + tabelBody.appendChild(tr); + this.createElement(value, 'name', index) + this.createElement(value, 'surname', index) + this.createElement(value, 'numb', index) + }) + } + + sortUsers(property){ + + var newArray = this.dataBase.sort((a, b) => { + return a[property] == b[property] ? 0 : a[property] < b[property] ? -1 : 1; + }) + let tabelBody = document.getElementById("tbody_id") + tabelBody.innerHTML = ""; + return this.outputDataArray(newArray) + } + + checkUser(){ + let allTr = document.querySelectorAll(".tr_class") + allTr.forEach((tr, index, arr)=>{ + tr.addEventListener("click", a =>{ + let allTd = tr.querySelectorAll("td") + + let innerTdName = allTd[0].innerHTML + let innerTdSurname = allTd[1].innerHTML + let innerTdNumber = allTd[2].innerHTML + + console.log(innerTdName); + console.log(innerTdSurname); + console.log(innerTdNumber); + + }) + }) + + + } + + + + +} + + +let myContext = new Context(); +myContext.buildHtmlTags() diff --git a/Call Book/js/edit-contact.js b/Call Book/js/edit-contact.js new file mode 100644 index 0000000..458a23c --- /dev/null +++ b/Call Book/js/edit-contact.js @@ -0,0 +1,64 @@ +class EditContact { + constructor (options){ + + } + addEditFieldToMainInfo (arr){ + const fields = arr.map(value => + `
+ +
` + ).join("") + return `
${fields}
` + } + + addEditFieldToScrollHolder(arr){ + const scrollHolder = arr.map(value => + `
+ +
` + ).join("") + + return `
+
+ ${scrollHolder} +
+ +
+
+
` + } + + editContactPageOutput(){ + let main = document.getElementById('app') + + main.innerHTML = `
+
+ +
+
+
+
+
+
#
+ ${this.addEditFieldToMainInfo(["First Name",'Last Name','Company'])} + +
+ + ${this.addEditFieldToScrollHolder(['add mobile phone','add home phone', + 'add email','add address','add birthday','add social profile', 'add field'])} + +
+
` + + } +} + +let myEditContact = new EditContact() +myEditContact.editContactPageOutput() diff --git a/Call Book/js/footer.js b/Call Book/js/footer.js new file mode 100644 index 0000000..bc47662 --- /dev/null +++ b/Call Book/js/footer.js @@ -0,0 +1,52 @@ + +class Footer{ + + constructor(){ + + } + createNav (classes, context, bull) { + + if (bull) { + return ` ${context}` + }else { + return ` ${context}` + } + + } + + footerOutput (){ + let footer = document.getElementById('footer') + footer.innerHTML = ` + ` + } +} +let myFooter = new Footer() +myFooter.footerOutput() diff --git a/Call Book/js/keypad.js b/Call Book/js/keypad.js new file mode 100644 index 0000000..55b6946 --- /dev/null +++ b/Call Book/js/keypad.js @@ -0,0 +1,125 @@ + +class Keypad { + constructor (options){ + + } + + + + outputNumb(value){ + let numb = document.getElementById("numberInput") + numb.innerHTML += value; + } + + + glyphicon(){ + let numb = document.getElementById("numberInput") + numb.innerHTML = ""; + } + + + + + addUserPageOutput() { + let main = document.getElementById('app') + + main.innerHTML = `
+
+

Keypad

+
+
+
+
+
+ + + +
+
+ + + + + + + + + + + + + + + +
+
+
` + + + + let placeNumbers = document.getElementById("numberInput"); + let keypadsButtons = document.querySelectorAll("button.numbersInKeypad"); + [...keypadsButtons].forEach(keypadButton => { + keypadButton.addEventListener("click", function(event) { +if (placeNumbers.innerHTML.length <=15) { + + + if (keypadButton.innerHTML == "#" && placeNumbers.innerHTML == "" || + keypadButton.innerHTML == "*" && placeNumbers.innerHTML == "") { + placeNumbers.innerHTML += `${keypadButton.innerHTML}` + } else if (placeNumbers.innerHTML[0] == "*" || + placeNumbers.innerHTML[0] == "#") { + placeNumbers.innerHTML += `${keypadButton.innerHTML}` + } else if (keypadButton.innerHTML != "#" && placeNumbers.innerHTML == "" || + keypadButton.innerHTML != "*" && placeNumbers.innerHTML == "") { + placeNumbers.innerHTML += `(${keypadButton.innerHTML}`; + } else if (keypadButton.innerHTML == "#" && placeNumbers.innerHTML[0] == "(" || + keypadButton.innerHTML == "*" && placeNumbers.innerHTML[0] == "(") { + placeNumbers.innerHTML = placeNumbers.innerHTML + } else if (placeNumbers.innerHTML.length == 3) { + placeNumbers.innerHTML += `${keypadButton.innerHTML})-` + } else if (placeNumbers.innerHTML.length == 8 || placeNumbers.innerHTML.length == 11) { + placeNumbers.innerHTML += `-${keypadButton.innerHTML}` + } else { + placeNumbers.innerHTML += `${keypadButton.innerHTML}` + } + } + }) + }) + + window.addEventListener("keydown", e => { + + + if (e.keyCode <= 57 && e.keyCode >= 48 && placeNumbers.innerHTML.length <= 15) { + + + if (String.fromCharCode(e.keyCode) == "#" && placeNumbers.innerHTML == "" || + String.fromCharCode(e.keyCode) == "*" && placeNumbers.innerHTML == "") { + placeNumbers.innerHTML += `${String.fromCharCode(e.keyCode)}` + } else if (placeNumbers.innerHTML[0] == "*" || + placeNumbers.innerHTML[0] == "#") { + placeNumbers.innerHTML += `${String.fromCharCode(e.keyCode)}` + } else if (String.fromCharCode(e.keyCode) != "#" && placeNumbers.innerHTML == "" || + String.fromCharCode(e.keyCode) != "*" && placeNumbers.innerHTML == "") { + placeNumbers.innerHTML += `(${String.fromCharCode(e.keyCode)}`; + } else if (String.fromCharCode(e.keyCode) == "#" && placeNumbers.innerHTML[0] == "(" || + String.fromCharCode(e.keyCode) == "*" && placeNumbers.innerHTML[0] == "(") { + placeNumbers.innerHTML = placeNumbers.innerHTML + } else if (placeNumbers.innerHTML.length == 3) { + placeNumbers.innerHTML += `${String.fromCharCode(e.keyCode)})-` + } else if (placeNumbers.innerHTML.length == 8 || placeNumbers.innerHTML.length == 11) { + placeNumbers.innerHTML += `-${String.fromCharCode(e.keyCode)}` + } else { + placeNumbers.innerHTML += String.fromCharCode(e.keyCode); + } + } + + }) + + + + } +} + +let myKeyad = new Keypad(); +myKeyad.addUserPageOutput() diff --git a/Call Book/js/user.js b/Call Book/js/user.js new file mode 100644 index 0000000..0a27391 --- /dev/null +++ b/Call Book/js/user.js @@ -0,0 +1,75 @@ +class User{ + + constructor(options){ + } + + + optionsTableuOtpu (arr) { + + let table = arr.map(value => + `
${value}
` + + ).join("") + return `
${table}
` + } + + + + optionsLine(text, className){ + let i = 0; + + let table = text.map(value => + `
+
+ + ${value} +
` + ).join(""); + + return `
${table}
`; + } + + + addUserPageOutput () { + let main = document.getElementById('app') + + main.innerHTML += `
+
+
+ + + Contacts + Edit +
+
+
+ +
+
+ # +
User Name
+ + + ${this.optionsLine(["massege","call","video","mail"], + ["glyphicon-comment" ,"glyphicon-earphone","glyphicon-facetime-video","glyphicon-envelope"])} + + + +
+

mobile

+
+38 (093) 989 89 89
+
+
+

home

+
+38 (093) 989 89 89
+
+ ${this.optionsTableuOtpu(["Notes" , "Send message","Share contact","Add to favorites", + "Share my location","Block this caller"])} + +
+
` + } +} + +let myUser = new User() +myUser.addUserPageOutput() diff --git a/Call Book/keypad.html b/Call Book/keypad.html new file mode 100644 index 0000000..ec9673b --- /dev/null +++ b/Call Book/keypad.html @@ -0,0 +1,27 @@ + + + + + + + Keypad + + + + + + + +
+ +
+ + + + + + + + diff --git a/Call Book/user.html b/Call Book/user.html new file mode 100644 index 0000000..502be8a --- /dev/null +++ b/Call Book/user.html @@ -0,0 +1,27 @@ + + + + + + + User + + + + + + + + +
+ +
+ + + + + + + diff --git a/homework-1/index.html b/homework-1/index.html deleted file mode 100644 index db953fa..0000000 --- a/homework-1/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - diff --git a/homework-1/js.js b/homework-1/js.js deleted file mode 100644 index f5c5b2a..0000000 --- a/homework-1/js.js +++ /dev/null @@ -1,21 +0,0 @@ - -const user = { - name: "Petia", - -}; - -const alexMassagers = ["Facebook", "vk", "Telegram"]; - -const contact = { - -ifHavePict: true, -name: "Alexander", -famale: undefined, -workNumb: null, -number: 0502724890, -masagers: alexMassagers, -commonFriends: user, - -}; - -console.log(contact); diff --git a/homework-2_1/index.html b/homework-2_1/index.html deleted file mode 100644 index 04dc733..0000000 --- a/homework-2_1/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - diff --git a/homework-2_1/js.js b/homework-2_1/js.js deleted file mode 100644 index 0c91cfa..0000000 --- a/homework-2_1/js.js +++ /dev/null @@ -1,58 +0,0 @@ -/* - 1. Составить предложение из нижестоящих переменных: - "Сколько нужно программистов чтобы сделать проект ? 1, 25, команда" - */ - -let numbers = [25, 1]; -let project = 'проект'; -let team = `команда`; -let howMuch = 'Сколько'; -let sentence = 'нужно программистов чтобы сделать проект ?'; - -let task1 = ` ${howMuch} ${sentence.replace("проект", project)} ${numbers[0]}, ${numbers[1]}, ${team} `; -// console.log(task1); -/* - 2. Составьте предложение из представленного массива - и выведите предложение в консоль; - "Так, когда Будда достиг Просветления, он обнаружил, что больше не ощущает себя мишенью. - Он не был больше ни телом, к которому рано или поздно ..." - // index +++ - */ - -let array = [ - 'Он', - 'был больше ни телом, к которому рано или поздно', - 'он обнаружил', - 'не', - 'Так, когда Будда достиг Просветления', - '...', - 'что больше', - 'ощущает себя мишенью', - 'не' -]; - -let homeSentence = ` ${array[4]}, ${array[2]}, ${array[6]} ${array[8]} ${array[7]} -${array[0]} ${array[3]} ${array[1]} ${array[5]}`; -// console.log(homeSentence); -/* - 3. Добавьте свойста 4 новых свойства в объект используя - квадратные скобки и точку. - */ -const fff = 222; -let myObj = {}; -myObj.first = 1111; -myObj.second = ["Hello"]; -myObj.second[1] = "World"; -myObj.therd = 1111; -myObj.fortse = 1111; -myObj[fff] = 2222; - -// console.log(myObj); -/* - 5. Преобразуйте строку x, - в максимально удобно и читаемый для программиста вид - */ - -let frameworks = [4.7, 'Angular', '6Angular', 'React/Redux']; -let x =`google released new version ${frameworks[1]} ${Math.floor(frameworks[0])} But real speed is ${frameworks[frameworks.length - 1]}`; -console.log(x); diff --git a/homework2/index.html b/homework2/index.html deleted file mode 100644 index 13c7949..0000000 --- a/homework2/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - Hello World - - - - - - - - - - - - diff --git a/homework2/js.js b/homework2/js.js deleted file mode 100644 index 522dab0..0000000 --- a/homework2/js.js +++ /dev/null @@ -1,58 +0,0 @@ -/* - 1. Составить предложение из нижестоящих переменных: - "Сколько нужно программистов чтобы сделать проект ? 1, 25, команда" - */ - -let numbers = [25, 1]; -let project = 'проект'; -let team = `команда`; -let howMuch = 'Сколько'; -let sentence = 'нужно программистов чтобы сделать проект ?'; - -let task1 = ` ${howMuch} ${sentence.replace("проект", project)} ${numbers[0]}, ${numbers[1]}, ${team} `; -// console.log(task1); -/* - 2. Составьте предложение из представленного массива - и выведите предложение в консоль; - "Так, когда Будда достиг Просветления, он обнаружил, что больше не ощущает себя мишенью. - Он не был больше ни телом, к которому рано или поздно ..." - // index +++ - */ - -let array = [ - 'Он', - 'был больше ни телом, к которому рано или поздно', - 'он обнаружил', - 'не', - 'Так, когда Будда достиг Просветления', - '...', - 'что больше', - 'ощущает себя мишенью', - 'не' -]; - -let homeSentence = ` ${array[4]}, ${array[2]}, ${array[6]} ${array[8]} ${array[7]} -${array[0]} ${array[3]} ${array[1]} ${array[5]}`; -// console.log(homeSentence); -/* - 3. Добавьте свойста 4 новых свойства в объект используя - квадратные скобки и точку. - */ -const fff = 222; -let myObj = {}; -myObj.first = 1111; -myObj.second = ["Hello"]; -myObj.second[1] = "World"; -myObj.therd = 1111; -myObj.fortse = 1111; -myObj[fff] = 2222; - -// console.log(myObj); -/* - 5. Преобразуйте строку x, - в максимально удобно читаемый для программиста вид - */ - -let frameworks = [4.7, 'Angular', '6Angular', 'React/Redux']; -let x =`google released new version ${frameworks[1]} ${Math.floor(frameworks[0])} But real speed is ${frameworks[frameworks.length - 1]}`; -console.log(x);