onlyforbopi
9/26/2018 - 8:13 AM

JS.Objects.Classes.ContactBook.ex2

JS.Objects.Classes.ContactBook.ex2

style.css
content_copyfile_download
header {
  text-align: center;
}

#addNew {
  color: white;
  background-color: indigo;
  margin:0px -5px 10px -5px;
  padding: 5px;
}


input {
  margin-right: 25px;
}

#inputs {
  border: 1px solid black;
  padding: 0px 5px 5px 5px;
  background-color:white;

}

#outputs {
  margin-left: 25%;
}

button{
  background-color: indigo;
  color: white;
}

button:hover {
  background-color: #76E5FC;
}

table {
  width: 70%;
  border-collapse: collapse;
}

th {
  color: white;
  background-color: indigo;
  padding: 8px;
  text-align: left;

}

tr {
  background: #EBDEF9;
  border: 1px solid black;
}

tr:nth-child(even) {
  background: #F4ECF1; 
}

tr:hover {
  background: #76E5FC;
}
script.js
content_copyfile_download
window.onload = function init() {
    listContacts(database);
};

var database = [];
class Contact {
    constructor(firstName, lastName, phoneNumber, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.phoneNumber = phoneNumber;
        this.age = age;
    }
}

var bugs = new Contact('Bugs', 'Bunny', '314-159-2653', 72);
var daffy = new Contact('Daffy', 'Duck', '589-793-2384', 81);
var porky = new Contact('Porky', 'Pig', '626-433-8327', 83);

database.push(bugs);
database.push(daffy);
database.push(porky);

function listContacts(contacts) {
    var tableBody = document.querySelector('#contactsBody');
    var numContacts = contacts.length;
    for (var i = 0; i < numContacts; i++) {
        var row = tableBody.insertRow();
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 =row.insertCell(2);
        var cell4 = row.insertCell(3);
        cell1.innerHTML = contacts[i].firstName;
        cell2.innerHTML = contacts[i].lastName;
        cell3.innerHTML = contacts[i].phoneNumber;
        cell4.innerHTML = contacts[i].age;
    }
}

function addNewContact() {
    let firstName = document.querySelector('#firstName').value;
    let lastName = document.querySelector('#lastName').value;
    let phoneNumber = document.querySelector('#phone').value;
    let age = document.querySelector('#age').value;
    var newContact = new Contact(firstName, lastName, phoneNumber, age);

    database.push(newContact);

    let addContact = [];
    addContact.push(newContact);
    listContacts(addContact);
  
  clearInputs();
}

function clearInputs(){
  document.querySelector("#firstName").value = "";
  document.querySelector("#lastName").value = "";
  document.querySelector("#phone").value = ""; 
  document.querySelector("#age").value = "";
}
js-objects-classes-contactbook-ex2.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Objects.Classes.ContactBook.ex2

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Contact Database using Classes</title>
    </head>
    <body>
      <header id="inputs">
        <h3 id="addNew">Add a New Contact</h3>
        <label>First Name: </label><input id="firstName" type="text">
        <label>Last Name: </label><input id="lastName" type="text">
        <label>Phone Number: </label><input id="phone" type="tel">
        <label>Age: </label><input id="age" type="number">
        <button id="btnAddContact" onclick="addNewContact()">Add Contact</button>
  </header>
      <br>
  <section id="outputs">

        <table id="tblContacts">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Phone Number</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody id="contactsBody">
            </tbody>
        </table>
      </section>
    </body>
</html>