EasyCode-JavaScriptReact-v1 · SergeyKostikov · Jul 4, 2018 · Jul 4, 2018 · Jul 4, 2018 · Jul 4, 2018
diff --git a/js-core/homeworks/contact-list/img/avatar-2.png b/js-core/homeworks/contact-list/img/avatar-2.png
diff --git a/js-core/homeworks/contact-list/img/boy-1.png b/js-core/homeworks/contact-list/img/boy-1.png
diff --git a/js-core/homeworks/contact-list/img/boy.png b/js-core/homeworks/contact-list/img/boy.png
diff --git a/js-core/homeworks/contact-list/img/girl-1.png b/js-core/homeworks/contact-list/img/girl-1.png
diff --git a/js-core/homeworks/contact-list/img/girl.png b/js-core/homeworks/contact-list/img/girl.png
diff --git a/js-core/homeworks/contact-list/img/man-1.png b/js-core/homeworks/contact-list/img/man-1.png
diff --git a/js-core/homeworks/contact-list/img/man-2.png b/js-core/homeworks/contact-list/img/man-2.png
diff --git a/js-core/homeworks/contact-list/img/man-3.png b/js-core/homeworks/contact-list/img/man-3.png
diff --git a/js-core/homeworks/contact-list/img/man-4.png b/js-core/homeworks/contact-list/img/man-4.png
diff --git a/js-core/homeworks/contact-list/img/man.png b/js-core/homeworks/contact-list/img/man.png
diff --git a/js-core/homeworks/contact-list/index.html b/js-core/homeworks/contact-list/index.html
@@ -1,11 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <link href='src/main.css' rel='stylesheet'>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
     <meta charset="UTF-8">
-    <title>Home work 1</title>
+    <title>Phone App</title>
 </head>
 <body>
-
+<div class='main'>
+    <div class="app-header">
+        My Phone App
+    </div>
+    <div class='app-content'>
+        <div class='app-contact-list'>
+            <table class='contact-table' cellspacing="0" cellpadding="0">                      
+            </table>
+        </div>
+
+    </div>
+    <div class="app-footer">
+        <div></div>
+    </div>
+</div>
 <script src="src/main.js"></script>
 </body>
 </html>
diff --git a/js-core/homeworks/contact-list/src/main.css b/js-core/homeworks/contact-list/src/main.css
@@ -0,0 +1,77 @@
+body{
+    font-family: Helvetica, sans-serif
+}
+h1{
+    color: rebeccapurple
+}
+::-webkit-scrollbar {
+    width: 5px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: #858585; 
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+}
+
+div.main{
+    margin: auto;
+    position: relative;
+    width: 500px;
+    border: 1px solid #858585;
+    box-shadow: 0 0 15px #858585;
+}
+div.app-header, div.app-footer{
+    text-align: center;
+    max-width: 478px;
+    width: 100%;
+    min-height: 25px;
+    color: #fff;
+    background: #6200EE;
+    padding: 15px 10px;
+    border: 1px solid #858585;
+}
+.app-contact-buttons{
+    text-align: center;
+    font-size: 20px;
+
+}
+.app-contact-buttons a{
+    color:#000;
+}
+.app-contact-avatar, .app-contact-buttons{
+    width: 13.3%;
+    height: 50px;
+    padding: 15px
+}
+.app-contact-avatar img{
+    width: 50px;
+}
+.app-contact-list{
+    height:700px;
+    overflow:auto;
+    /**/
+}
+.icon-link{
+    text-decoration: none;
+
+}
+tr td{
+    border-bottom: 1px solid #858585;
+}
+tr:hover{
+    background-color: #f1f1f1;
+}
+.round-avatar{
+    overflow:hidden;
+    border-radius: 25px;
+}
diff --git a/js-core/homeworks/contact-list/src/main.js b/js-core/homeworks/contact-list/src/main.js
@@ -57,8 +57,8 @@ class PhoneApp{
         this.database.splice(index, 1);
       }
     });
-    this.database.splice();
   };
