diff --git a/Call Book/add-user.html b/Call Book/add-user.html
deleted file mode 100644
index 951c548..0000000
--- a/Call Book/add-user.html	
+++ /dev/null
@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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>Edit contact</title>
-	<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>
-	<div id="app">
-
-	</div>
-	<div id="footer">
-
-	</div>
-		<script src="js/add-user.js"></script>
-		<script src="js/footer.js"></script>
-	</body>
-	</html>
diff --git a/Call Book/edit-contact.html b/Call Book/edit-contact.html
deleted file mode 100644
index 81f4cb5..0000000
--- a/Call Book/edit-contact.html	
+++ /dev/null
@@ -1,24 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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>Edit contact</title>
-	<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>
-	<div id="app">
-
-	</div>
-	<div id="footer">
-
-	</div>
-
-		<script src="js/edit-contact.js"></script>
-		<script src="js/footer.js"></script>
-		</body>
-	</html>
diff --git a/Call Book/index.html b/Call Book/index.html
index 403428b..cb55167 100644
--- a/Call Book/index.html	
+++ b/Call Book/index.html	
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+
 <html lang="en">
 <head>
 	<meta charset="utf-8">
@@ -13,14 +13,21 @@
 <body>
 	<div id="app">
 
+
 	</div>
+
 	<div id="footer">
 
 	</div>
 
 
 
-	<script src="js/context.js"></script>
 	<script src="js/footer.js"></script>
+	<script src="js/user.js"></script>
+	<script src="js/edit-contact.js"></script>
+	<script src="js/add-user.js"></script>
+	<script src="js/keypad.js"></script>
+	<script src="js/context.js"></script>
+	<script src="js/router.js"></script>
 </body>
 </html>
