Phone app

phoneApp/common/footer.js

@@ -0,0 +1,42 @@
+class Footer {
+  constructor(){
+    this.renderFooter();
+  }
+
+  renderFooter() {
+    document.body.innerHTML += this.createFooter();
+  }
+
+  createFooter(){
+      return `<footer class="footer">
+                <div class="container bottom-radius">
+                  <nav class="main-nav">
+                    <a href="index.html" class="tab active">
+                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+                      <span class = "tab-text">Contacts</span>
+                    </a>
+                    <a href="keypad.html" class="tab">
+                      <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
+                      <span class = "tab-text">Keypad</span>
+                    </a>
+                    <a href="edit-contact.html" class="tab">
+                      <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                      <span class = "tab-text">Edit contact</span>
+                    </a>
+                    <a href="user.html" class="tab">
+                      <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                      <span class = "tab-text">User</span>
+                    </a>
+                    <a href="add-user.html" class="tab">
+                      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                      <span class = "tab-text">Add user</span>
+                    </a>
+                  </nav>
+                </div>
+              </footer>`
+    }
+
+}
+
+const footer = new Footer();
+

phoneApp/contacts.html

@@ -14,5 +14,6 @@
 
 
 <script type="text/javascript" src="contacts.js"></script>
+<!-- <script type="text/javascript" src="./common/footer.js"></script> -->
 </body>
 </html>

phoneApp/contacts.js

