Untitled

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <!-- http://tinysort.sjeiti.com/ to sort dom nodes. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.2/tinysort.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <style>
        body {
            font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
            font-size: 62.5%;
        }

        #buddylistdiv {
            width: 300px;
            background: #c0c0c0
        }

        #buddylist {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        #buddylist li div.buddytitle {
            margin: 3px;
            padding: 0.4em;
            font-size: 1.4em;
            height: 18px;
            background: #c0c0c0
        }

        #buddylist li div.buddydetails {
            font-size: 1.4em;
            background: #CCC;
            margin: 1px;
            padding: 0.1em;
            width: 97%;
            display: none;
        }

        #searchkey {
          margin: 1px;
          padding: 0.1em;
          width: 97%;
        }

        .online {
          float:left;
          color: green;
        }

        .offline {
          float:left;
          color: #AF0000;
        }
    </style>

    <script>
        $(function() {
            var dialog, form;
            var username = $('#username');
            var firstname = $('#firstname');
            var lastname = $('#lastname');
            var email = $('#email');
            var dob = $('#dob');
            var notes = $('#notes');
            var allFields = $([]).add(username).add(firstname).add(lastname);

            function createTitlesDiv() {
                var buddyTitleDiv = document.createElement("div");
                $(buddyTitleDiv).addClass("buddytitle");
                var statusSpan = document.createElement("span");
                $(statusSpan).attr("name", "status");
                $(statusSpan).text("[*]");
                $(statusSpan).addClass("online");
                $(buddyTitleDiv).append(statusSpan);
                var fullnameSpan = document.createElement("span");
                $(fullnameSpan).attr("name", "fullname");
                $(fullnameSpan).text(firstname.val() + " " + lastname.val());
                $(buddyTitleDiv).append(fullnameSpan);
                $(buddyTitleDiv).click(function () {
                    showDetails(buddyTitleDiv);
                });
                var delBtn = document.createElement("button");
                $(delBtn).text("x");
                function deleteBuddy(delBtn) {
                    var buddyLi = delBtn.parentNode.parentNode.parentNode;
                    $(buddyLi).remove();
                }
                var delSpan = document.createElement("span");
                $(delSpan).css("float", "right");
                $(delSpan).append(delBtn);
                $(buddyTitleDiv).append(delSpan);
                $(delBtn).click(function () {
                    deleteBuddy(delBtn);
                });
                return buddyTitleDiv;

            }

            function createTr(nodeName, nodeLabel, nodeValue){
                var tr = document.createElement('tr');
                var td1 = document.createElement('td');
                $(td1).attr("name",nodeName);
                $(td1).text(nodeLabel);
                var td2 = document.createElement("td");
                $(td2).text(nodeValue);
                tr.appendChild(td1);
                tr.appendChild(td2);
                return tr;

            }

            function createDetailDiv(){
                var buddyDetailDiv = document.createElement("div");
                var tbl = document.createElement("table");
                var nametr = document.createElement("tr");
                var nametd = document.createElement("td");
                buddyDetailDiv.appendChild(tbl);
                $(tbl).append(createTr("username","username", $(username).val()));
                $(tbl).append(createTr("firstname","Firstname", $(firstname).val()));
                $(tbl).append(createTr("lastname","Lastname", $(lastname).val()));
                $(tbl).append(createTr("email","Email Id", $(email).val()));
                $(tbl).append(createTr("dob","Date Of Birth", $(dob).val()));
                $(tbl).append(createTr("notes","Bio", $(notes).val()));
                $(buddyDetailDiv).addClass("buddydetails");
                return buddyDetailDiv;
            }

            function addBuddy() {
                var buddyLi = document.createElement("li");
                var buddyTitleDiv = createTitlesDiv();
                var buddyDetailDiv = createDetailDiv();
                buddyLi.appendChild(buddyTitleDiv);
                buddyLi.appendChild(buddyDetailDiv);
                $("#buddylist").append(buddyLi);
                $( dialog ).dialog( "close" );
            }
            dialog = $( "#add-buddy-form" ).dialog({
                autoOpen: false,
                height: 300,
                width: 350,
                modal: true,
                buttons: {
                    "Add buddy": addBuddy,
                    Cancel: function() {
                        dialog.dialog( "close" );
                    }
                },
                close: function() {
                    form[ 0 ].reset();
                    allFields.removeClass( "ui-state-error" );
                }
            });

            form = dialog.find( "form" ).on( "submit", function( event ) {
                event.preventDefault();
                addBuddy();
            });

            $( "#add-buddy-button" ).button().on( "click", function() {
                dialog.dialog( "open" );
            });

            $(function () {
                $("#buddylist").sortable();
                $("#buddylist").disableSelection();
            });

            $("#searchkey").keyup(function () {
              var searchKey = $("#searchkey").val().toLowerCase();
               $("#buddylist > li").each(function() {
                 var actualName = $(this).find("[name=fullname]").text().toLowerCase();
                 if (actualName.indexOf(searchKey) == -1) {
                   $(this).hide();
                 } else {
                   $(this).show();
                 }
               });
            });
        });

        function deleteBuddy(delBtn) {
            $("#dialog-confirm").html("Are you sure ?");
            $("#dialog-confirm").dialog({
                resizable: false,
                modal: true,
                title: "Modal",
                height: 250,
                width: 400,
                buttons: {
                    "Sure": function () {
                        var buddyLi = delBtn.parentNode.parentNode.parentNode;
                        $(buddyLi).remove();
                        $(this).dialog('close');
                    },
                    "No!": function () {
                        $(this).dialog('close');
                    }
                }
            });
        }

        function sortByName() {
          var buddyLiNodeList = $("#buddylist > li").get();
          tinysort(buddyLiNodeList, { selector: "[name=fullname]" });
        }

        function showDetails(e) {
            $(e.nextElementSibling).toggle();
        }
    </script>