diff --git a/Call Book/js/add-user.js b/Call Book/js/add-user.js
index 300776a..bee2bbe 100644
--- a/Call Book/js/add-user.js	
+++ b/Call Book/js/add-user.js	
@@ -1,72 +1,10 @@
-class addUser{
+class AddUser{
 constructor(options){
-
+// this.context = new Context()
   }
 
 
-  contentEditable(){
-
-    let name = document.getElementById("Name")
-    let surname = document.getElementById("Surname")
-
-    let doneBtn = document.querySelector('.done-btn')
-    let phone = document.querySelectorAll('.edit-info > .edit-field > input')[0]
-    let email = document.querySelectorAll('.edit-info > .edit-field > input')[2]
-
-    const url = "http://easycode-js.herokuapp.com/GeogreTsendra13"
-    const serverAddUser = () =>{
-      let user = {
-        fullName: `${name.value} ${surname.value} `,
-        email: email.value,
-        phone: phone.value
-      };
-      const xhr = new XMLHttpRequest()
-      xhr.onreadystatechange = () =>{
-      };
-      xhr.open("POST", url + '/users', false);
-      xhr.setRequestHeader("Content-type","application/json")
-      xhr.send(JSON.stringify(user))
-      xhr.timeout = 30000;
-      xhr.ontimeout = function() {
-        alert("Hi, you lose")
-      }
-    }
-
-    doneBtn.addEventListener("click", e=>{
-      if (name.value == " "
-      || surname.value == " "
-      || phone.value == " "
-      || email.value == " "
-      || typeof phone.value != "number"
-      || typeof name.value != "string"
-      || typeof surname.value != "string"
-      ){
-          alert("Некорректно заполненая форма")
-      }else {
-          serverAddUser()
-
-      }
-    })
-
-    window.addEventListener("keydown", e=>{
-      if (e.keyCode == 13 ) {
-        if (name.value == " "
-        || surname.value == " "
-        || phone.value == " "
-        || email.value == " "
-        || typeof phone.value != "number"
-        || typeof name.value != "string"
-        || typeof surname.value != "string"
-        ){
-            alert("Некорректно заполненая форма")
-        }else {
-            serverAddUser()
-
-        }
-      }
-    })
 
-  }
 
 
 
@@ -104,7 +42,7 @@ constructor(options){
     let main = document.getElementById('app')
 
 
-    main.innerHTML += `<header class="header">
+    main.innerHTML = `<header class="header">
   		<div class="container top-radius">
   			<nav class="user-top-line">
   				<a href="user.html">Cansel</a>
@@ -127,8 +65,8 @@ constructor(options){
   		</main>`
       let deleteBtton = document.querySelector(".delete-contact")
       let doneBtn = document.querySelector('.done-btn')
-    
-      this.contentEditable();
+
+      // this.contentEditable();
       deleteBtton.addEventListener('click', e=>{
 
         let inputs = document.querySelectorAll(' .edit-field > input')
@@ -139,10 +77,10 @@ constructor(options){
 
       })
 
-
+      // console.log(this);
 
     }
   }
 
-let myAddUser = new addUser()
-myAddUser.addUserPageOutput()
+// let myAddUser = new addUser()
+// myAddUser.addUserPageOutput()
diff --git a/Call Book/js/context.js b/Call Book/js/context.js
index aadce5d..e534a49 100644
--- a/Call Book/js/context.js	
+++ b/Call Book/js/context.js	
@@ -1,75 +1,228 @@
 
 class Context {
+
   constructor() {
+    this.dataBase = [],
+    this.usersWithFullName = [],
+    this.userUrl = "",
+    this.editContact = new EditContact(),
+    this.footer = new Footer()
+    // this.router = new Router()
+  }
 
 
-    this.dataBase = []
+  createFoterWithoutListener(){
+    let buttonDone = document.getElementById('buttonDone')
+    buttonDone.addEventListener("click", (e)=>{
+
+      this.footer.footerOutput()
+      let addUserButton = document.getElementById('addUser')
+      let keypadButton = document.getElementById('keypad')
+      let userButton = document.getElementById('user')
+      let editContactButton = document.getElementById('editContact')
+      let contextButton = document.getElementById('context')
+      addUserButton.addEventListener("click", (e)=>{this.addUser.addUserPageOutput()
+        this.contentEditable()
+      })
+      keypadButton.addEventListener("click", (e)=>{this.keypad.addUserPageOutput()})
+      userButton.addEventListener("click", (e)=>{this.user.addUserPageOutput()})
+      editContactButton.addEventListener("click", (e)=>{this.editContact.editContactPageOutput()
+      })
+      contextButton.addEventListener("click", (e)=>{
+      this.context.render()
+      this.editPage()
+    })
+
+    })
+  }
+
+  initialRender(){
+    let main = document.getElementById('app')
+    let footer = document.getElementById('footer')
+
+    main.innerHTML = `
+    <header class="header">
+  		<div class="container top-radius">
+  			<h2>Authorization</h2>
+  		</div>
+  	</header>
+    <main>
+  		<div class="container">
+      <form class="form-inline search-form">
+        <div class="form-group">
+          <label class="sr-only" for="search">authorization</label>
+          <input type="text" class="form-control" id= "authorization" placeholder="your nickname">
+          <button type="button" name="button" id="buttonDone"> done</button>
+        </div>
+      </form>
+		</main>
+    `
+footer.innerHTML = `<footer class="footer">
+  <div class="container bottom-radius">
+    <nav class="main-nav">
+</nav>
+</div>
+</footer>`
+
+    let authorizationInput = document.getElementById('authorization')
+    let buttonDone = document.getElementById('buttonDone')
+    buttonDone.addEventListener('click', (e)=>{
+      if (!authorizationInput.value) {
+        return
+      }
+        this.userUrl = authorizationInput.value;
+        this.serverRequest()
+        this.footer.footerOutput()
+
+        this.userUrl = ""
+    })
+
 
   }
 
 
 
+
   serverRequest(){
     const btn = document.querySelector("button");
     const add = document.querySelector(".add");
 
-    const url = "http://easycode-js.herokuapp.com/GeogreTsendra13"
-    const xhr = new XMLHttpRequest()
+      const url = `http://easycode-js.herokuapp.com/${this.userUrl}`
+
     let dataBaze;
     let usersWithFullName = []
     let users = [];
-          xhr.onreadystatechange = () =>{
-            if (xhr.readyState == XMLHttpRequest.DONE ) {
-              dataBaze = JSON.parse(xhr.responseText)
 
-              for (var key in dataBaze) {
 
-                if (key == "users") {
-                  dataBaze[key].forEach(value =>{
-                    usersWithFullName.push(value)
-                  })
-                }
+    fetch(url)
+      .then(response => {
+        return response.json();
+      })
+      .then(userJson => userJson.users.forEach((value, index, arr)=>{
+          let newObj = {}
+          for(var key in value) {
+
+            if (key != "fullName") {
+              newObj[key] = value[key];
+
+            }else {
+              let nameSurnameSplit = value[key].split(" ")
+              if (  newObj.surname = nameSurnameSplit[1]) {
+                newObj.name = nameSurnameSplit[0]
+                newObj.surname = nameSurnameSplit[1]
+              }else {
+                newObj.name = nameSurnameSplit[0]
+                newObj.surname = nameSurnameSplit[0]
               }
+            }
+          }
+          this.dataBase.push(newObj)
 
+          if (this.dataBase.length >= userJson.users.length) {
 
+              this.render()
+              // this.footer.footerOutput()
+            }
+        }))
+}
 
-              }
 
-              usersWithFullName.forEach((value, index, arr)=>{
-                let newObj = {}
-                for(var key in value) {
+editPage(){
+  let allUsers = document.querySelectorAll(".tr_class")
+  allUsers.forEach((value, index,arr)=>{
+    value.addEventListener("click", (e)=>{
+      let user = {};
+      let userId = 0
+      let phoneNum = value.lastChild.innerHTML;
+      let name = value.firstChild.innerHTML;
+      let surname = value.childNodes[1].innerHTML;
+
+      this.dataBase.reduce((newObj, value, index, arr)=>{
+
+        if (value.phone == phoneNum && value.name == name && value.surname == surname) {
+          userId = value._id
+          return
+        }
+      }, {})
+      this.dataBase.forEach((value, index, arr)=>{
+        if (value._id == userId) {
+          user = value;
+        }
+      })
 
-                  if (key != "fullName") {
-                    newObj[key] = value[key];
+      this.editContact.editContactPageOutput(user)
 
-                  }else {
 
+      const url = "http://easycode-js.herokuapp.com/GeogreTsendra13"
+      const deleteUser = (user_id) => {
 
-                    let nameSurnameSplit = value[key].split(" ")
-                    if (  newObj.surname = nameSurnameSplit[1]) {
-                      newObj.name = nameSurnameSplit[0]
-                      newObj.surname = nameSurnameSplit[1]
-                    }else {
-                      newObj.name = nameSurnameSplit[0]
-                      newObj.surname = nameSurnameSplit[0]
+        return fetch(url + '/users/' + user_id, {
+          headers: {
+            "Content-Type": "application/json"
+          },
+            method: 'delete'
+          })
+          .then(response => response.json())
 
-                    }
 
-                  }
-                }
-                // console.log(newObj);
-                this.dataBase.push(newObj)
-                console.log(this.dataBase);
-              })
-            };
+        }
 
-    xhr.open("GET", url, false);
-    xhr.send()
+        let deleteButton = document.getElementById("delete_button")
+        deleteButton.addEventListener("click", (e)=>{
+          deleteUser(user._id)
+          this.initialRender()
+          // this.createFoterWithoutListener()
+        })
 
-  }
 
+      const serverEditUser = (user) => {
 
+        return fetch(url + '/users', {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
 
+              fullName: user.fullName,
+              email: user.emailFromUser,
+              phone: user.phoneFromUser
+            })
+          })
+          .then(response => {
+            return response.json();
+
+          })
+      }
+      let doneButt = document.getElementById("done_btn")
+      doneButt.addEventListener("click", (e)=>{
+        let nameFromUser = document.getElementById('MainInfoButton_0').value;
+        let surnameFromUser = document.getElementById('MainInfoButton_1').value;
+        let companyFromUser = document.getElementById('MainInfoButton_2').value;
+        let phoneFromUser = document.getElementById('ScrollHolderButton_0').value;
+        let homePhoneFromUser = document.getElementById('ScrollHolderButton_1').value;
+        let emailFromUser = document.getElementById('ScrollHolderButton_2').value;
+        let adressFromUser = document.getElementById('ScrollHolderButton_3').value;
+        let birthdayFromUser = document.getElementById('ScrollHolderButton_4').value;
+        let socialFromUser = document.getElementById('ScrollHolderButton_5').value;
+        let fieldFromUser = document.getElementById('ScrollHolderButton_6').value;
+        let userToUpdate = {
+          fullName : `${nameFromUser} ${surnameFromUser}`,
+          _id: userId,
+          phone: phoneFromUser,
+          homePhone: homePhoneFromUser,
+          email : emailFromUser,
+          adress : adressFromUser,
+          birthday : birthdayFromUser,
+          social: socialFromUser,
+          field: fieldFromUser,
+        };
+        // console.log(userToUpdate);
+        serverEditUser(userToUpdate)
+      })
+    })
+  })
+}
 
   searchUsers(username) {
     let allUsers = [];
@@ -80,24 +233,29 @@ class Context {
 
       }
     })