@@ -245,6 +245,7 @@ const contactsPage = new ContactsPage();*/
 
 class ContactsPage2 {
   constructor(){
+    this.title = 'Contacts';
     this.tableCaptions = ['Name', 'Last name', 'Email'];
     this.people = [
       {
@@ -335,7 +336,7 @@ class ContactsPage2 {
   renderHeader(){
     return `<header class="header">
               <div class="container top-radius">
-                <h2>Contacts</h2>
+                <h2>${this.title}</h2>
               </div>
             </header>`;
   }
@@ -366,9 +367,11 @@ class ContactsPage2 {
     let tableBody = this.createTableBodyRow(this.people);
 
     return `<table class="table table-hover contacts">
+                <thead>
                     ${tableHead}
-                    ${tableBody}
-                </table>`;
+                </thead>
+                ${tableBody}
+            </table>`;
   }
 
   createTableHeadRow(arr){
@@ -396,7 +399,7 @@ class ContactsPage2 {
     return `<footer class="footer">
               <div class="container bottom-radius">
                 <nav class="main-nav">
-                  <a href="index.html" class="tab active">
+                  <a href="contacts.html" class="tab active">
                     <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                     <span class = "tab-text">Contacts</span>
                   </a>
@@ -421,10 +424,77 @@ class ContactsPage2 {
             </footer>`
   }
 
+  sortColumnsHandler() {
+    let parent = document.querySelector('thead');
+    parent.addEventListener('click', this.sortColumns.bind(this));
+  }
+
+  sortColumns() {
+    let target = event.target;
+
+    this.tableCaptions.forEach((item) => {
+      if (target.textContent == item) {
+          item = this.makeCamelCase(item);
+          this.sortUsers(item);
+          this.render();
+      }
+    })
+  }
+
+  makeCamelCase(str){
+    str = str.toLowerCase();
+
+    if (str.includes(' ')) {        //'last name'
+        let arr = str.split(' ');   //['last', 'name']
+
+        let capitalizedArr = arr.map((item, i) => {
+            if ( i > 0) {
+              let itemToArray =  item.split(''); //['n', 'a', 'm', 'e']
+              let firstLetter = itemToArray[0].toUpperCase();
+              itemToArray.splice(0, 1, firstLetter);
+              return itemToArray.join('');
+            } 
+            return item;
+        }); // end of map
+
+       str =  capitalizedArr.join('');
+    };
+
+    return str;
+  }
+
+  sortUsers(str) {
+     function compare(a, b){
+        if (isNaN(a[str])) {
+
+           if (a[str] > b[str]) {
+              return 1;
+           };
+           if (a[str] < b[str]) {
+              return -1;
+           };
+           if (a[str] == b[str]) {
+              return 0;
+           }
+
+        } else {
+           return (a[str] - b[str]);
+        }
+
+     }
+      //console.log(this.people.sort(compare))
+      return this.people.sort(compare);
+  }
+
+  setEvents() {
+    this.sortColumnsHandler();
+  }
+
   render(){
     document.body.innerHTML = this.renderHeader() + this.renderMain() + this.renderFooter();
+    this.setEvents();
   }
 
 }
 
-const contactsPage2 = new ContactsPage2();
+const contactsPage2 = new ContactsPage2();

phoneApp/keypad.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Keypad</title>
+	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+	<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
+<!-- 	<link href="css/bootstrap.css" rel="stylesheet"> -->
+	<link rel="stylesheet" href="css/main.css">
+</head>
+<body>
+
+
+<script type="text/javascript" src="keypad.js"></script>
+<!-- <script type="text/javascript" src="./common/footer.js"></script> -->
+</body>
+</html>

phoneApp/keypad.js

@@ -0,0 +1,123 @@
+//Нужно визуализировать keypad.html - keypad.js
+
+//Структура виртуализации:
+// ------ Это 2 разных класса KeypadPage, ContactsPage  -----
+
+//innerHTML по максимуму
+//https://aleksandra-maslennikova.github.io/telephone-book/keypad.html
+
+//Сделайте чтобы при нажатии на кнопку цифра отобразилась
+//в <span class="numbers">
+
+//https://aleksandra-maslennikova.github.io/telephone-book/index.html
+//По клику по заголовку таблицы,
+//таблица сортировалась по соответствующему свойству
+
+class KeypadPage {
+  constructor(){
+  	this.title = 'Keypad';
+    this.buttonsValues = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '*', '0', '#', ''];
+    this.render();
+    //this.buttonsHandler();
+  }
+
+  renderHeader(){
+    return `<header class="header">
+              <div class="container top-radius">
+                <h2>${this.title}</h2>
+              </div>
+            </header>`;
+  }
+
+  renderMain(){
+    let buttons = this.renderButtons();
+
+    return `<main>
+              <div class="container">
+              	<div class="number">
+					<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+					<span class="numbers"></span>
+					<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
+                </div>
+                <div class="keypad-holder">
+                	${buttons}
+                </div>
+              </div>
+            </main>`;
+  }
+
+  renderButtons(){
+  	let buttonsArray = this.buttonsValues.map((item, i, arr) => {
+
+		if ( i == arr.length - 1) {
+			return `<button class="key">
+						<span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>
+		  			${item}
+		  		</button>`;
+		};
+
+  		return `<button class="key">${item}</button>`;
+  	});
+
+  	return buttonsArray.join('');
+  }
+
+
+  buttonsHandler(){
+	let buttonsParent = document.querySelector('.keypad-holder');
+
+	buttonsParent.addEventListener('click', this.clickHandler)
+
+  }
+
+
+  clickHandler(e){
+	let target = e.target;
+	let placeToInsertNumbers = document.querySelector('.numbers');
+
+	if (target.classList.contains('key')) {
+	   	placeToInsertNumbers.innerHTML += target.textContent;
+	}
+  }
+
+
+  renderFooter(){
+    return `<footer class="footer">
+              <div class="container bottom-radius">
+                <nav class="main-nav">
+                  <a href="contacts.html" class="tab active">
+                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+                    <span class = "tab-text">Contacts</span>
+                  </a>
+                  <a href="keypad.html" class="tab">
+                    <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
+                    <span class = "tab-text">Keypad</span>
+                  </a>
+                  <a href="edit-contact.html" class="tab">
+                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+                    <span class = "tab-text">Edit contact</span>
+                  </a>
+                  <a href="user.html" class="tab">
+                    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+                    <span class = "tab-text">User</span>
+                  </a>
+                  <a href="add-user.html" class="tab">
+                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
+                    <span class = "tab-text">Add user</span>
+                  </a>
+                </nav>
+              </div>
+            </footer>`
+  }
+  setEvents(){
+  	this.buttonsHandler();
+  }
+
+  render(){
+    document.body.innerHTML = this.renderHeader() + this.renderMain() + this.renderFooter();
+    this.setEvents();
+  }
+}
+
+const keypad = new KeypadPage();
+