onlyforbopi
9/26/2018 - 8:12 AM

JS.Objects.Classes.ContactBook.ex1

JS.Objects.Classes.ContactBook.ex1

style.css
content_copyfile_download
body {
	margin:0;
	padding:0;
}

h2 {
	width:100px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom:12px;
}

#form {
	display:block;
	width:300px;
	min-width:200px;
	background: lightgray;
	padding:15px 20px;
	margin: 0 auto;
}
#form * {
	display:block;
	width:100%;
}

#button {
	width:50%;
	margin: 20px auto;
	padding:12px;
}

table {
	width:70%;
	margin:0 auto;
}

table thead {
	background-color: lightgray;
}

table th, table td {
	border: 1px solid green;
	text-align: center;
}

table tr:nth-child(even){
	background: skyblue;
}
script.js
content_copyfile_download

var pName = document.querySelector("#name");
var bdate = document.querySelector("#bDate");
var pJob = document.querySelector("#job");
var phoneNo = document.querySelector("#phoneNo");
var button = document.querySelector("#button");
var contacts = document.querySelector("tbody");
var name,bDate,job,phone;
var personArr = [];
var count = 0;
window.onload = init; 

class Person {
	constructor(name,bDate,job,phone){
		this.name = name;
		this.bDate = bDate;
		this.job = job;
		this.phone = phone;
	}
}

class  ContactManager {
	add(p){
			personArr.push(p);
	}
	
	list(){
		var c = personArr[count];
		contacts.innerHTML += "<tr><td>"+c.name+"</td><td>"+c.bDate+"</td></td><td>"+c.job+"</td><td>"+c.phone+"</td></tr>";
		count++;
		pName.value=bdate.value=pJob.value=phoneNo.value="";
	}
}

function init(){
	//Use Class Person or use constructor function in init
	//Person(name,bDate,job);
	button.addEventListener("click",function(e){
		if(pName.value === "" || bdate.value ==="" || phoneNo.value === ""){
			alert("Please, fill all the fields!");
		}else{
		name = pName.value;
		bDate = bdate.value;
		job = pJob.value;
		phone = phoneNo.value;
		createPerson(name,bDate,job,phone);
		}
	}, false);
}
// function Person(name,bDate,job,phone){
// 		this.name = name;
// 		this.bDate = bDate;
// 		this.job = job;
//    this.phone = phone;
// }

function createPerson(personName,birthDate,personJob,personPhone){
	var person = new Person(personName,birthDate,personJob,personPhone);
	if(person){
		var contact = new ContactManager();
		contact.add(person);
		contact.list();
	}
}
js-objects-classes-contactbook-ex1.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Objects.Classes.ContactBook.ex1

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>Classes JS</title>
	</head>
	<body>
		
	<div id='form'>
		<label for="name">Name:</label><input required type="text" id="name" oninput="this.value"/>
		<label for="bDate">Birthday:</label><input required type="date" id="bDate" oninput="this.value"/>
		<label for="job">Job:</label><input type="text" id="job" oninput="this.value"/>
		<label for="phoneNo">Phone:</label><input type="tel" required id="phoneNo" oninput="this.value" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>
		<input required type="button" id="button" value="Import Contact"> 
	</div>
<!-- 	<ul id="contacts"></ul> -->
	<h2>Database</h2>
	<table id="contacts" style="border-collapse:collapse;border:2px solid green">
		<thead>
			<tr>
				<th>Name</th>
				<th>Birthday</th>
				<th>Job</th>
				<th>Phone</th>
			</tr>
		</thead>
		<tbody>
			
		</tbody>
	</table>
	
	
	
	
	
	
		
	</body>
</html>