</head>

<body>
<div id="add-buddy-form" title="Add new buddy!">
    <form>
        <fieldset>
            <table>
                <tr>
                    <td><label for="username">Username</label></td>
                    <td><input type="text" name="username" id="username" placeholder="username" class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="firstname">Firstname</label></td>
                    <td><input type="text" name="firstname" id="firstname" placeholder="Firstname"
                           class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="lastname">Lastname</label></td>
                    <td><input type="text" name="lastname" id="lastname" placeholder="Lastname"
                           class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td><input type="email" name="email" id="email" placeholder="email@example.com"
                           class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="dob">Date Of Birth</label></td>
                    <td><input type="text" name="dob" id="dob" placeholder="MM/DD/YYYY"
                           class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <tr>
                    <td><label for="notes">Notes</label></td>
                    <td><input type="text" name="notes" id="notes" placeholder="About buddy"
                           class="text ui-widget-content ui-corner-all"></td>
                </tr>
                <!-- Allow form submission with keyboard without duplicating the dialog button -->
                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">

            </table>
        </fieldset>
    </form>
</div>
<div id="dialog-confirm"></div>
<div id="buddylistdiv">
    <button id="add-buddy-button">Add Buddy</button>
    <button id="sort-by-name-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" onclick="sortByName()">
      <span class="ui-button-text">Sort</span>
    </button>
    <br /><br />
    <input type="text" id="searchkey" placeholder="Search name here..."></input>
    <br /><br />
    <ul id="buddylist">
        <li>
            <div class="buddytitle" onclick="showDetails(this);">
              <span class="online" name="status">[*]</span>
              <span name="fullname">Manali Krish</span>
              <span style="float:right">
                  <button onclick="deleteBuddy(this)">x</button>
              </span>
            </div>
            <div class="buddydetails">
                <table>
                    <tr>
                        <td name="username">username</td>
                        <td>Manali10</td>
                    </tr>
                    <tr>
                        <td name="firstname">Firstname</td>
                        <td>Manali</td>
                    </tr>
                        <td name="lastname">Lastname</td>
                        <td>krish</td>
                    </tr>
                    <tr>
                        <td name="email">Email Id</td>
                        <td>manali@gmail.com</td>
                    </tr>
                    <tr>
                        <td name="dob">Date Of Birth</td>
                        <td>10/03/1988</td>
                    </tr>
                    <tr>
                        <td name="notes">Bio</td>
                        <td>Hi</td>
                    </tr>
                </table>
            </div>
        </li>
        <li>
            <div class="buddytitle" onclick="showDetails(this);">
                <span class="offline" name="status">[*]</span>
                <span name="fullname">Arti Shirbhate</span>
                <span style="float:right">
                    <button onclick="deleteBuddy(this)">x</button>
                </span>
            </div>
            <div class="buddydetails">
                <table>
                    <tr>
                        <td name="username">username</td>
                        <td>huhubhu</td>
                    </tr>
                    <tr>
                        <td name="firstname">Firstname</td>
                        <td>Arti</td>
                    </tr>
                    <tr>
                        <td name="lastname">Lastname</td>
                        <td>Shirbhate</td>
                    </tr>
                    <tr>
                        <td name="email">Email Id</td>
                        <td>arti@gmail.com</td>
                    </tr>
                    <tr>
                        <td name="dob">Date Of Birth</td>
                        <td>10/02/1989</td>
                    </tr>
                    <tr>
                        <td name="notes">Bio</td>
                        <td>I am me</td>
                    </tr>
                </table>
            </div>
        </li>
    </ul>
</div>
</body>
</html>