From 15f323aee24c9f28e7e3dfa117208a8bfe59eea0 Mon Sep 17 00:00:00 2001 From: Natalia Date: Tue, 24 Jul 2018 11:43:04 +0300 Subject: [PATCH 01/10] phoneApp --- phoneApp/index.html | 12 ++ phoneApp/index.js | 195 ++++++++++++++++++++++++++ phoneApp/style.css | 331 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 538 insertions(+) create mode 100644 phoneApp/index.html create mode 100644 phoneApp/index.js create mode 100644 phoneApp/style.css diff --git a/phoneApp/index.html b/phoneApp/index.html new file mode 100644 index 0000000..93a6e07 --- /dev/null +++ b/phoneApp/index.html @@ -0,0 +1,12 @@ + + + + homework_15 + + + + + + + + diff --git a/phoneApp/index.js b/phoneApp/index.js new file mode 100644 index 0000000..74184df --- /dev/null +++ b/phoneApp/index.js @@ -0,0 +1,195 @@ +class UsersContacts { + constructor() { + this.dataUsers = [ + { + name: 'Иван', + lastName: 'Петров', + email: 'IvanPetrov@ec.ua' + }, + { + name: 'Сергей', + lastName: 'Сергей', + email: 'SergeiSergeev@ec.ua' + }, + { + name: 'Иван', + lastName: 'Иванов', + email: 'IvanIvanov@ec.ua' + }, + { + name: 'Александр', + lastName: 'Александров', + email: 'AlexAlex@ec.ua' + }, + { + name: 'Алекс', + lastName: 'Смирнов', + email: 'AlexSmirnov@ec.ua' + }, + { + name: 'Сергей', + lastName: 'Волков', + email: 'VolkovSergey@ec.ua' + }, + { + name: 'Мария', + lastName: 'Шарапова', + email: 'MariyaSharapova@ec.ua' + }, + { + name: 'Александр', + lastName: 'Винник', + email: 'AlexVinnik@ec.u' + }, + { + name: 'Дарий', + lastName: 'Смирнов', + email: 'DariySmirnov@ec.ua' + }, + { + name: 'Елена', + lastName: 'Лещенко', + email: 'ElenaLeshenko@ec.ua' + }, + { + name: 'Ольга', + lastName: 'Новикова', + email: 'OlgaNovikova@ec.ua' + }, + { + name: 'Наталья', + lastName: 'Шемякина', + email: 'ShemyakinaN@ec.ua' + }, + { + name: 'Анна', + lastName: 'Донцова', + email: 'AnnaDontsova@ec.ua' + }, + { + name: 'Влад', + lastName: 'Яма', + email: 'VladYama@ec.ua' + }, + { + name: 'Кира', + lastName: 'Воробьева', + email: 'Kira1990@ec.ua' + }, + { + name: 'Виктор', + lastName: 'Кривенко', + email: 'ViktorKriv@ec.ua' + } + ]; + this.columnHeadings = ['Name', 'Last name', 'Email']; + }; + + render() { + + document.body.innerHTML += this.createHeader(); + document.body.innerHTML += this.createMain(); + let insert = document.querySelector('main > div'); + insert.appendChild(this.createTable()); + document.body.innerHTML += this.createFooter(); + }; + + createNewElement(newElem) { + return document.createElement(newElem); + }; + + createTable() { + let table = this.createNewElement('table'); + table.setAttribute('class', 'table table-hover contacts'); + table.appendChild(this.cteateTheadInTable()); + table.appendChild(this.cteateTbodyInTable()); + return table; + }; + + cteateTheadInTable() { + let thead = this.createNewElement('thead'); + let tr = this.createNewElement('tr'); + thead.appendChild(tr); + this.columnHeadings.forEach((elem) => { + let th = this.createNewElement('th'); + th.textContent = elem; + tr.appendChild(th); + }); + return thead; + }; + + cteateTbodyInTable() { + let tbody = this.createNewElement('tbody'); + //table.appendChild(tbody); + this.dataUsers.forEach((elem) => { + let tr = this.createNewElement('tr') + tbody.appendChild(tr); + let arrObjkeys = Object.keys(elem); + arrObjkeys.forEach((elemTd) => { + let td = this.createNewElement('td'); + td.textContent = elem[elemTd]; + tr.appendChild(td); + }); + }); + return tbody; + }; + + createHeader() { + return ` +
+
+

Contacts

+
+
+ ` + }; + + createMain() { + return ` +
+
+
+
+ + +
+
+ +
+ ` + } + + createFooter() { + return ` + + ` + } +}; + +let usersContacts = new UsersContacts(); +usersContacts.render(); \ No newline at end of file diff --git a/phoneApp/style.css b/phoneApp/style.css new file mode 100644 index 0000000..5f013f0 --- /dev/null +++ b/phoneApp/style.css @@ -0,0 +1,331 @@ +/** + * Description: main styles + * Version: 1.0.0 + * Last update: 09.01.2017 + * Author: alex.maslennikova19@gmail.com + */ +/*$breakpoints: ( + 'screen-xs': 480px, + 'screen-sm': 768px, + 'screen-md': 992px, + 'screen-lg': 1200px +); +// keywords +$media-expressions: ( + 'screen': 'screen', + 'print': 'print', + 'handheld': 'handheld', + 'landscape': '(orientation: landscape)', + 'portrait': '(orientation: portrait)', + 'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)', + 'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)' +);*/ +.clearfix:after { + content: ''; + display: table; + clear: both; +} + +.ellipsis { + white-space: nowrap; + /* 1 */ + text-overflow: ellipsis; + /* 2 */ + overflow: hidden; +} + +a:hover, a:focus, a:active, a.active { + color: #777; + text-decoration: none; +} + +button { + outline-color: white; +} + +h2 { + margin: 0; +} + +h3 { + margin: 0; +} + +.container { + width: 400px; + background: #ccc; + padding: 25px; +} + +.top-radius { + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} + +.bottom-radius { + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; +} + +.header { + text-align: center; + margin-top: 20px; +} + +.main-nav { + display: flex; + justify-content: space-between; +} + +.keypad-holder { + width: 250px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.number { + margin: 0 auto; + width: 200px; + height: 50px; + margin-bottom: 20px; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; +} + +.number .numbers { + align-self: flex-end; +} + +.key { + width: 60px; + min-height: 60px; + padding: 15px 0; + border-radius: 50%; + border: 1px solid #fff; + text-align: center; + margin-bottom: 10px; + margin-left: 5px; + margin-right: 5px; + display: flex; + align-items: center; + justify-content: center; +} + +.key:last-child { + background: #4cda64; + color: #fff; +} + +.key:last-child:hover { + background: #348f3c; + border: 1px solid #fff; +} + +.key:hover { + background: rgba(0, 0, 0, 0.1); + border: 1px solid #777; +} + +.tab { + display: flex; + flex-direction: column; + align-items: center; +} + +.tab:hover, .tab:focus, .tab:active, .tab.active { + color: #777; + text-decoration: none; +} + +.tab-text { + font-size: 12px; + margin-top: 5px; +} + +.contacts tbody { + display: block; + max-height: 300px; + overflow: hidden; + overflow-y: auto; +} + +.contacts tr { + display: table; + width: 100%; + table-layout: fixed; +} + +.table > thead > tr > th { + border: none; +} + +.form-inline .form-control { + margin-bottom: 10px; + width: 100%; +} + +.form-inline .form-group { + display: block; +} + +.user-top-line { + display: flex; + justify-content: space-between; + margin-bottom: 20px; + font-size: 14px; +} + +.user-img { + width: 100px; + height: 100px; + margin-bottom: 10px; +} + +.user-name { + font-weight: bold; + text-align: center; + margin-bottom: 30px; +} + +.options-line { + display: flex; + justify-content: space-between; + text-align: center; + margin-bottom: 20px; +} + +.options-icon { + border-radius: 50%; + background: #000; + color: #fff; + width: 40px; + height: 40px; + margin: 0 auto 5px; + position: relative; +} + +.options-icon:hover { + background: #777; +} + +.options-text { + font-size: 12px; +} + +.message, .call, .video, .mail { + display: flex; + flex-direction: column; +} + +.icon { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.tel-number { + margin-bottom: 20px; + font-size: 16px; +} + +.options-table { + margin-bottom: 20px; + font-size: 16px; +} + +.options-item { + padding: 10px 0; + border-bottom: 1px solid #777; +} + +.options-item:first-child { + border-top: 1px solid #777; +} + +.scroll-holder { + max-height: 300px; + overflow: hidden; + overflow-y: auto; + margin-bottom: 20px; +} + +.add-foto-btn { + width: 100px; + height: 100px; + border-radius: 50%; + border: 1px solid #eee; + outline: none; +} + +.add-btn { + border: 0; + background: transparent; + width: 100%; + text-align: left; + outline-color: gray; +} + +.done-btn { + background: transparent; + border: none; + outline: none; +} + +.done-btn:hover { + color: #777; +} + +.main-info-holder { + flex-grow: 1; +} + +.edit-main-info { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} + +.edit-foto { + margin-right: 10px; +} + +.edit-field { + padding: 5px 0; + border-bottom: 1px solid #fff; + width: 100%; + display: flex; +} + +.delete-btn { + color: #e32910; + margin-top: 3px; + margin-right: 10px; + border: none; + background: transparent; +} + +.delete-btn:hover, .delete-btn:focus, .delete-btn:active { + color: #a70b0f; +} + +.add-btn { + color: #4cda64; + margin-top: 3px; + margin-right: 10px; +} + +.add-btn:hover, .add-btn:focus, .add-btn:active { + color: #348f3c; +} + +.delete-contact { + color: #e32910; + margin: 0 auto; + font-weight: bold; +} From 4ff03c08e9351acd31613c3193fdd44813867c03 Mon Sep 17 00:00:00 2001 From: Natalia Date: Tue, 31 Jul 2018 16:29:28 +0300 Subject: [PATCH 02/10] update phoneApp --- phoneApp/headerAndFooter.js | 74 ++++++++++++++++++ phoneApp/index.html | 4 +- phoneApp/index.js | 148 ++++++++++++------------------------ phoneApp/keypad.js | 38 +++++++++ 4 files changed, 165 insertions(+), 99 deletions(-) create mode 100644 phoneApp/headerAndFooter.js create mode 100644 phoneApp/keypad.js diff --git a/phoneApp/headerAndFooter.js b/phoneApp/headerAndFooter.js new file mode 100644 index 0000000..ffc5709 --- /dev/null +++ b/phoneApp/headerAndFooter.js @@ -0,0 +1,74 @@ +class HeaderAndFooter { + constructor(caption) { + this.caption = caption; + this.renderLink = [ + {content:'Contacts', icon: 'search'}, + {content:'Keypad', icon: 'th'}, + {content:'Edit contact', icon: 'pencil'}, + {content:'User', icon: 'user'}, + {content:'Add user', icon: 'plus'} + ]; + } + + createHeader() { + let header = ` +
+
+

${this.caption}

+
+
+ ` + return header; + } + + createFooter() { + let done = ` +
+
+ \n
\n
'; + return footer; + } + + createMain() { + return ` +
+
+
+
+ ` + } + + createTemplate() { + document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter(); + } +}; +let headerAndFooter = new HeaderAndFooter('Contacts'); +headerAndFooter.createTemplate(); + + +let buttonKeypad = document.querySelector('a.Keypad'); +buttonKeypad.onclick = function(e) { + e.preventDefault(); + let keypad = new Keypad(); + keypad.displayKeypad(); +} \ No newline at end of file diff --git a/phoneApp/index.html b/phoneApp/index.html index 93a6e07..1506566 100644 --- a/phoneApp/index.html +++ b/phoneApp/index.html @@ -7,6 +7,8 @@ - + + + diff --git a/phoneApp/index.js b/phoneApp/index.js index 74184df..2b220cc 100644 --- a/phoneApp/index.js +++ b/phoneApp/index.js @@ -1,3 +1,4 @@ +//Task3 class UsersContacts { constructor() { this.dataUsers = [ @@ -85,111 +86,62 @@ class UsersContacts { this.columnHeadings = ['Name', 'Last name', 'Email']; }; - render() { - - document.body.innerHTML += this.createHeader(); - document.body.innerHTML += this.createMain(); - let insert = document.querySelector('main > div'); - insert.appendChild(this.createTable()); - document.body.innerHTML += this.createFooter(); - }; - - createNewElement(newElem) { - return document.createElement(newElem); - }; - - createTable() { - let table = this.createNewElement('table'); - table.setAttribute('class', 'table table-hover contacts'); - table.appendChild(this.cteateTheadInTable()); - table.appendChild(this.cteateTbodyInTable()); - return table; - }; - - cteateTheadInTable() { - let thead = this.createNewElement('thead'); - let tr = this.createNewElement('tr'); - thead.appendChild(tr); - this.columnHeadings.forEach((elem) => { - let th = this.createNewElement('th'); - th.textContent = elem; - tr.appendChild(th); - }); - return thead; - }; - - cteateTbodyInTable() { - let tbody = this.createNewElement('tbody'); - //table.appendChild(tbody); - this.dataUsers.forEach((elem) => { - let tr = this.createNewElement('tr') - tbody.appendChild(tr); - let arrObjkeys = Object.keys(elem); - arrObjkeys.forEach((elemTd) => { - let td = this.createNewElement('td'); - td.textContent = elem[elemTd]; - tr.appendChild(td); - }); - }); - return tbody; - }; - - createHeader() { + createForm() { return ` -
-
-

Contacts

-
-
+
+
+ + +
+
` }; - createMain() { - return ` -
-
-
-
- - -
-
- -
+ createTable() { + let self = this; + let thead = function() { + let openThead = ` + + + `; + let createThead = self.columnHeadings.reduce((start, elem) => { + start += `${elem}\n` + return start; + }, ''); + let resultThead = openThead + `${createThead}`; + return resultThead; + } + let tbody = function() { + let openTbody = ` + + ` + let createTbody = self.dataUsers.reduce((start, elem) => { + start += ` + + ${elem.name} + ${elem.lastName} + ${elem.email} + + ` + return start; + }, ''); + let resultTbody = openTbody + `${createTbody}`; + return resultTbody; + } + let resultTable = ` + + ${thead()} + ${tbody()} +
` + return resultTable; } - createFooter() { - return ` - - ` - } + addForm() { + let mainContainer = document.querySelector('main .container'); + mainContainer.innerHTML += `${this.createForm()}${this.createTable()}`; + } }; let usersContacts = new UsersContacts(); -usersContacts.render(); \ No newline at end of file +usersContacts.addForm(); \ No newline at end of file diff --git a/phoneApp/keypad.js b/phoneApp/keypad.js new file mode 100644 index 0000000..805549e --- /dev/null +++ b/phoneApp/keypad.js @@ -0,0 +1,38 @@ +class Keypad { + constructor() { + this.buttonsContent = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']; + } + + createNumberField() { + return ` +
+ + (050)5005050 + +
+ ` + } + + createKeypadHolder() { + let open = '
'; + let createButtons = this.buttonsContent.reduce((start, elem) => { + start += `` + return start; + }, ''); + let createButtonCall = + ''; + let resKeypadHolder = `${open}${createButtons}${createButtonCall}
` + return resKeypadHolder; + } + + displayKeypad() { + let caption = document.querySelector('header h2'); + caption.textContent = 'Keypad'; + let contentKeypad = this.createNumberField() + this.createKeypadHolder(); + let mainContainer = document.querySelector('main .container'); + mainContainer.innerHTML = contentKeypad; + } +}; + +// let keypad = new Keypad(); +// keypad.displayKeypad(); From eee1fa240b6fe1d6aa3ce0a36217bdd09d9100a8 Mon Sep 17 00:00:00 2001 From: Natalia Date: Fri, 3 Aug 2018 12:28:08 +0300 Subject: [PATCH 03/10] update phoneApp --- phoneApp/addUser.js | 71 +++++++++++++++++++++++++++++++++ phoneApp/editContact.js | 77 ++++++++++++++++++++++++++++++++++++ phoneApp/headerAndFooter.js | 60 +++++++++++++++++++++------- phoneApp/index.html | 7 +++- phoneApp/index.js | 74 ++++++++++++++++++++++++++++++---- phoneApp/keypad.js | 24 +++++------ phoneApp/style.css | 4 ++ phoneApp/user-face-mini.png | Bin 0 -> 22600 bytes phoneApp/user.js | 70 ++++++++++++++++++++++++++++++++ 9 files changed, 353 insertions(+), 34 deletions(-) create mode 100644 phoneApp/addUser.js create mode 100644 phoneApp/editContact.js create mode 100644 phoneApp/user-face-mini.png create mode 100644 phoneApp/user.js diff --git a/phoneApp/addUser.js b/phoneApp/addUser.js new file mode 100644 index 0000000..0aa0174 --- /dev/null +++ b/phoneApp/addUser.js @@ -0,0 +1,71 @@ +class AddUser { + constructor() { + this.basicUserInfo = ['First Name', 'Last Name', 'Company']; + this.additionalUserInfo = [ + 'add mobile phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field' + ]; + }; + + fieldsBasicAddUserInfo() { + let open = '
'; + let addPhoto = ` +
+ +
+ `; + let editBasicField = this.basicUserInfo.reduce((start, elem) => { + start += ` +
+ +
+ `; + return start; + },''); + let resEditBasicField = addPhoto + open + `${editBasicField}
`; + return resEditBasicField; + }; + + fieldAdditionalAddUserInfo() { + let open = ` +
+
+ `; + let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => { + start += ` +
+ +
+ `; + return start; + }, ''); + let buttonDelContacts = ` +
+ +
+ `; + let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}
`; + return resEditAdditionalField; + }; + + displayEditContact() { + let captionAddUser = document.querySelector('.container.top-radius'); + captionAddUser.innerHTML = ` + + `; + let mainContainer = document.querySelector('main .container'); + mainContainer.innerHTML = ` +
+ ${this.fieldsBasicAddUserInfo()} +
+ ${this.fieldAdditionalAddUserInfo()} + `; + }; +}; diff --git a/phoneApp/editContact.js b/phoneApp/editContact.js new file mode 100644 index 0000000..f7ef3ab --- /dev/null +++ b/phoneApp/editContact.js @@ -0,0 +1,77 @@ +class EditContact { + constructor() { + this.basicUserInfo = ['First Name', 'Last Name', 'Company']; + this.additionalUserInfo = [ + 'phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field' + ]; + }; + + fieldsBasicUserInfo() { + let open = '
'; + let editBasicField = this.basicUserInfo.reduce((start, elem) => { + start += ` +
+ +
+ `; + return start; + }, ''); + let resEditBasicField = open + editBasicField + '
'; + return resEditBasicField; + }; + + fieldAdditionalUserInfo() { + let open = ` +
+
+ `; + let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => { + if(elem === 'phone') { + start += ` +
+ +
+ `; + } else { + start += ` +
+ +
+ `; + }; + return start; + },''); + let buttonDelContacts = ` +
+ +
+ ` + let resEditAdditionalField = open + editAdditionalField + buttonDelContacts + '
'; + return resEditAdditionalField; + }; + + displayEditContact() { + let captionEditContact = document.querySelector('.container.top-radius'); + captionEditContact.innerHTML = ` + + `; + let mainContainer = document.querySelector('main .container'); + mainContainer.innerHTML = ` +
+
#
+ ${this.fieldsBasicUserInfo()} +
+ ${this.fieldAdditionalUserInfo()} + `; + }; +}; diff --git a/phoneApp/headerAndFooter.js b/phoneApp/headerAndFooter.js index ffc5709..b551f37 100644 --- a/phoneApp/headerAndFooter.js +++ b/phoneApp/headerAndFooter.js @@ -8,7 +8,7 @@ class HeaderAndFooter { {content:'User', icon: 'user'}, {content:'Add user', icon: 'plus'} ]; - } + }; createHeader() { let header = ` @@ -17,23 +17,23 @@ class HeaderAndFooter {

${this.caption}

- ` + `; return header; - } + }; createFooter() { let done = `
\n
\n
'; return footer; - } + }; createMain() { return ` @@ -55,20 +55,52 @@ class HeaderAndFooter {
- ` - } + `; + }; createTemplate() { document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter(); - } + }; }; let headerAndFooter = new HeaderAndFooter('Contacts'); headerAndFooter.createTemplate(); let buttonKeypad = document.querySelector('a.Keypad'); -buttonKeypad.onclick = function(e) { - e.preventDefault(); + +buttonKeypad.addEventListener('click', function(event) { + event.preventDefault(); let keypad = new Keypad(); keypad.displayKeypad(); -} \ No newline at end of file + let keypadHolder = document.querySelector('div.keypad-holder'); + keypadHolder.addEventListener('click', function(e) { + if(e.target.tagName === 'BUTTON') { + keypad.enteringNumbers(e.target.textContent); + }; + }); +}); + + +let buttonEditContact = document.querySelector('a.Edit'); + +buttonEditContact.addEventListener('click', function(event) { + event.preventDefault(); + let editContact = new EditContact(); + editContact.displayEditContact(); +}); + +let buttonUser = document.querySelector('a.User'); + +buttonUser.addEventListener('click', function(event) { + event.preventDefault(); + let user = new User(); + user.displayUser(); +}); + +let buttonAddUser = document.querySelector('a.Add'); + +buttonAddUser.addEventListener('click', function(event) { + event.preventDefault(); + let addUser = new AddUser(); + addUser.displayEditContact(); +}); diff --git a/phoneApp/index.html b/phoneApp/index.html index 1506566..43d67ee 100644 --- a/phoneApp/index.html +++ b/phoneApp/index.html @@ -7,8 +7,13 @@ + - + + + + + diff --git a/phoneApp/index.js b/phoneApp/index.js index 2b220cc..bd264b2 100644 --- a/phoneApp/index.js +++ b/phoneApp/index.js @@ -94,7 +94,7 @@ class UsersContacts { - ` + `; }; createTable() { @@ -110,11 +110,11 @@ class UsersContacts { }, ''); let resultThead = openThead + `${createThead}`; return resultThead; - } + }; let tbody = function() { let openTbody = ` - ` + `; let createTbody = self.dataUsers.reduce((start, elem) => { start += ` @@ -122,7 +122,7 @@ class UsersContacts { ${elem.lastName} ${elem.email} - ` + `; return start; }, ''); let resultTbody = openTbody + `${createTbody}`; @@ -133,15 +133,73 @@ class UsersContacts { ${thead()} ${tbody()} - ` + `; return resultTable; - } + }; addForm() { let mainContainer = document.querySelector('main .container'); mainContainer.innerHTML += `${this.createForm()}${this.createTable()}`; - } + }; }; let usersContacts = new UsersContacts(); -usersContacts.addForm(); \ No newline at end of file +usersContacts.addForm(); + +let table = document.querySelector('.table'); + +table.addEventListener('click', function(e) { + if(e.target.tagName != 'TH') { + return; + }; + sortTable(e.target.cellIndex, e.target.textContent); +}); + +function sortTable(colNum, caption) { + let tbody = table.getElementsByTagName('tbody')[0]; + let rowsArray = [].slice.call(tbody.rows); + let compare; + + switch (caption) { + case 'Name': + compare = function(rowA, rowB) { + if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) { + return -1; + }; + if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) { + return 1; + }; + return 0; + }; + break; + case 'Last name': + compare = function(rowA, rowB) { + if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) { + return -1; + }; + if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) { + return 1; + }; + return 0; + }; + break; + case 'Email': + compare = function(rowA, rowB) { + if(rowA.cells[colNum].textContent < rowB.cells[colNum].textContent) { + return -1; + }; + if(rowA.cells[colNum].textContent > rowB.cells[colNum].textContent) { + return 1; + }; + return 0; + }; + break; + }; + + rowsArray.sort(compare); + table.removeChild(tbody); + for (let i = 0; i < rowsArray.length; i++) { + tbody.appendChild(rowsArray[i]); + }; + table.appendChild(tbody); +}; diff --git a/phoneApp/keypad.js b/phoneApp/keypad.js index 805549e..2226ff7 100644 --- a/phoneApp/keypad.js +++ b/phoneApp/keypad.js @@ -1,17 +1,17 @@ class Keypad { constructor() { this.buttonsContent = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#']; - } + }; createNumberField() { return `
- (050)5005050 +
- ` - } + `; + }; createKeypadHolder() { let open = '
'; @@ -23,16 +23,18 @@ class Keypad { ''; let resKeypadHolder = `${open}${createButtons}${createButtonCall}
` return resKeypadHolder; - } + }; displayKeypad() { - let caption = document.querySelector('header h2'); - caption.textContent = 'Keypad'; + let captionUser = document.querySelector('.container.top-radius'); + captionUser.innerHTML = `

Keypad

`; let contentKeypad = this.createNumberField() + this.createKeypadHolder(); let mainContainer = document.querySelector('main .container'); mainContainer.innerHTML = contentKeypad; - } -}; + }; -// let keypad = new Keypad(); -// keypad.displayKeypad(); + enteringNumbers(text) { + let input = document.querySelector('span.numbers'); + input.textContent += text; + }; +}; diff --git a/phoneApp/style.css b/phoneApp/style.css index 5f013f0..583473f 100644 --- a/phoneApp/style.css +++ b/phoneApp/style.css @@ -329,3 +329,7 @@ h3 { margin: 0 auto; font-weight: bold; } + +nav.user-top-line > a { + color: inherit; +} diff --git a/phoneApp/user-face-mini.png b/phoneApp/user-face-mini.png new file mode 100644 index 0000000000000000000000000000000000000000..1996df7c375c6999fde71d03ab68a049bc840837 GIT binary patch literal 22600 zcmV)CK*GO?P)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>DSKUcOK~#8N?Y#$B zl~=bdY!Z6`5drC7LArn-9Z@<0QWXJ31f&QEf=CDH2o?mDA|PT#5U|(SmDpoqH;E>e z7}I;x@z1$7+xXpc{&VlS_nhy1-??``&wAcXNo23_&N;@IYp(V7`)7KsDvnmJFJ2T- zUm9QASf0?ku`Jl}p6fOrvd8D%w`3@z=d=tCrdW{od;P=l1cm@fb+O$frOw7ICHpKmCNM?-M}*5$_tVAdDLVO>!o>gan629N68Xw;Xb zU;}~FQXv6ma}`HMngonhZvwJZa;;9Mk%4X1>8)+jn<0As3TBT5(vd3HT zDS}rxVzyPMVf*T30vra02LrORnt-dJ>pB9ZCIdTbGwGUT*7xWC_j%Q2kvhtY#Kz?d z(YTz_PToQ^F+o#$;qApIekw)P5(1Bj zK1~uKeL#rFsLmAccL)&rz*w6lt~+b8v8`sQO5ex%=Y6qS+FZ2g5l2H)el!h9WH2C& z`SEDvd{1{ibHvKjFl@+<#`fyW$_R|FerSbh-s&>vo`C|Kdm}z%!>}^yL~ee?xwC2VU^oB*J; zkO3huq@ai>i4!2yEQ=6h9i^qJB}Cwqq6!mcBR?(>F|(X8!_fxQ?5tpGZG$PMMzAn5 z!W1)87#iq7Q%wPy3ZtPmS`On>>^y;WSlEsi~aEd)1OKN?jqynCppI z&QsuKV+w0?6Ie|$gN219EG?%}`f-MX^;8(>Pr_I=HK@vugvv-6D9R4O7@6Tvk{u2e z1p-59G_({)Ltje+7Lz7Hcf2+xPSAz9nI%k3rohg6Ivi}L!_93b0z;!wNF2mb!m_xd zmOxlfsq76P-ULKC7?_<6|DbAYb7^8`bHPGvDM?045xHlY>}E<;EkxdY-AdB5sVG52 z1p~E#xPys(Z3dAyr>v#(Q5YA1)G$v>vowH%(Kx6n$zz=McuF(VU~X;)JI5KYvUP-x zo-uTF^`WVu29;5=7&UYdWQGiY%)obO^v9^d12KBoKmv=Rh9YEw$`}}EYhi+>HVkz1 zVQOdseSLjQB50os~cFqo(dBSTY6clN~;OFJ0Tdv%SmkQ+V(!w2=pXu8S| zVL%3A*uZ{}rSA>tFS+vf`1ce>jUZr@VLDL<6E)R|Z^lvNQTns6fyrbWI68YHFeDZp zUIB=VSb)uI834Nb2?%Lq@L&)a6akDB92%W6`=;Z+_O+!V^$P}rC!LA9ja+hT z=^~1fMc7mjgBCJzn@f|it!k+xLI?728iqM!2<}8w+NhfF!-H* z7&_oB5j~@2he4e<#mvwcwq_QvoNSKi_S1wan>y7)M4+>K0GwRC5wReKBr$` z|Kkum@;89wVs~BM7k$(6U-Q~hn)s3dXrpx0N=}&-)wUI6uF8`MAOfi{_B9||E7H(R zhK?hK%^&jxgHw?-2MM#LVUF`;=%~pUcw;i%0Df~8A}DCCNMF)ukX|{BiB$FG=mTU|Lmq)r@Um}u{=ToR6-!=i zTd_n;wg99oS%9*mDh*q>>dHkx=8-&d(-cA5%9e$HadyVphS%~s?#sUuuXer5v z31(6rLqx5ns0d9JC5jXclB;GkOkhH?RhQI~ih>+e7}4Sz<5{{I!UZdICg@+*f_m^!ItSl_q`BP7}Yqa;e~pE##KBlr1GtlCX2-G64vG zzn-Fl6%_-rxjcnCz!h zSxo36YWgBX0tWrOp#WX=`G24EMd_$_3lTR@JV(Rk!Z=DtDcDM>ile22G(CUa#Fbh0 z9DRVaQG_s&*QU?Ix@F-=4I%kzs0C|-u~3p31jP}9C3iVZmQYSKaeN)GMaqbX-Pmvv z>}+Vl?CjxcV*^)9GX&U~!`IprbEldkc7{C``#NBTg+A;J)GDMKlh zjTrEb_#UT4ZDl1`8c%|~xg|p8M3B#MfZ1d#czF21dnOsq*^%%MiN^9g`m8m1uR)MR z2feS$mw?j;2#>CY{J%zH{(mmfcT{I&GG{PHFc|DPI5lyEY+FI#5KtYY<2i+~q7o)> zd6Xc0HifLHI8||U_}J>h-O@;;9t{Nv4~!f(0J4MMmXPqs5yI@L5l8Ty>_lKpn_>=E z3u6R1SRvBg9%+GYC?PRW8|97F3;nS!HUMj*eUKUGj9^1izZ&ymDC$@Fzs=ZMK~t4t9Q!jZrrh*Z@_<}7ddd+a@g z`74UWrsb5r$aiprv=k*G$YlyKgVADK7#>dE_wYl9w?vHi9Ps;xXL=!C^57320$7a%pZL1uA}c05Inj!5;%yF5M^zILY2S66_t%upx{AB2%KIYS3Z zWb0^(j!{Dg3y{W)7$l;@Y@7yW+E^fN#x$&$?~Y@|k+`}x86R!T!=uglc)Ya`pKUL} zXS-J5@vc?)xU~?MS1&(10jfFJ= zeCHr|RwRKDh1sOEg6Ag+P(1y^;paCOfpfw|0a7~oopll}kpjXIAq9hnh!6&a{?5K> z{EvBUuS))LM=1l6DT$DZB_bjiBmoG0-M%KXkGyG=ks%}(&P7EjIBXPG6L$o=+91%= z0b`haWrm2!;mD8^=57EH?oeUo6lI3NKuZILn#yq1*T7OQ8*Gg8!oJMexU@1Bck9#f zDS`3%&T@R-vsR2RyVl@ER}Eh5S%(K33-F+&0GC$8qb<@6`EJJW88;Go^5k2H>^V|6 zO|t6Z2(-}C6H&r)H+EqP0TL|~*ut1h_|1++aQI?)2ZSRfAyxp;wc)SG;7AdX!S4kS ze{o576M<7#fbPbEAN!{B|LoOPo*d5dc54X}b{0hg`wmW78DNkY6ejEr`kKL#sIFv@ zviSYxvUma~0p&?^kv7i*Nn!5LCW*^LK7vS=0U1HOAxlKdW{$5MAv$U*uo$ZfA2S_f z`q-jA))V`e`Q!4MMYvU$ijSJI@OayDJntb8_N~L$ha2$yu}%2?)9s?xttH^HE{-V#yChSAd46n2&*3fyNRGCBo|;+G&M zF%u#46EJ&j99%v8F*9Hu<`B;`QWkg<5Wb4^#emS{^AOQOUvtVLFhu(5X)O9bs}ghV zpC@-~Wg51XCt>&MYyk#yMEj~t0*Q=Zd4ljDo%A)kaemLmMG+wk2>mXrFE)aUh-{6< zsgOAvB+4D^qS?faApT&lFp8ps2j8`(nhKa@GYL!l9I;j=9zxK^?N zyCa>DHQfMCnzE1|FhGE!Bs&7eWEQ=hJ>c!-hfqpcQBg$ZGiM7zpG|6ORu}_Aq)%iY z5{^xih|S*Cid5{NDCt=H7a&aP z+sYPE>PnKNtW_DprL&^q)YX)`P((^wc_P+iMIt544e^1lP#;CcPj;w;zz0d(^u&$7{#%)5RnB>ToM@O(||x#bJNECo-q$W16}wWQgDy z6eDeII8cN{hDBmwL@X(;ILr=OfG|>8^P)Qwro>)#>oU*o*vx;Kbn~treaoAar zOh%BD4KMVN^yT!#B@{M*TL~}*Z*}^7ES>KS|7oUBmK_NBVO)P2B%(vqoch0mF{4I7 zL5|Dj3b4=_hj0fYHavHKNr0#7YRTfG-u-BrW}fp61?bMg>Q~D;>UBl z@Z-fE{QmxN{Q1Et{Bh?Te!qPdzu!7fqZhw?a0cI&>8dYEmeV!=-@hEpK0~-};tl}_4JLJt7LI^+Zlx)W$Bvc6FOdMPZ7gb?)=TcBabZ}JgmC2po zH&WW_14E3a!hfIY+EbHd#^nzNMVg}6b1*=ho){2Ovnq+hu1W%gK$6zASWQWcAU85B zLM3rWH5tMg)<(ituzP0C7}~$TNEHK#N90LSDapw}fy^M6KO*cWVfkza)W*1D%aWPc zpBs#mr4e{s zUOu{om!Euy-ygh>pFX&NZ%%iSOs>TF0y2F5mT=Y@Ny@9AxG^jYO%don7xvRU37CZl z44jAf_;k!83G7J@-Y+Nuo(vGBt$7jgXsOD6ou*z7X>{;lFbI^6Mu{)!X(|@iJ)kA!)!71oj#UyscyWoNWGDAGtw^QsNg|}RD2Dupt<61 zJ|>0rWM>JU^{mE=1MBhq8Irn}_TrBl?+WgC`GC^Y{mTT%O%WY`J|<8;{|K)h-oc-b z?%?MSd-3&|ZanU8z_m3gsF`gKw{Z%Pr!>mK!gZ=ELPDb8Xzz;IA(5i;8y%B|Ss@FB z%9`OF0)J9pUS6{VU^{AaUW34sF4EQ;fbiJUz+mJGK)RYG!1Oc}{m&hIS53~#-D`6M zAYC=NLdr@&U?r7KAY})3*3MPLDO`FlT|}uYQH+M1D8V73Q92_6-nK@MIWhM9AKu14P}*Vw^IPy{4dI?sTjrGq+_i@keGLjxG z@#&5tJnOE;^Ftdb1#QJo?{(wX8^`hT!_yQUSMloO_X&)fc=hRR{P~c8d2%0k{1IM$ zdKbUmzKU-zAH%c5n{m6P7<*Fuu+T~yIwJ;(k_t;;PFuWS<>owtBE}y+GXgPl<{bD2 zN5aA0ML2l&B_19Ds9c^Q$o+L>^noF{_Q_rzB03}-!eeja@_&2ng!@`|*OJ*;n~PnP zp1L;VV^?(++AAppRXJw9yx+P@ATr2`wWVNKk%5rxQ|zl?&9}P z@8H)vSMcNYv-teo9k{=JHBJ;npv2n@4jQs_->)!zcbqrJWT|G$^Gr#82h!Qe6o zrzeh-&YB!ir{W0VsM$e|oL&0%vLpcrr?a+V$%-M9Jrg`jUhYOLTQm#7ZkA#pNshb* zbA^Zw_8v5Nxm7`aG_=%|F-ct>3#J+%+s|64tBrA<*qZ1i6xQ+l5S*`!z*SCJ^=Y`@ zR)CLp6yx!pYP>j9k8jSjIZocp)p5e5%t~}%QW z@*vT;zHSk2H!Z^_MChM(l;i2XYJ7RLky2J0ejp$6)1^HWA;(B%ogqMaMWp=p;3@(0 zzEE3Yd~zGV-nvK;auQ##FWIvJ@2^k8?j^oRa@2zsr7dkGMOc|yA%G;XI{`A?-dVVI zcPCE-2hD?@Unnf5*udRA5bmC{;58!vsf!b&H7nscq=4|`OZelj==dL_q;LBF_I02- zUuF;4d`?l@sw6UY4*}A%ez|1PiHMt16?+bjAR&dz60w6!;ighagz%a5!7CeCse zYvt2TCqjP6U_s`bt{4cRtY|2Xk`w+zXY^qB8LJ|Gx}E@}A=VAs7yF=xB=6zuSvXxh z7ndrdabtZ7?zUv%;jRjr$khUnFWzk=!?#_SLU!jrUfVCs;jcF(=J1bu?@7GKy{nYQ zt_$h=^W97Id&lwhxgI<{(1JTnxj2*&hz!?BFeIa>r>cU9V>MuJHI<0n8FrSo2qM04 zo#uw<$Rttka&q#9ot>+Q7B^Qf%$l=6kUN*>rI8{9L^|FCaNYhp86tmt>JYL$=W$ra~U+Q=rSn$d+a+{VR6%&0EP%Xb3W<#8Fo-p zkQLrTW~juO4=35n&RlNfaEv6!t|B)a78)ZFW<3E(?xrZ4?TGDkx9-abz`OZjI9V_k z=T|Jm)isN7qizZA5urcaww(B54L(0ohp&$}iRk$G>VEum?GS#ten0^8>x~omjR^kF zJCwTaT*fQn4F-hAZ+G6K-#d=)&hN$Nhnpw`7UD#12rB%|VW%mF@ybe2RZxPp$z;r+ zyML;UBfPz5!_CDLvjgYC$7dEiyn|swDs1|6Pk8x+5MaTmDo7KP&TA!tKj;P**QR_X za0w6sl%m&Pi?p?|aCaXJf4#bDvPCqAq9Fr9X^U0XzKzA$O_9Qrzp*e*^jfhjX8vH1 zScS3gXex@O2%#&PK?Wzn%a+oW9u!#84j%a0cQ69{hCq zfB=Pw{ntzT2$UoE<$X$D%pt@jFDWWS>Z0+IQW*pGC& zuY?K8s?btVftjuzygdBj>@)-BldVOBSXtU3cy<^(+XnreNBnpX~nz&T5m7KcN4D$L1*S;8#NH04~n>0ay!6j}^Q5+$hrkLCZk-X%J zuc3+zW}2uW-pv%n;iRsTXQO^;IJRemp*tfS=jq0{zNG?JTJmtcF%vg8<>6ji38k${ zJUP^e&&j2Kf4)-!2;KERUOgzr&-C>#?~`+<=-_%5t1bqE)7Nh|&xxP?a&bStJl={Y zyVu}KWgIp|I%Do+b!f>A70Pddx+)yZ?cn6#EZT;=J^f%Y*$N9IVqoLohA9@dFg3P- zt<7|}x_HCKYbG{VFMFM;b~g|Zeeb2|i6@`0(y@nbc>dnsRDpL@EVXBz;Nqbuft06+ zww<1J`66ZY)D;Sa#VdfUr1*EG(ZS#`ARIw!$#XCmyq_aJa4PiGM+-9N!kx5vO$r8= zO*G|XV5K!0!4}$B>}7>G?`cT$osRlNf!JF@f*~swD`Ufv5$KAtxiit09*%Qlrw1GH_37>S;R>ZI0^z4?$0$k;z`=<#2iRzL@3%~#MgH!mq zw;SJ`YRA)_wYaf12_2;BqNeCTeRzM-xnf~pD7qY79NmN;ndayUg9#Hw=R6l69jCfM zZ=xaWC`#P8`_a=KWtm9=1Q8_!2p1aP1myLQ0@OsNkpS7-yxhJI4sz!!GkbThNypCB zk^*51O-3t`ILqFi4HQ}o2&pO2nOMO^Mp9wrl67>hZE*)XN6y;x`DiUnL}h9y{2Wch zdO1e{6S?U6pfvT)JMZ8v0)rb5^p!?ZbZ8*n)mXUmJW5$b0rqH14#ImB`Zsq}Q)HB& zbJ<)Z`@18=)dlfEzF40Uf$J^Haer4WKIvSGCkGnv<;m^%_H;YGyU>O2-`k6C&UMmt zzaVd}^!|4DGJgB$eexrB$v6_1+`fQcuN)C;CeQb7z^x5w=%jQRXFHyx?;wmGJ`{T6 z#*sf#z)a$csdi4Hscwp?1zcTy5$GKRYwKy4WMl?i9X;6Fy2I1a0r3$b!VpS9;YoiD zh;;OQPXI%%odM};Df+8Jg-M#bMYdIPWtSqPh&+any=3+K0O8cskh4G#J3Drc5SGIn zO*PpOqP2%RP3rQZQIRqSZkDFhvR(y>CwK#8>1?zB;u7FZlh1efZ&n^Z4mD19C$cLoT2EeveYujZ^r(cMrZg zx&DJ-oc4=V+==hS39s1X`BoWYkBK63d>4 zOY4{6{&hSUJlOc?h=F$u63M%LHTja2OU2fLjkyunkV{G>GZM?={9rUr86yV`7JzWM zeem0o2%&!xg9r4(6pc}sYdsDbJ{DN!VTx>$obe75FilS#Myg71Fw(&|GL6cE-oXqf zUy{e8U~6E2C>wp0%$|ze8D?l$=!0V=3yJ6p@O1Bbd`0s2YjW$)_N>9f_HtaW%|dHx zBnoDEB0tm{mC+$MygDBTtBUZ!o=$w$djj8n_#VE#bO=wnYH&1j7INH8gcspX7;eyJ zKzO~Kr7y22ni-jju6z@HLwLLSiIin#VgW4;O-weL1Yai`tSnee6E0bhk}mB^$(_NF zMuz~R4-9_KSoGUgu}FpaVP_?IjG`DxrwG@kC~Yx^u+r*UUm!~FT*2iC;c|%pgj_p= zDS#p~$mGuZJj#=Up`jonRt9;EoTG!m;0PJ?4zCiv4KG7=B#;qfSI(<~$Ao%4v@{Ak3E(A8lc29S42neRvi;u{ z-Sxavi+62#_y&szu_xy~QF|P8wKQO7VJCKFaoW;WRfYaoP0S}%$RLRE2EmIu7NxQ` z0bx?-MJoZy#^Qi}t))q|49Jd(M6q?Cb$L8mi%H7n#}goI4#@-(0PH*1g|lhoN-xV_ zPG79bxGRx;$cBtatXw)5bIF5nM>_KWmrS^ymU*K;r7H%+MokWjrWv3<)*X9tX5nCN zFisSQp?6gr_LE~S_q9M{vYealLCBPS&qQXCXyrYPgWb+cM_k-O40< z)?GtDkSqV>8vc0Di*MdLfZJPF;0WCyOJ_`l!&pU(8#5ZCi5IlxM`DSeJC4Fqh0UP!%7%Dc&3VGG^giDHjfx;&yAcFn{M(#N%*b6gm_A(49I9r%BOWZmPtU z)>>R>U4>KYa&VX;_SnkBc&~OTo*!$$?;l^s%P$__&-=ajmi))vt`_XC%tfA;6B?^Z zV5>L+!$&J&YsWF@Qoh&KP{8s~AM7bi!UvmHQj|2|BBkb%;At>brN4csq;HI6uZH4i znCMJ|4ar=?i3Xy*m3f43y2%s9W2*ghn2;ag?Q-0w96(XcYwaRc^?@NJ^*6x~gJrKs zS48|QeYaPoKVsFit#q+i$JkU7kL~4Yg4jFOW(u>&RopFHIHbuJ+Yl-UjIw00BT8&j zBS1C~5WJ4gip!CtDYuC7CQM%M7%^lp1`r@(4V@xnwy6eky)98ks%d}vZ1gUV#@&WY z(Gl{Dr0b(Sb-1@ht>m0rK+Wi}>m0c|1OS02e6Tb{C{!SJ5)WTI#?>T^=(uM>hlNpBVdAyQXgbo7BC1w^W}UUNuO;Uo4SKk~XbuZJ_Cb0lmpPZuQ+ zUK`={5O&|JzSx;_Z`L+S6YM|ga$`j#)n!IuUG@Uh@~I5VLNJ{GVMC}kN)97=VTwQz zfDobg@AnqMCKG9Um}A3SH}oV2;(Sg7Zm(H_r`_xE<*{w};$%DdiWc$pXZz~#Xm>R} z*}Y1bz)w0><55oouF;)!wJ8_Rjy99=I}W^fh?h@q;nkyS_~qV3d~@S0?ry6=FY(;_ z%@w$|bsesD@5b#jr*Y@lA$+)V6Hc$n#NsIvaB)=vK4{KIFPYKOSyL%x$wEzrqMIUw zw_J-YcFJR5IDRaw$#1awvozF)9z};Xi4HSe6X8Wn42_^e3X!*1Fqw04Q8YIQV2CTo zweM-@OIcEYnCu%F5Md&JBtWuXvGeBg`j%o&ODUqn&JnO{RgNemvcKScAY9q)sLm0b z!X1U5!u|7Dw z*dHH~lz!H}4&R*Yz&FRp(4E+d7sobovJiRRddHL`LUOxJOi2DRS>2AhF;>Q~eZZAtbjD-oyYVzRNBs8&x@ zR)m$MJtpfLK#%yvMpsQ7Xd?weI$lQz0rh6lk$~ z>}9@SKsY)$dN@LOEkwv(ijal^mb#Liw){I4iNV4=noUp>l9!23UUnoD=)-V?aJph( zxPZ50sv%YeOvMiN5+swaQxraGD#wd`EqJk?T=#({e9fR7YQ&dES_zPKctGauqb;R) z)V&rrT8k(GC|!}MV>0ImdG+ij@ac8n$sN&c!fWc^UOS1;&+Wmd2g!|hti$8O+wkS3 zBl!MLG8hfttk}?S^s1}mM+}yzRE(VQL8#l$VJZ2x#xI7lsq_CLajmM9XG%>3vh;$`S z1V4~~U{KzsloevCig+6x6nR==(*keoPYlB4ycpag3H@Z(I(*U7j2C+w@Wq}D_~IbR z)IF5CI;+J(((TrK@)$+9L}dQamNIt_~FVCyg0lGcj`0HIB&WDL}i4e|Cl+1LE)_n zycDggV<1k4VAVFoY%+AzwM2U?bI5oNEx6h{z{65c9MK^)gpyR%2M7Vc07*+IugRST z{p`nnyK8bE?b*P^!=;ky?Fvd+6d^qLSPbrJ=ewT)VKc~{gbR#fA&Q8e!Qul0SPZZz zC{3CL%L%GN$8%S?ysQjHl7#F}>57Yr3`l^H3Zg8ukv`oBYXTgxXHgK&XAqC9NW!NZ zi|~0zEk5799?yv@p6o2cVgMH3NOL}MTMOESW;;E6ZD`aHv%@s#$x-n7JW|MI$=I(G91j!5aT~p9GWI7 zy)^kEQfLTc$X`=rh{)Oax1MC*Mk4i&>g--#nBo+)tBSa!atTF1npi*Qb#v}C;p@hn zNHi8ii%4P)5$hf-mBl*9LJ2q}NhnR64byQd7(HybSmco#AtU;(xYEmD@R+7O3XxN^ zkz%Khk{OoR5#@~&DIvI47>j#rv+&ub5}NBRA1IT^PkAF;H%HzNd> zNCfcaoZmk!m~Zyn6#SN4Q`TsVw;c{YCji_$gUg;Y$>TN=}DhP#7d#b!FkuHAc%rbM#1<8JfUm zk`W4%!_Y+YBTZ2Z$m?##dI@LnUVgAF!RXD3!d3D@A8p9R#~X8Sw=M@)S0|AY^T+ZTrZ}D#j!SFP zaH=>O*Vd-ud1s9%qlhcF=gJ8TlUe8Ph_f3DAs5r7oL_`!rCL~a=GrX48&8Om!Sg9iz7$YYA? zU;#*!r52V_+N$w)KwFqQ4kh^Gd}cVVvnpDXOkgBqZ^}$$yO|=&Tmwh5!*Qi{8P1f) z<7#ypzBJ|~XI@lS?!^wm2*0(`#iPX!T`Qkcah#-1Jih3m?^YO~^!ep8on^1Zlg~=23 z;O*>!jWj>p?7(2`ZhW(WE|)-&fFX#U)Rq88fI>gtxICa=cTK*E0EA?0*Sb7$_w#BY zr!KL>mVjy_1IQ|iyAk>4%pYQuNy_ycO%3_+B5h?y_>%Nf#Av#s#*o4i5z^<_*%)$! zSf~z1n7JzP$T%d}>7c~R3iY9`*i91nczQ6-E|0>6!f0G5iKgiA#hMUDcxlU_+{+A| zDRV@9>Tv2DJn7jenij-lGbm5!&L>jG!^^muH4Behi}B0FgQBhU70KY&O>+Vey0Q|Z z==kHxyZGtdop?YKv(VN+^dK`JBl`CvgGd07pOPC)SNc9TY;ao>J9svMI+T_tk&B<8 zrH)Ax#u2GoiNiJ}yK%|KHROoM_zM(Cl!y{aUzA8WMHCmgx=t01R&oW-G(cbDX<=^BH2ttfbgjh{5iPv!wnhogZqmJ;hRmKH>?u3j8z^j zE5aL;BuIoyHI+SlWo6T9&1{VU`(PUCKK z4nC+#!s9I!_-20#emU8J-!C1-pYNZ-s|N(khv)I6YD03+$f z;a$2T2fZ!aI#;W?NqqD`8U&E0Dj8n_hTkg@SMsS4ynWl8WN?u83;_n8k0K(ZL6W*8 zQ6lM*=jdRN{>RkS2S>ktJIhmgxuOw<$EK+1*pupy&SXDyFAYLZS`a#y1fnh83(e8)1eyo^ECBnK2I5+I0=_)91HWE9 ziQn&B75)OB-4tHq+Y5VfuVpzNZIM&}zCGB6pU&>ZAD52fkLxG!=ar-Q=|VT2c2(mz z`6!2RW1vDej*%9nt$}Zez3lwAav7dCrSho|s-s2-1u0L&&!F&)$JO5{M#jR2%ye;m5Yr0Jx*bKl8`b*Ja@>m1m^dAP>!jA zfvEO+Iy<9zWvZBXjtHK7>DKA)`YZ`&NTY&=bQQ6y;f*#RZj_S(vY94%7jX$k3r{qw zskRbcBjIyRl0>OptPoOa;~roxIx;9cnDpJPbR}TWP$W0Yq^_tq26Cjhc(*N|XT|j_ zTMZe^C#AK}UK0!L#v#Q?Po%9?b8ILzSs~BY3X5GPiR$ZyaA)jJo`Zww3vhtc)t%-Q z`0`8_zB;lUKV3X5nyO!Yazz+C;lO!M2yp~2TK)X~yZGwNE=pxPDK%}wx5u^#P<}YN z311&=#-|-CL|0^vx3wtuh()x1MCb$FBL0w=Lk46BMT~?~1`5Z{q16 za_uJm$=M6~&Qcosih+K+Ef@4)wG+wtAIZTR-o zcCn}Zt0PVLVox<5@2$bf@)#tznu@M`mgNiz|9uRANL!?`ICV)6LQ`T-LOjU5TU=b^ z^2!9Q@njGU;X2((Y?tN}gZO+cjtu4z20;o4kJk#TFIxIw`0Lf2AGe#2SmJeZCigc1 z5zW*ji#bY|*hL2;MFgj;<{}B7@Uh_~i~ONEMut92fAPojCLI2wmF49zij)bKTt=Z_zm;+-ih1bPTzF`Ep4;&y!U7R+-#7@`YgWeI9Y)(~t6o_!`#3K{5 zwL~k>GD5WJnRg?>hqhy9bSz)wLT0;n|!Tp)s zIZFD&-%tVbr)UUrU*>KoQdU`@H46Q0vDC#F5hmKmcOc{F;)3&GVYt2^5od$uVY8tX zI<2PRlur;2x%yzoR9AGkc%XZxJ5Hy^;uQVOPfzZ|i+5Y`?HNi{CtC31nXNQ7 zl&&_C7+8)|BmP_6YmEM6p_PcZgIZ=gTn$wOH~PG zMw4M{HJJd(e0}zbG)27`9e<@PNyWGAU)zqrFD@{0*+lHN6{b(JY|C2^c)^N+5owFk z6Q?QW7fxB+}gtC}YKc=R;>{OlPy@Td6m z_Q&}7>=}H0>MWkLwBl}ACe9Tn<2LF0XOx=0KD7nkohI&}==kAus{rJy6HRzQ5pupd z1rt=2U;jNc4T8XhIpnlOL+t({?&B**27f+w?7W&dnuH2x0Y0J5#K08J4i4gAX6d0c zB4zP=aoh$ucaql}8ItIb@P}mf|CJYciB^sTUN>hjct`EF$_!DGZ>IFcJz2bcjnkGm zag?MYuO{*{KPr<$v5*Lu&!A#L=ZROR+{#5cKHW!EO-U5#BpW@6N9cpINn{n{qbrZu zMoNgc8;@)+6BPJZhz`ZFARFZRm5vE zM_j-U2lnEpQ~QWFj^euu2l0$ZoFjz6`1Z^e;+jnoKu$N~>tpr!q`e#qTy6WncuRo6 zQNoRU+`7aB&K$y@hohMR;r9#(7Z=%wFuAjfH=U>p-HF5@&Mw$SDPNMF7!2Z(K5(RU zElGq(K>0VfwDG1-juI{w@}19RcXsUJYl;lPDW#GPIs9|!LKUwPa{Et^GZ`!TL%CZ~ zd?4ZsmV|5wStfEzD02w+`t~Ov_>Sb%W*|REq^<>1)JgstAzs{Lhb+-CUWV&E(CCPJG=~Avr}(q$!S)vL)g@4^i zu7>yk+z-pAO!Eifnid~4Gg@vq)Z|ACw=Q+<35R`baWcF&@~m$eV@_I+6o%IBO0rlr6%|h8#TZsTE#>0r}Ax_~YYyzZ# z_=6i8SYdI5RHlT82$`rYFE;3iltq6$e^6P@!@~zdo>G~Hs-kf3LkKVqbKc%2YDR3r z$asw(Ie=1^k^m*!%M9!0Ps7%vnb<~=uq)LUhjQoQL{SV*6-J=9G65gf<>1k-YCP-V z!vi|;!}%VuD~bp2p!)UVUa=YUJ4#nCjy2n!1zWp)-@DO51!7hLS;z~#U%dNkWZdOazKqB z^?Hf-U{Ly|`+xpwE{-ajwoWv}03gbox9(|xb-Rf(Pdc9+c zOV%tOIZ9aWa*rc z5`P@Z492j{7 z$Gq^SK?;j|ez_Cg-^&M^NEC6USIQr+Q`0ojDF zPcnIT3TOWFr9)yP&evym;qm@@+-O)Pnj(%{J0ubglUh9`^M*RyA79D)& zD=JXLQ)*Ha=R?YhRLoJs>59*UWGT;GHGK5B)nseIBMasPVoOaXcCVM54KEJLWKakU z0R)5e?}-lSYh(T*6_&jm6)bz%t@C^C#S+hv%8wFhjU%KkXCbl|c)@Oxrlhb)q|K2b z?lejZynBjOiiSKXE%}k+gRul=p!obOWdc#1#}IP&GW}twFaR!NWe{$riZoYav2&^+ z${ii4K{!KR=t^xSZcz%jzqJCNb*`h7RgW)E@a`#c<>$J@`zQOG#g?~Ab(uJ`YB4UX zO2+%m%WQJ1KQ*yhS0QAfycXRMZ??O_BFUfx%x;+G!7L-f*ZKG4fPiNURPEqG)K#b0wPzRM+}mz_p_>! zL<{|0a`MnnRumDSJw_QSDr%x$#Wxi5hS=(+swS3pxeJAx0WHj};b3Khii{)y1ef0> zN61Q!lI@}!gWnS<|9eOL@r$d#l6FxdZ%R)rc_oEJNx6jggK&AJGARu6+$<61ZX(Lp zoM*XE$Bvip#KCV%z!^i~&8uzF^#v_8b*S@U$qGYYqC5-+3WG3CZUFS;2f$2eAf~Df zf$v0laZ*nhBy$&5Ns3C^e;{D<>SCO9OF) z$p2U>wk4TC$AZ!M?0IE1jo+3g~^jmR<;soun;`k4> zkpu{V!9Y!%pbxb%WONA#jvi$K&U&&XrrAwLeVK&NU!M=pU@)Fup2Gm#9%h@RF>Cx+=zNXo$(TqRG})Qh=_C67)3HVW_JoB1BVFMJ!FLs;a`#!HE=> zJ2tIKe?9q9K$uTD>a)>P_aF2yvHHB&AGt-8BZAWu8$musL!9hDyuv3|$9Ov;JK9$w zdx@l3WibIVcW^|o6z2S^p(rm%k=GFzI2~1G7?VnIoiK`qB5c%$!JN{SgZfZ->Bu3% zLJbL12?%FhWV#t*iQ@#sPEkd!yB;=0yP!MGAA3oK9nK8Ek*q+RE)K43qC)xNvN@V6d~&txFKe?C*16&h!sta4vq*;UD~P?35tqhp@~~YxmDEK(hlBU z{ur;OA~xjk{tyElLyT3|CUvDM)_b@Mo}WSD?cphokCi^wqHBYs4A1X7H{|}u9HcCL z)nv{Wi&Ol7NRAHi@H18s2hg~TmxGuVG7(T-Al+Fpid2kJx<^_M5N(se7I9B#%na>oq`{;1AdjKr`Y z@q7}N;#`p)EiVft#ZjVzeZn{$nq(cZ>(+Uy3xfRTh@}L6I*+A=jQ~q`oSuj#PHmG- z&51wk5VIg$Jl#zKg5=%nig?4ONU$R1%TGdj|QuMc!gyVlWBQrr5#I zz!Wx?4u}X1hn^NiGJ(Y>1Su;kL1*kZQeukG)*MTqIl;%>3&rVif;%M76#0uo{?nf1 zwk~77coN%dKsZYBqOd+=9s;JDP)O6=FC;IKI{6A#TDaNQ5#khG_lCV81tuS!AnnpqGOC$w94_EgcASBSP?WuaK!$C2qN%!eAtqUTYT=x zjuL#*U5h7s>quo)Nh0GEMa9t;aZ1CN5Yfx zm{A0VHt~ikbhNZ!ZaxKuH1ST;oW;}JSjt9(EkFRJBLh8S*qT}k{^94E@Di@11W(JnmeD$9vb|vu-{=s|{bB+J>*scZky**c`q%-9enP z77el9*u16?+t=hFao!vlj8!EGJ3%<@@tWgcV`VEI9^*t4%m>RD85qOG(G}sr;qY?x z#2E4=oU#liOc0G5S{mAzVrqpMu3ku67>UMJlBi%HxHqePeb(RS$!&GH(O=Z_iK9#B zB5dYVMEKev$k`kdHAji39>`HNSn8|L9i;{v6Jywz>JnEdP&ykf9!aDzdKh#SBL49e8p3|E9?W%Bps6q%i|2V_WnD8oJe@I- zCVT>S_$kXld*l#tb<|aZhmp2u-851jiQviFNb$B8`_FkjJ=@y?%e^hp80n7oL|@VV zbG9rNHyU$rZ)YVw?yA8fGJzlOs=|YvE5z35=SMb*EpFeO@5T>T4&d9X`$ZL)%O~xb zp*XT-1G?JQA$36rJf}~^WCL9o>oI|khq;-Bc<7kT6bo2eIY6J%lRn8?H$HpO$6qus zum>?3KS3BqHBwkE#2ubao=9FuB8MyiA3e?u4!dfy{=N?dlfKepLticq_r;?5KA0cq z4lg?+0ZM-I9K^98D)?zP6DcZY=&Oozvg~yyz(Gd^t~#nn zbefC^cPFugTjFPp`UrP)kSpij-k$Ve@gSGps$|@3DZw3b=1l7BzXa{}b+V{LeG zcDtx)eM^JW7N4hek^j-^nHHp&=?|k10@-RnvcUgoAI#I z8wY=r@$fTJN0hxGDhS*Sv4L0@?uNQ(PaGm8cd9fN=c|{9gJ$?ZfO|Vu;^UrL0R(RX z<#S4&lhN7`6le zAJsRVCYYZgVl~+Yqh(~EsjQ5t<~DG)vVs2i@nS)W57gm$oTKeD_|Nc1+0q#CeD)m# zM%(K2|JnyjN?%zC;l0Vx0pMs^wIUBo(~}V7J{2Ce#_*bMh1lR3aIrQLRbAB){b8#q zhad|b#5ftj-&_xVCYp%1*GB<4@4SHND4Xkz9ZQ07v@izyIMw7w;KG_EqBzLXl|i}F zT8R7YRrsW1rBGNec>Vm?W&)){C@UUMkF;Pn{kInn_h9?_Dl~4W#r&X|@Nlq#)g%*f z9*e1wvDjJ5kK}Wi?jh2ay1J&=N};E&F3vQWJaM9EV&I~pCPfGvLuY$uq$~(UYh@bR z)@ESq+Vp>nN3Tj>8H++P7lpW^sH_w>KmG^>$q^{ZPR3G7T}xuaU~g_Do&hycVGw+b z)DUi`BMzSlv(^!3U@fwrfZBy#Xip2ly4WCWPm92ztVohyoChZ9R*Jv$q;b8?cAydVhqDN)Etia=gsD3+%sz>Iieocus|>5f4(DX1iu zNl0-w6W+sriUAU)8e&u23>+;<#O3vQ*ccmtu4VJkks6F6WJWKnP8Ww_Uamicbj`u2;P{E^*}C_QPuH%$gJ&Yg>)8M-QN>x&#g7IY^712VW=NPd)(_`r~0~ zU_j}LQWCjwH#a|u4hxK@)FfTIQI?g#SViI(H5E}<97h20e-j<#iWMaF8%mR~b8YHB z=Ht8Hd~K~;@x%JkOe|j#j;g#Al%*w#ovpmtbD{l2EcGx!hB!se8kv5U2&ELl8+Udj z&cKE0rMTZwhZAK9XpRrW?(|R`N}rDtIpH{85{HW`lW>EjZ)3JNO_UoPzMxd~f}-R3 z@y&RAumM-a7nWCnBc z6kONhRZRwjuN)ORV-!S{db-6V9NV)Ew=bW^`FHpI<3Hg3%~#!;yzrGJS=d%nf-QAb z2rwEW8mgDioFW>i3j?fC8tj0wP)CH=OhPiHuw6-hxVy6k5BG1zhm8dU#$0Sq3cy~9 z65dsHJUbMpmq&^xuidQ6#HSr=gva>e*cQPdTtNJgl-Ke0MqE7BgYIojIJmtIyPK;i zTB9+`#U6pK_5u)lGvWbT2bda=*RXaJTM76%yWG*vH8}2!;i@zbK2XL|M-z=TYjAMq zMm)H6^*^R+`}clv?f=-mZIAerxl&(qtc`HOnz@cx88Q{C=Q^W0+!-|yu1NDV7p}Z# zX(*|pCVY0X6CZci<2V_?gPHTix<_ZCKMrSv;AGxB^p?cpK~o-{?p!HqReZGHbABGk zmU6teuNChe?7`8V?Ks@E6$eS~mMlv`%p4y?csnE9*8_9hr@>_6SeWTg6zdqedtaK(Ya;DRU@L0xSvv1xtfqkqw*{?GX8ERI&*mN*lgX|vH3KLZx9KaJDE0w>G4U zBmB6zfsNl+CwJjd=Q?yQorgQudU5Vh7p|N+h-;@0qi$6pYRi^mwub{!qr(sp;E51d zTcoBefwsDuaOwuSlb}do@ZOJ6gC&pecSg2ap-Dq}3b;6_T`)o-4`2@_C7X8yqxbhfePM^Z)z4dQtWL`3j*X5PBZsfoMU84v>FmF%E?|M=?ZKl;@k6!gyNqS)5=Dwkky@+=%l z3zeL)d$U)vllDL}ZZ+iL@`@O|w;~SLRwaw0nVuisEY4N@>fLsH(!CJ}a^rBCc;jSO z6K>tSj*sttfcCAes3}~6^6XUPCdZ;^Njzfb1;NeA6f>P2#Y!KqV6q$MwHj7Y!w2@~ z#^-;#*Y^LGS8slz%+<0*UEjSg0py#@hw*q{6YkdM;(BE~uB}MK1CqMW_BKKsaz^Qj zw?5x)tw4Kz0^U2ek0Rs@?%%qBZB4akTa}Ca3WvK}kiIAm8L5fbO<=4m%0$#GZ_IYFg{`?suY#PM z9sM)^{A%gH`t`7FmGaX)8v`EgsI7g_wzBs~Ud*G-mAOCc* v(cX?tz2&*-wJXbt16CCm{}ZXBe*OMGW7WOcDtT)t00000NkvXXu0mjf4%x2Y literal 0 HcmV?d00001 diff --git a/phoneApp/user.js b/phoneApp/user.js new file mode 100644 index 0000000..6c20832 --- /dev/null +++ b/phoneApp/user.js @@ -0,0 +1,70 @@ +class User { + constructor() { + this.options = [ + {option: 'message', class: 'glyphicon-comment'}, + {option: 'call', class: 'glyphicon-earphone'}, + {option: 'video', class: 'glyphicon-facetime-video'}, + {option: 'mail', class: 'glyphicon-envelope'} + ]; + this.additionalOptions = [ + 'Notes', 'Send message', 'Share contact', 'Add to favorites', 'Share my location', 'Block this caller' + ]; + }; + + showUser() { + return ` + # +
User Name
+ `; + }; + + lineOptions() { + let open = '
'; + let optionsLine = this.options.reduce((start, elem) => { + start += ` +
+
+ ${elem.option} +
+ `; + return start; + }, ''); + let resOption = open + `${optionsLine}
`; + return resOption; + }; + + telNumber() { + return ` +
+

mobile

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

home

+
+38 (093) 989 89 89
+
+ `; + }; + + tableOption() { + let open = '
'; + let optionsTable = this.additionalOptions.reduce((start, elem) => { + start += `
${elem}
`; + return start; + }, ''); + let resOptionTable = open + `${optionsTable}
`; + return resOptionTable; + }; + + displayUser() { + let captionUser = document.querySelector('.container.top-radius'); + captionUser.innerHTML = ` + + `; + let mainContainer = document.querySelector('main .container'); + mainContainer.innerHTML = `${this.showUser()}${this.lineOptions()}${this.telNumber()}${this.tableOption()}`; + }; +}; From 283863e3843ab4a0d4165c8d5e20a0c27c1a2368 Mon Sep 17 00:00:00 2001 From: Natalia Date: Tue, 7 Aug 2018 16:13:24 +0300 Subject: [PATCH 04/10] update phoneApp (07.08.18) --- phoneApp/addUser.js | 124 +++++++++++++++++------------------ phoneApp/editContact.js | 19 +++--- phoneApp/headerAndFooter.js | 28 ++++---- phoneApp/index.html | 2 +- phoneApp/index.js | 125 +++++++++++++++++++----------------- phoneApp/keypad.js | 34 ++++++++-- phoneApp/style.css | 4 +- phoneApp/user.js | 3 +- 8 files changed, 189 insertions(+), 150 deletions(-) diff --git a/phoneApp/addUser.js b/phoneApp/addUser.js index 0aa0174..de05ac9 100644 --- a/phoneApp/addUser.js +++ b/phoneApp/addUser.js @@ -1,71 +1,71 @@ class AddUser { - constructor() { + constructor() { this.basicUserInfo = ['First Name', 'Last Name', 'Company']; this.additionalUserInfo = [ 'add mobile phone', 'add home phone', 'add email', 'add address', 'add birthday', 'add social profile', 'add field' ]; - }; + }; - fieldsBasicAddUserInfo() { - let open = '
'; - let addPhoto = ` -
- -
- `; - let editBasicField = this.basicUserInfo.reduce((start, elem) => { - start += ` -
- -
- `; - return start; - },''); - let resEditBasicField = addPhoto + open + `${editBasicField}
`; - return resEditBasicField; - }; + fieldsBasicAddUserInfo() { + let open = '
'; + let addPhoto = ` +
+ +
+ `; + let editBasicField = this.basicUserInfo.reduce((start, elem) => { + start += ` +
+ +
+ `; + return start; + },''); + let resEditBasicField = addPhoto + open + `${editBasicField}
`; + return resEditBasicField; + }; - fieldAdditionalAddUserInfo() { - let open = ` -
-
- `; - let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => { - start += ` -
- -
- `; - return start; - }, ''); - let buttonDelContacts = ` -
- -
- `; - let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}
`; - return resEditAdditionalField; - }; + fieldAdditionalAddUserInfo() { + let open = ` +
+
+ `; + let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => { + start += ` +
+ +
+ `; + return start; + }, ''); + let buttonDelContacts = ` +
+ +
+ `; + let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}
`; + return resEditAdditionalField; + }; - displayEditContact() { - let captionAddUser = document.querySelector('.container.top-radius'); - captionAddUser.innerHTML = ` - - `; - let mainContainer = document.querySelector('main .container'); - mainContainer.innerHTML = ` -
- ${this.fieldsBasicAddUserInfo()} -
- ${this.fieldAdditionalAddUserInfo()} - `; - }; + renderAddUser() { + let captionAddUser = document.querySelector('.container.top-radius'); + captionAddUser.innerHTML = ` + + `; + let mainContainer = document.querySelector('main .container'); + mainContainer.innerHTML = ` +
+ ${this.fieldsBasicAddUserInfo()} +
+ ${this.fieldAdditionalAddUserInfo()} + `; + }; }; diff --git a/phoneApp/editContact.js b/phoneApp/editContact.js index f7ef3ab..9ce39ad 100644 --- a/phoneApp/editContact.js +++ b/phoneApp/editContact.js @@ -30,12 +30,12 @@ class EditContact { let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => { if(elem === 'phone') { start += ` -
- -
+
+ +
`; } else { start += ` @@ -52,12 +52,12 @@ class EditContact {
- ` + `; let resEditAdditionalField = open + editAdditionalField + buttonDelContacts + '
'; return resEditAdditionalField; }; - displayEditContact() { + renderEditContact() { let captionEditContact = document.querySelector('.container.top-radius'); captionEditContact.innerHTML = `