Address Book – Javascript

Address Book

HTML:

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>AddressBook</title>
	<link rel="stylesheet" href="addressbook.css">
	<script src="addressbook.js"></script>
</head>

<body>
	<div class="container">
		<div class="addForm panel">
			<h1>Address Book</h1>
			<label for="fullname" class="labelForm">Name</label>
			<input type="text" id="fullname" class="formFields" placeholder="Enter your name">
			<label for="phone" class="labelForm">Phone Number</label>
			<input type="text" id="phone" class="formFields" placeholder="Phone">
			<label for="email" class="labelForm">Email</label>
			<input type="text" id="email" class="formFields" placeholder="Email Here">
			<br>
			<br>
			<button id="add" class="button-blue">Add Contact</button>
		</div>
		<div class="contactList">
			<h1>Contact List</h1>
			<div class="addbook">
				<div class="entry">
					<div class="name"><p></p></div>
					<div class="email"><p></p></div>
					<div class="phone"><p></p></div>
					<div class="del"><a href="#">Delete</a></div>
				</div>
			</div>
		</div>
	</div>
</body>

</html>

CSS

.panel {
    background: #8dcb66;
    padding: 1em;
    width: 92.5%;
    margin: auto;
    max-width: 30em;
    color: white;
}

input {
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
    margin: 0.5em;
    padding: 0.5em;
}

label {
    width: 100%;
    font-size: 1em;
    padding: 10px;
}

button {
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
    display: inline-block;
    font-family: Verdana, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    padding: 9px 16px 9px;
    margin: 16px 0 0 16px;
    transition: all 20ms ease-out;
    vertical-align: top;
}

.addbook {
    margin: 20px;
}

.contactList {
    background: #7f74ba;
    color: white;
    margin: 2px;
    padding: 5px;
    text-align: center;
}

.entry {
    border-radius: 3px;
    height: 40px;
    border-bottom: 1px solid;
    border-top: 1px solid;
    color: white;
    padding: 10px;
}

.entry .name {
    width: 300px;
    float: left;
    padding: 11px;
}

.entry .email {
    width: 300px;
    float: left;
    padding: 11px;
}

.entry .phone {
    width: 300px;
    float: left;
    padding: 11px;
    padding-right: 30px;
}

.entry .del {
    width: 40px;
    float: right;
    padding: 9px;
    margin-right: 30px;
}

.entry p {
    margin: 0px;
    font-family: Verdana, sans-serif;
    font-size: 12px;
}

.entry .del a {
    border-radius: 10px;
    cursor: pointer;
    font-family: Verdana, sans-serif;
    color: #FFF;
    font-size: 12px;
    padding: 8px;
    background: rgb(255, 100, 100);
    text-decoration: none;
}

.button-blue {
    background-color: #42b0e3;
    background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
    border: 1px solid #107db0;
    box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.h2 {
    font-family: Verdana, sans-serif;
    color: white;
}

JavaScript

window.onload = function () {
    //buttons
    var addBtn = document.getElementById("add");
    var addFormDiv = document.querySelector(".addForm");

    //form fields:
    var fullname = document.getElementById("fullname");
    var phone = document.getElementById("phone");
    var email = document.getElementById("email");

    //address book display
    var addBookdiv = document.querySelector(".addbook");

    //Intialize storage array
    var dataArray = [];

    //eventListeners
    addBtn.addEventListener("click", addToBook);
    addBookdiv.addEventListener("click", removeContact);

    function structure(fullname, phone, email) {
        this.fullname = fullname;
        this.phone = phone;
        this.email = email;
    }

    function addToBook() {
        //test if fields are empty
        var testIfempty = fullname.value != '' && phone.value != '' && email.value != '';
        //console.log(testIfempty);

        if (testIfempty) {
            //add contents to array and add contents to localstorage
            var obj = new structure(fullname.value, phone.value, email.value);
            dataArray.push(obj);
            localStorage['contactInfo'] = JSON.stringify(dataArray);

            //clear form
            clearForm();

            //update display from the form data collected
            displayContactInfo();
        }

    }

    function clearForm() {
        var filledForm = document.querySelectorAll(".formFields");
        for (var i in filledForm) {
            filledForm[i].value = "";
        }
    }

    function removeContact(e) {
        if (e.target.classList.contains("removeButton")) {
            var rmId = e.target.getAttribute("data-id");

            dataArray.splice(rmId, 1);
            //update localstorage
            localStorage['contactInfo'] = JSON.stringify(dataArray);
            displayContactInfo();
        }
    }

    function displayContactInfo() {
        //look for localstorage key if not present create it
        //if exists load content from LS and loop it on page for div to populate

        if (localStorage['contactInfo'] === undefined) {
            localStorage['contactInfo'] = "[]" //string
        } else {
            dataArray = JSON.parse(localStorage['contactInfo']);
            addBookdiv.innerHTML = '';
            for (var i in dataArray) {
                var str = '<div class="entry">';
                str += '<div class="name"><p>' + dataArray[i].fullname + '</p></div>';
                str += '<div class="email"><p>' + dataArray[i].email + '</p></div>';
                str += '<div class="phone"><p>' + dataArray[i].phone + '</p ></div>';
                str += '<div class="del"><a href="#" class="removeButton" data-id="' + i + '" >Delete</a></div>';
                str += '</div >';
                addBookdiv.innerHTML += str;
            }
        }
    }

    displayContactInfo();
}

Notes:

The read-only localStorage property allows you to access a Storage object for the Document‘s origin; the stored data is saved across browser sessions. localStorage is similar to sessionStorage, except that while data stored in localStorage has no expiration time, data stored in sessionStorage gets cleared when the page session ends — that is, when the page is closed.

**The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).**

Reference : Click Here