phoneApp

phoneApp/addUser.js

@@ -0,0 +1,110 @@
+class AddUser {
+  	constructor() {
+		this.basicUserInfo = ['First Name', 'Last Name', 'Mobile phone', 'Email'];
+		this.additionalUserInfo = [
+			'add home phone', 'company', 'add address', 'add birthday', 'add social profile', 'add field'
+		];  	
+  	};
+
+  	fieldsBasicAddUserInfo() {
+  		let open = '<div class="main-info-holder">';
+  		let addPhoto = `
+        	<div class="edit-foto">
+          		<button class="add-foto-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            	<span>add foto</span></button>
+        	</div>
+  		`;
+  		let editBasicField = this.basicUserInfo.reduce((start, elem) => {
+        let addClass =  elem.replace(/\s/g, '_');
+          start +=`
+            <div class="edit-field add-btn">
+            			<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            			<input type="text" class="glyphicon-plus-sign ${addClass}" placeholder="${elem}"/>
+
+            </div>
+          `;
+  			return start;
+  		},'');
+  		let resEditBasicField = addPhoto + open + `${editBasicField}</div>`;
+  		return resEditBasicField;
+  	};
+
+  	fieldAdditionalAddUserInfo() {
+  		let open = `
+        	<div class="scroll-holder">
+          		<div class="edit-info">
+  		`;
+  		let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
+       /* let addClass =  elem.replace(/\s/g, '_');*/
+  			start += `
+            	<div class="edit-field add-btn">
+              	<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+                	<input type="text" class="glyphicon-plus-sign" placeholder="${elem}"/>
+            	</div>
+  			`;
+  			return start;
+  		}, '');
+  		let buttonDelContacts = `
+            <div class="edit-field">
+              	<button href="#" class="delete-contact">delete contact</button>
+            </div>
+  		`;
+  		let resEditAdditionalField = open + `${editAdditionalField}${buttonDelContacts}</div>`;
+  		return resEditAdditionalField;
+  	};
+
+    addEvents() {
+      let delEnteredData = document.querySelector('button.delete-contact');
+      delEnteredData.addEventListener('click', function() {
+        let input = document.querySelectorAll('input[placeholder]');
+        [...input].forEach(elem => {
+          elem.value = '';
+        })
+      });
+      let addUser = document.querySelector('button.done-btn');
+      addUser.addEventListener('click', function() {
+        let input = document.querySelectorAll('input[placeholder]');
+      	let objUser = [...input].reduce((done, elem) => {
+      		if(elem.className === 'glyphicon-plus-sign Email') {
+      			done.email = elem.value;
+					} else if(elem.className === 'glyphicon-plus-sign First_Name') {
+      		  done.fullName = `${elem.value} `;
+          } else if(elem.className === 'glyphicon-plus-sign Last_Name') {
+            done.fullName += elem.value;
+          } else if(elem.className === 'glyphicon-plus-sign Mobile_phone') {
+      		  done.phone = elem.value;
+          } else {
+            let key = elem.placeholder.replace(/\s/g, '_');
+            done[key] = elem.value;
+          };
+      		return done;
+				}, {});
+
+        fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(objUser)
+        });
+			});
+    }
+
+  	renderAddUser() {
+  		let captionAddUser = document.querySelector('.container.top-radius');
+  		captionAddUser.innerHTML = `
+   			<nav class="user-top-line">
+          		<a href="user.html">Cancel</a>
+          		<button class = "done-btn">Done</button>
+        		</nav>
+  		`;
+  		let mainContainer = document.querySelector('main .container');
+  		mainContainer.innerHTML = `
+        		<div class="edit-main-info">
+        		${this.fieldsBasicAddUserInfo()}
+        		</div>
+        		${this.fieldAdditionalAddUserInfo()}
+  		`;
+      this.addEvents();
+  	};
+};

phoneApp/constants.js

@@ -0,0 +1,2 @@
+const API_URL = 'http://easycode-js.herokuapp.com/Butenko_N/users';
+let dataUsers = [];

phoneApp/editContact.js