-
+    this.dataBase = {}
     this.dataBase = allUsers
-    this.buildHtmlTags()
-
-  }
+    this.render()
+}
 
 
   createTh(arr){
     const innerTr = arr.map(value =>
-      `<td OnClick = "myContext.sortUsers('${value}')">${value}</td>`
+      `<td class="td_header">${value}</td>`
     ).join('');
     return `<thead><tr>
       ${innerTr}
     </tr></thead>`
   }
 
+  // sentRequestWhenEddPageWasDone(){
+  //
+  // }
+
+
+
+  render (){
 
-  buildHtmlTags (){
     let main = document.getElementById('app')
     main.innerHTML = `<header class="header">
   		<div class="container top-radius">
@@ -125,16 +283,21 @@ class Context {
 
     let formToSearch = document.querySelector(".form-control")
 
+    this.checkUser()
+
+    this.outputDataArray(this.dataBase)
+
     window.addEventListener("keydown", e => {
 
       if (e.keyCode == 13) {
         this.searchUsers(`${formToSearch.value}`)
       }
-      // console.log(`${formToSearch.value}`);
+
     })
-    this.serverRequest()
-    this.outputDataArray(this.dataBase)
-    this.checkUser()
+
+    this.editPage();
+
+
   }
 
   createElement (value, key, index){
@@ -178,22 +341,7 @@ class Context {
         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
index 458a23c..caa3d38 100644
--- a/Call Book/js/edit-contact.js	
+++ b/Call Book/js/edit-contact.js	
@@ -2,44 +2,51 @@ class EditContact {
   constructor (options){
 
   }
+
   addEditFieldToMainInfo (arr){
-    const fields = arr.map(value =>
+    
+    const fields = arr.map((value, index, arr) =>
       `<div class="edit-field">
-        <button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
-          <span>${value}</span>
+        <button href="#" class="add-btn" >
+          <input type="text" id="MainInfoButton_${index}" style="width: 80%; fload: right; margin: 0 auto; color: black; background:transparent; border: 0;"
+           value="${value}"></input>
         </button>
       </div>`
-    ).join("")
+  ).join("")
+
     return `<div class="main-info-holder"> ${fields}</div> `
   }
 
    addEditFieldToScrollHolder(arr){
-    const scrollHolder = arr.map(value =>
+
+    const scrollHolder = arr.map((value, index ,arr) =>
       `<div class="edit-field">
-        <button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
-          <span>${value}</span>
+        <button href="#"  class="add-btn">
+        <input type="text" id="ScrollHolderButton_${index}" style="width: 80%; fload: right; margin: 0 auto; color: black; background:transparent; border: 0;"
+         value="${value}"></input>
         </button>
       </div>`
     ).join("")
 
+
     return `<div class="scroll-holder">
       <div class="edit-info">
         ${scrollHolder}
         <div class="edit-field">
-          <button href="#" class="delete-contact">delete contact</button>
+          <button href="#" id="delete_button" class="delete-contact">delete contact</button>
         </div>
       </div>
     </div>`
   }
 
-  editContactPageOutput(){
+  editContactPageOutput(userToEdit){
     let main = document.getElementById('app')
 
     main.innerHTML = `<header class="header">
   		<div class="container top-radius">
   			<nav class="user-top-line">
   				<a href="user.html">Cansel</a>
-  				<button  type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn">Done</button>
+  				<button  type = "submit" form = "edit-contact" formaction="#" formmethod="get" id="done_btn" class = "done-btn">Done</button>
   			</nav>
   		</div>
   	</header>
@@ -47,12 +54,12 @@ class EditContact {
   		<div class="container">
   			<div class="edit-main-info">
   				<div class="edit-foto"><img src="images/user-face-mini.png" alt="#" class=" user-img img-circle center-block"></div>
-          ${this.addEditFieldToMainInfo(["First Name",'Last Name','Company'])}
+          ${this.addEditFieldToMainInfo([`${userToEdit.name}`,`${userToEdit.surname}`,'add Company'])}
 
   			</div>
 
-        ${this.addEditFieldToScrollHolder(['add mobile phone','add  home phone',
-        'add email','add address','add birthday','add social profile', 'add field'])}
+        ${this.addEditFieldToScrollHolder([`${userToEdit.phone}`,'add  home phone',
+        `${userToEdit.email}`,'add address','add birthday','add social profile', 'add field'])}
 
   			</div>
   		</main>`
@@ -60,5 +67,5 @@ class EditContact {
   }
 }
 
-let myEditContact = new EditContact()
-myEditContact.editContactPageOutput()
+// let myEditContact = new EditContact()
+// myEditContact.editContactPageOutput()
diff --git a/Call Book/js/footer.js b/Call Book/js/footer.js
index bc47662..1de293b 100644
--- a/Call Book/js/footer.js	
+++ b/Call Book/js/footer.js	
@@ -14,39 +14,41 @@ class Footer{
 
   }
 
-  footerOutput (){
+  footerOutput(){
     let footer = document.getElementById('footer')
    footer.innerHTML = `
    <footer class="footer">
      <div class="container bottom-radius">
        <nav class="main-nav">
-         <a href="index.html" class="tab active">
+         <a href="#" class="tab" id="context">
            ${this.createNav("glyphicon glyphicon-search", ``,`true`)}
-           ${this.createNav("tab-text", `Context`)}
+           ${this.createNav("tab-text", `Contacts`)}
          </a>
-         <a href="keypad.html" class="tab">
 
-             ${this.createNav("glyphicon glyphicon-th", ``,`true`)}
-             ${this.createNav("tab-text", `Keypad`)}
-         </a>
-         <a href="edit-contact.html" class="tab">
-
-           ${this.createNav("glyphicon glyphicon-pencil", ``,`true`)}
-           ${this.createNav("tab-text", `Edit contact`)}
-         </a>
-         <a href="user.html" class="tab">
+         <a href="#" class="tab" id="user">
 
            ${this.createNav("glyphicon glyphicon-user", ``,`true`)}
            ${this.createNav("tab-text", `User`)}
          </a>
-         <a href="add-user.html" class="tab">
+         <a href="#" class="tab" id="keypad">
+
+         ${this.createNav("glyphicon glyphicon-th", ``,`true`)}
+         ${this.createNav("tab-text", `Keypad`)}
+         </a>
+         <a href="#" class="tab" id="addUser">
            ${this.createNav("glyphicon glyphicon-plus", ``,`true`)}
            ${this.createNav("tab-text", `Add user`)}
          </a>
        </nav>
      </div>
    </footer>`
+   // <a href="#" class="tab" id="editContact">
+   //
+   // ${this.createNav("glyphicon glyphicon-pencil", ``,`true`)}
+   // ${this.createNav("tab-text", `Edit contact`)}
+   // </a>
+
  }
 }
-let myFooter = new Footer()
-myFooter.footerOutput()
+// let myFooter = new Footer()
+// myFooter.footerOutput()
diff --git a/Call Book/js/keypad.js b/Call Book/js/keypad.js
index 55b6946..c119869 100644
--- a/Call Book/js/keypad.js	
+++ b/Call Book/js/keypad.js	
@@ -22,7 +22,7 @@ class Keypad {
 
   addUserPageOutput() {
     let main = document.getElementById('app')
-
+    // console.log(this);
     main.innerHTML = `<header class="header">
   		<div class="container top-radius">
   			<h2>Keypad</h2>
@@ -33,7 +33,7 @@ class Keypad {
   			<div class="number">
   				<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
   				<span id="numberInput" class ="numbers"></span>
-  				<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true" onclick="myKeyad.glyphicon()"></span>
+  				<span class="glyphicon glyphicon-circle-arrow-left" aria-hidden="true"></span>
   			</div>
         <div class="keypad-holder">
 
@@ -61,7 +61,7 @@ class Keypad {
       let keypadsButtons = document.querySelectorAll("button.numbersInKeypad");
       [...keypadsButtons].forEach(keypadButton => {
       keypadButton.addEventListener("click", function(event) {
-if (placeNumbers.innerHTML.length <=15) {
+        if (placeNumbers.innerHTML.length <=16) {
 
 
     if (keypadButton.innerHTML == "#" && placeNumbers.innerHTML == "" ||
@@ -87,8 +87,10 @@ if (placeNumbers.innerHTML.length <=15) {
   })
     })
 
+
+
     window.addEventListener("keydown", e => {
-      
+
 
       if (e.keyCode <= 57 && e.keyCode >= 48 && placeNumbers.innerHTML.length <= 15) {
 
@@ -117,9 +119,10 @@ if (placeNumbers.innerHTML.length <=15) {
     })
 
 
-
+    let removeWords = document.querySelector(".glyphicon-circle-arrow-left")
+    removeWords.addEventListener("click", this.glyphicon)
   }
 }
 
-let myKeyad = new Keypad();
-myKeyad.addUserPageOutput()
+// let myKeyad = new Keypad();
+// myKeyad.addUserPageOutput()
diff --git a/Call Book/js/router.js b/Call Book/js/router.js
new file mode 100644
index 0000000..e1220de
--- /dev/null
+++ b/Call Book/js/router.js	
@@ -0,0 +1,121 @@
+class Router {
+  constructor() {
+    this.footer = new Footer()
+    this.addUser = new AddUser()
+    this.user = new User()
+    this.keypad = new Keypad()
+    this.editContact = new EditContact()
+    this.context = new Context()
+
+  }
+
+  createFoterWithoutListener(){
+    let buttonDone = document.getElementById('buttonDone')
+    buttonDone.addEventListener("click", (e)=>{
+
+      this.footer.footerOutput()
+      let addUserButton = document.getElementById('addUser')
+      let keypadButton = document.getElementById('keypad')
+      let userButton = document.getElementById('user')
+      // let editContactButton = document.getElementById('editContact')
+      let contextButton = document.getElementById('context')
+      addUserButton.addEventListener("click", (e)=>{this.addUser.addUserPageOutput()
+        this.contentEditable()
+      })
+      keypadButton.addEventListener("click", (e)=>{this.keypad.addUserPageOutput()})
+      userButton.addEventListener("click", (e)=>{this.user.addUserPageOutput()})
+      // editContactButton.addEventListener("click", (e)=>{this.editContact.editContactPageOutput()
+      // })
+      contextButton.addEventListener("click", (e)=>{
+      this.context.render()
+      
+    })
+
+    })
+  }
+
+
+  contentEditable(){
+
+    let name = document.getElementById("Name")
+    let surname = document.getElementById("Surname")
+
+    let doneBtn = document.querySelector('.done-btn')
+    let phone = document.querySelectorAll('.edit-info > .edit-field > input')[0]
+    let email = document.querySelectorAll('.edit-info > .edit-field > input')[2]
+
+    const url = "http://easycode-js.herokuapp.com/GeogreTsendra13"
+
+    const serverAddUser = () => {
+
+      return fetch(url + '/users', {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+
+            fullName: `${name.value} ${surname.value} `,
+            email: email.value,
+            phone: phone.value
+          })
+        })
+        .then(response => {
+          return response.json();
+
+        })
+    }
+    doneBtn.addEventListener("click", (e)=>{
+      if (name.value == ""
+      || surname.value == ""
+      || phone.value == ""
+      || email.value == ""
+      ){
+          alert("Некорректно заполненая форма")
+      }else {
+          serverAddUser()
+          this.context.initialRender()
+          this.createFoterWithoutListener()
+      }
+    })
+
+    window.addEventListener("keydown", (e)=>{
+      if (e.keyCode == 13 ) {
+        if (name.value == ""
+        || surname.value == ""
+        || phone.value == ""
+        || email.value == ""
+
+        ){
+            alert("Некорректно заполненая форма")
+        }else {
+            serverAddUser()
+              this.context.initialRender()
+              this.createFoterWithListener()
+
+        }
+      }
+    })
+
+  }
+
+
+
+
+
+
+
+
+  routerRender(){
+    this.context.initialRender()
+    this.createFoterWithoutListener()
+
+
+
+  }
+
+}
+
+
+let router = new Router()
+router.routerRender()
diff --git a/Call Book/js/user.js b/Call Book/js/user.js
index 0a27391..2600635 100644
--- a/Call Book/js/user.js	
+++ b/Call Book/js/user.js	
@@ -30,10 +30,10 @@ class User{
   }
 
 
-  addUserPageOutput () {
+  addUserPageOutput (value) {
     let main = document.getElementById('app')
 
-    main.innerHTML += `<header class="header">
+    main.innerHTML = `<header class="header">
   		<div class="container top-radius">
   			<div class="user-top-line">
   				<a href="index.html">
@@ -68,8 +68,9 @@ class User{
 
   			</div>
   		</main>`
+      // console.log(this);
     }
 }
 
-let myUser = new User()
-myUser.addUserPageOutput()
+// let myUser = new User()
+// myUser.addUserPageOutput()
diff --git a/Call Book/keypad.html b/Call Book/keypad.html
deleted file mode 100644
index ec9673b..0000000
--- a/Call Book/keypad.html	
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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 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>
-
-	<div id="app">
-
-	</div>
-	<div id="footer">
-
-	</div>
-
-
-
-	<script src="js/keypad.js"></script>
-	<script src="js/footer.js"></script>
-</body>
-</html>
diff --git a/Call Book/user.html b/Call Book/user.html
deleted file mode 100644
index 502be8a..0000000
--- a/Call Book/user.html	
+++ /dev/null
@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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>User</title>
-	<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>
-
-
-	<div id="app">
-
-	</div>
-	<div id="footer">
-
-	</div>
-
-
-		<script src="js/user.js"></script>
-		<script src="js/footer.js"></script>
-	</body>
-	</html>
