phonebook

phonebook javascript project

by vipin krishna

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Phone Book</title>
</head>
<style>
    body {
        font-family: 'Courier New', Courier, monospace;
    }

    .display {
        width: 400px;
        /* height: 300px; */
        /* height: auto; */
        background: #ddd;
        padding: 10px;
        border: 1px solid black;
    }

    .btn {
        text-align: center;
        padding: 0 10px;
        /* display: float; */
        /* justify-content: space-between; */
        /* left: 0%; */
        /* position: relative; */
    }

    button:focus {
        outline: 0;
    }

    .list {
        list-style-type: none;
        height: 175px;
        border: 1px solid white;
        padding: 5px;
        overflow: auto;
        color: #555;
    }

    .list:hover {
        cursor: default;
    }

    li {
        margin-top: 10px;
        -moz-user-select: none;
        user-select: none;
    }

    .addnew {
        text-align: center;
        padding: 10px;
        /* box-sizing: border-box; */
        /* display: inline-block; */
    }

    .btnadd {
        text-align: center;
        margin-top: 5px;
    }

    input[type=text] {
        /* margin: 3px; */
        margin-top: 10px;
        border: 1px solid gray;
        /* width: 250px; */
        width: 100%;
        box-sizing: border-box;
    }

    button {
        width: 60px;
        /* margin-left: 2px; */
        /* margin-top: 4px;         */
    }

    h2 {
        text-align: center;
        color: #555;
    }

    li {
        /* display: table; */
        /* border-bottom: 1px solid gray; */
        /* border-top: 1px solid gray; */
        background-color: lightgray;
        padding-left: 5px;
    }

    .del {
        /* display: table-cell; */
        /* vertical-align: middle; */
        background-color: red;
        color: white;
        /* border: 1px solid black; */
        padding: 0 5px 0 5px;
        cursor: pointer;
        -moz-user-select: none;
        user-select: none;
       ...

JavaScript

//COPYLEFT github.com/vipinkrishna

var output = document.getElementById('output');

var phonebook = [
    { name: 'aaa', phone: '11111' },
    { name: 'bbb', phone: '22222' },
    { name: 'ccc', phone: '33333' },
    { name: 'ddd', phone: '44444' },
    { name: 'eee', phone: '55555' },
    { name: 'fff', phone: '66666' },
    { name: 'ggg', phone: '77777' },
    { name: 'hhh', phone: '88888' },
    { name: 'iii', phone: '99999' },
    { name: 'jjj', phone: '12345' },
    { name: 'kkk', phone: '23423' },
    { name: 'lll', phone: '54334' },
    { name: 'mmm', phone: '85747' },
    { name: 'nnn', phone: '54737' },
    { name: 'ooo', phone: '42745' },
    { name: 'ppp', phone: '65748' },
];

var showcount = 5; //You can customize here

var position = 0;
var page = 1;

display();


function display() {
    var end;
    output.innerHTML = "";

    if (page * showcount > phonebook.length)
        end = phonebook.length
    else
        end = page * showcount;

    for (i = position; i < end; i++) {
        output.innerHTML += `<li key=${i} class='li'>${phonebook[i].name} - ${phonebook[i].phone} <span class='del' key=${i}>x</span></li>`;
    }
    var listdel = document.getElementsByClassName('del');
    Array.from(listdel).forEach((deletebtn) => deletebtn.addEventListener('click', deleteitem));

    var list = document.getElementsByClassName('li');
    Array.from(list).forEach(li => li.onmousedown = clicklist);

}

var insertindex;
var insertli;

function clicklist(e) {
    console.log('CL');
    if (modal.style.display == 'block') {
        modal.style.display = '';
        insertli.style.background = 'lightgray';
        return;
    }
    if (e.which === 3 && e.target.className == 'li' && modal.style.display == '') {
        modal.style.display = 'block'
        insertindex = e.target.attributes.key.value;
        insertli = e.target;
        e.target.style.background = 'darkgray';
    }
}

var modal = document.getElementById('modal');
var maincontainer =...