+
   searchUserByName(name) {
     return this.database.reduce(function(newElem, elem) {
       if (elem.name == name) {
@@ -67,6 +67,7 @@ class PhoneApp{
       return newElem;
     }, []);
   };
+
   editUser(id, options) {
     this.database.map(elem => {
       if (elem.id == id) {
@@ -132,6 +133,95 @@ let anduin2 = new User({
   phone: "113451189",
   homePhone: "222222"
 })
+let user = new User({
+  name: "User",
+  phone: "113451189",
+  homePhone: "222222"
+})
+let name = new User({
+  name: "Name",
+  phone: "113451189",
+  homePhone: "222222"
+})
+let someUaser = new User({
+  name: "someUaser",
+  phone: "113451189",
+  homePhone: "222222"
+})
+let blabla = new User({
+  name: "blabla",
+  phone: "113451189",
+  homePhone: "222222"
+})
+
+class App{
+  constructor(){
+    this.baseBlock = document.querySelector('.contact-table');
+  }
+
+  createUsersList(users){
+    users.database.forEach(elem => {
+      this.render(this.createUserTR(elem))
+    })
+  }
+
+  createUserTR(user){
+    let tr = this.newElem('tr');
+    tr.className = 'borderdered';
+
+    let avatarTD = this.newElem('td');
+    let infoTD = this.newElem('td');
+    let buttonTD = this.newElem('td');
+
+    avatarTD.className = 'app-contact-avatar'
+    infoTD.className = 'app-contact-name'
+    buttonTD.className = 'app-contact-buttons'
+
+    let p_name = this.newElem('p')
+    p_name.textContent = user.name
+    let p_phone = this.newElem('p')
+    p_phone.textContent = user.phone
+
+    let avatarDIV = this.newElem('div')
+    avatarDIV.className = 'round-avatar'
+
+    let avatarImg = this.newElem('img');
+    avatarImg.setAttribute('src','img/avatar-2.png')
+
+    let editA = this.newElem('a');
+    editA.setAttribute('href','#');
+    editA.className = 'icon-link';
+
+    let editIconAwesome = this.newElem('i');
+    editIconAwesome.classList.add('far','fa-edit');
+
+    editA.appendChild(editIconAwesome);
+    buttonTD.appendChild(editA);
+
+    infoTD.appendChild(p_name)
+    infoTD.appendChild(p_phone)
+
+    avatarDIV.appendChild(avatarImg)
+    avatarTD.appendChild(avatarDIV)
+
+    tr.appendChild(avatarTD);
+    tr.appendChild(infoTD)
+    tr.appendChild(buttonTD)
+
+    return tr
+  }
+
+  render(elem){
+    this.baseBlock.appendChild(elem)
+  }
+
+  newElem(elem){
+    return document.createElement(elem);
+  }
+}
+
+let app = new App()
+
 
 const myPhoneApp = new PhoneApp();
 myPhoneApp.addUser(vasya);
@@ -141,11 +231,18 @@ myPhoneApp.addUser(tracer);
 myPhoneApp.addUser(anduin);
 myPhoneApp.addUser(torgrim);
 myPhoneApp.addUser(anduin2);
+myPhoneApp.addUser(user);
+myPhoneApp.addUser(name);
+myPhoneApp.addUser(someUaser);
+myPhoneApp.addUser(blabla);
+
+console.log(app.createUsersList(myPhoneApp))
+console.log(myPhoneApp)
 
-console.log(myPhoneApp);
-console.log(myPhoneApp.searchUserByName("Anduin"));
-myPhoneApp.editUser(2, { name: "Voljin" });
-myPhoneApp.editUser(4, { homePhone: "159357" });
-console.log(myPhoneApp.filterUser("homePhone"));
-console.log(myPhoneApp.sortUser("phone", "big"));
+// console.log(myPhoneApp);
+// console.log(myPhoneApp.searchUserByName("Anduin"));
+// myPhoneApp.editUser(2, { name: "Voljin" });
+// myPhoneApp.editUser(4, { homePhone: "159357" });
+// console.log(myPhoneApp.filterUser("homePhone"));
+// console.log(myPhoneApp.sortUser("phone", "big"));
 // console.log(myPhoneApp.checkAndFormatPhoneNumber("0993378130"));