Skip to content

Callbook #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GeorgeTsendra wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Callbook #20

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
cb2f1eb
10.07.18 first push
Jul 10, 2018
1791ba7
12.07.18 second push
Jul 12, 2018
d92ad3c
20.07 second push
Jul 20, 2018
6ebcdbb
23.07fourthCommit
Jul 23, 2018
ab9e8d1
29.07 fifth commit
Jul 29, 2018
9c0b7c7
callBook in classes 31.07
Jul 31, 2018
1a7816f
07.08 add Search and Keypad validation
Aug 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 6 additions & 107 deletions Call Book/add-user.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,114 +11,13 @@
</head>

<body>
<header class="header">
<div class="container top-radius">
<nav class="user-top-line">
<a href="user.html">Cansel</a>
<button class = "done-btn">Done</button>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<div class="edit-main-info">
<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>
<div class="main-info-holder">
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>First Name</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>Last Name</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>Company</span>
</button>
</div>
</div>
</div>
<div class="scroll-holder">
<div class="edit-info">
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add mobile phone</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add home phone</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add email</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add address</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add birthday</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add social profile</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add field</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="delete-contact">delete contact</button>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container bottom-radius">
<nav class="main-nav">
<a href="index.html" class="tab">
<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="addUser.html" class="tab active">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
<span class = "tab-text">Add user</span>
</a>
</nav>
</div>
</footer>


<div id="app">

</div>
<script src="js/main.js"></script>
<script src="js/add-user.js"></script>
<script src="js/footer.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
</html>
111 changes: 6 additions & 105 deletions Call Book/edit-contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,113 +11,14 @@
</head>

<body>
<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>
</nav>
</div>
</header>
<main class="main">
<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>
<div class="main-info-holder">
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>First Name</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>Last Name</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>Company</span>
</button>
</div>
</div>
</div>
<div class="scroll-holder">
<div class="edit-info">
<div class="edit-field">
<button href="#" class="delete-btn"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span>
<span>phone</span>
<span>+38 (063) 733 44 55</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add home phone</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add email</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add address</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add birthday</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add social profile</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>add field</span>
</button>
</div>
<div class="edit-field">
<button href="#" class="delete-contact">delete contact</button>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="container bottom-radius">
<nav class="main-nav">
<a href="index.html" class="tab">
<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 active">
<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>


<div id="app">

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<script src="js/edit-contact.js"></script>
<script src="js/footer.js"></script>
</body>
</html>
4 changes: 4 additions & 0 deletions Call Book/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@
</head>

<body>
<div id="app">

</div>



<script src="js/main.js"></script>
<script src="js/context.js"></script>
<script src="js/footer.js"></script>
</body>
</html>
61 changes: 61 additions & 0 deletions Call Book/js/add-user.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
let addEditFieldToMainInfo = arr => {
const fields = arr.map(value =>
`<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>${value}</span>
</button>
</div>`
).join("")
return `<div class="main-info-holder"> ${fields}</div> `
}

let addEditFieldToScrollHolder = arr => {
const scrollHolder = arr.map(value =>
`<div class="edit-field">
<button href="#" class="add-btn"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<span>${value}</span>
</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>
</div>
</div>
</div>`
}

let addUserPageOutput = () => {
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 class = "done-btn">Done</button>
</nav>
</div>
</header>
<main class="main">
<div class="container">
<div class="edit-main-info">
<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>

${addEditFieldToMainInfo(["First Name",'Last Name','Company'])}


</div>

${addEditFieldToScrollHolder(['add mobile phone','add home phone',
'add email','add address','add birthday','add social profile', 'add field'])}
</div>
</main>`
}

addUserPageOutput()
61 changes: 61 additions & 0 deletions Call Book/js/context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
PhoneApp.prototype.createElement = function(value, key, index){
let td = document.createElement('td');
let rtById = document.getElementById(`tr_${index}`)
rtById.appendChild(td)
td.textContent = value[key]
}

PhoneApp.prototype.outputDataArray = function() {
let tabelBody = document.getElementById("tbody_id")
this.dataBase.forEach((value, index, arr) => {
let tr = document.createElement('tr')
tr.setAttribute('id', `tr_${index}`);
tabelBody.appendChild(tr);
this.createElement(value, 'name', index)
this.createElement(value, 'surname', index)
this.createElement(value, 'numb', index)
})
}


let createTh = (arr) => {
const innerTr = arr.map(value =>
`<td>${value}</td>`
).join('');
return `<thead><tr>
${innerTr}
</tr></thead>`
}


let buildHtmlTags = () => {
// let body = document.body;
let main = document.getElementById('app')

main.innerHTML += `<header class="header">
<div class="container top-radius">
<h2>Contacts</h2>
</div>
</header>
<main>
<div class="container">
<form class="form-inline search-form">
<div class="form-group">
<label class="sr-only" for="search">Search</label>
<input type="text" class="form-control" id= "search" placeholder="Search">
</div>
</form>
<table class="table table-hover contacts">

${createTh(['Name',"Last name", "Number"])}

<tbody id="tbody_id">
</tbody>
</table>
</div>
</main>`
}


buildHtmlTags()
myApp.outputDataArray();
Loading