@@ -0,0 +1,78 @@
+class EditContact {
+	constructor(user) {
+		this.user = user;
+		this.basicUserInfo = ['First Name', 'Last Name', 'Phone', 'Email'];
+		this.additionalUserInfo = [
+			'add home phone', 'company', 'add address', 'add birthday', 'add social profile', 'add field'
+		];
+	};
+
+	fieldsBasicUserInfo() {
+		let open = '<div class="main-info-holder">';
+		let editBasicField = this.basicUserInfo.reduce((start, elem) => {
+			start += `
+          		<div class="edit-field add-btn">
+            		<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            		<input type="text" class="glyphicon-plus-sign" placeholder="${elem}"/>
+          		</div>
+			`;
+			return start;
+		}, '');
+		let resEditBasicField = open + editBasicField + '</div>';
+		return resEditBasicField;
+	};
+
+	fieldAdditionalUserInfo() {
+		let open = `
+		<div class="scroll-holder">
+        	<div class="edit-info">
+        `;
+        let editAdditionalField = this.additionalUserInfo.reduce((start, elem) => {
+        	start += `
+        		<div class="edit-field add-btn">
+        			<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
+            	<input type="text" class="glyphicon-plus-sign" placeholder="${elem}"/>
+        		</div>
+        	`;
+        	return start;
+        },'');
+        let buttonDelContacts = `
+            <div class="edit-field">
+              <button href="#" class="delete-contact">delete contact</button>
+            </div>
+        `;
+        let resEditAdditionalField = open + editAdditionalField + buttonDelContacts + '</div></div>';
+        return resEditAdditionalField;
+	};
+
+	renderEditContact() {
+		let captionEditContact = document.querySelector('.container.top-radius');
+		captionEditContact.innerHTML = `
+	      	<nav class="user-top-line">
+	        	<a href="user.html">Cancel</a>
+	        	<button  type = "submit" form = "edit-contact" formaction="#" formmethod="get" class = "done-btn">Done</button>
+	      	</nav>
+		`;
+		let mainContainer = document.querySelector('main .container');
+		mainContainer.innerHTML = `
+			<div class="edit-main-info">
+ 				<div class="edit-foto"><img src="user_img.png" alt="#" class=" user-img img-circle center-block"></div>
+					${this.fieldsBasicUserInfo()}
+					</div>
+					${this.fieldAdditionalUserInfo()}
+		`;
+    let input = document.querySelectorAll('input.glyphicon-plus-sign');
+    [...input].forEach((elem) => {
+    	if(elem.placeholder == "First Name") {
+    		elem.value = this.user.name;
+			} else if(elem.placeholder == "Last Name") {
+        elem.value = this.user.lastName;
+			} else if(elem.placeholder == "Phone") {
+        elem.value = this.user.phone;
+			} else if(elem.placeholder == "Email") {
+        elem.value = this.user.email;
+			}
+		});
+	};
+
+};

phoneApp/headerAndFooter.js

@@ -0,0 +1,65 @@
+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 = `
+		  	<header class="header">
+    			<div class="container top-radius">
+      				<h2>${this.caption}</h2>
+    			</div>
+  			</header>
+  		`;
+  		return header;
+	};
+
+	createFooter() {
+		let done = `
+		<footer class="footer">
+    		<div class="container bottom-radius">
+      			<nav class="main-nav">
+      	`;
+      	let testIndexHtml = function(str) {
+      		if(str === 'Contacts') {
+      			return 'index';
+      		} else {
+      			return str;
+      		};
+      	};
+
+      	let contentNav = this.renderLink.reduce((start, elem) => {
+      		start += `
+      		    <a href="${testIndexHtml(elem.content)}.html" class="tab ${elem.content}">
+          			<span class="glyphicon glyphicon-${elem.icon}" aria-hidden="true"></span>
+          			<span class = "tab-text">${elem.content}</span>
+        		</a>
+      		`;
+      		return start;
+      	}, done);
+
+      	let footer = contentNav + '</nav>\n </div>\n </footer>';
+    	return footer;
+	};
+
+	createMain() {
+		return `
+		  	<main class="main">
+    			<div class="container">
+    			</div>
+  			</main>
+    	`;
+	};
+
+	renderTemplate() {
+		document.body.innerHTML = this.createHeader() + this.createMain() + this.createFooter();
+	};
+
+};

phoneApp/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <title>phoneApp</title>
+      <meta charset="utf-8" />
+      <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+      <link rel="stylesheet" type="text/css" href="style.css">
+   </head>
+   <body>
+
+      <script src="constants.js" defer></script>
+		<script src="headerAndFooter.js" defer></script>
+		<script src="keypad.js" defer></script>
+		<script src="editContact.js" defer></script>
+		<script src="user.js" defer></script>
+      <script src="userContacts.js" defer></script>
+		<script src="addUser.js" defer></script>
+      <script src="index.js" defer></script>
+
+   </body>
+</html>

phoneApp/index.js

@@ -0,0 +1,46 @@
+let headerAndFooter = new HeaderAndFooter('Contacts');
+headerAndFooter.renderTemplate();
+
+let usersContacts = new UsersContacts();
+usersContacts.loadData();
+
+let buttonKeypad = document.querySelector('a.Keypad');
+
+buttonKeypad.addEventListener('click', function(event) {
+  event.preventDefault();
+  let keypad = new Keypad();
+  keypad.renderKeypad();
+});
+
+
+let buttonEditContact = document.querySelector('a.Edit');
+
+buttonEditContact.addEventListener('click', function(event) {
+  event.preventDefault();
+/*  let editContact = new EditContact();
+  editContact.renderEditContact();*/
+});
+
+let buttonUser = document.querySelector('a.User');
+
+buttonUser.addEventListener('click', function(event) {
+  event.preventDefault();
+/*  let user = new User();
+  user.renderUser();*/
+});
+
+let buttonAddUser = document.querySelector('a.Add');
+
+buttonAddUser.addEventListener('click', function(event) {
+  event.preventDefault();
+  let addUser = new AddUser();
+  addUser.renderAddUser();
+});
+
+let buttonContacts = document.querySelector('a.Contacts');
+
+buttonContacts.addEventListener('click', function(event) {
+  event.preventDefault();
+  let contacts = new UsersContacts();
+  contacts.loadData();
+});