Untitled

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <title>DOM1 Example</title>

    <style>
        #contacts {
            width: 500px;
            height: 500px;
            border: 1px solid #0094ff;
            background-color: #cfcfcf;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .card {
            background-color: #35a4e5;
            color: white;
            font-size: x-large;
            width: 450px;
            padding: 10px;
            margin: 5px;
        }
    </style>
    <script src="Scripts/jquery-3.1.1.js"></script>

    <script>
        // Handler ready event on window.document
        var contacts = [
            {
                id: 1,
                name: "Ram",
                phone: "453243243",
                email: "ram@abc.com"
            },
            {
                id: 2,
                name: "Shyam",
                phone: "453243222",
                email: "shyam@abc.com"
            },
            {
                name: "Ram",
                phone: "453243243",
                email: "ram@abc.com"
            },
            {
                name: "Shyam",
                phone: "453243222",
                email: "shyam@abc.com"
            },
            {
                name: "Ram",
                phone: "453243243",
                email: "ram@abc.com"
            },
            {
                name: "Shyam",
                phone: "453243222",
                email: "shyam@abc.com"
            }
        ];

        function getCard(item) {
            return "<div class='card'> " +
                "Name  : " + item.name + "<br/>" +
                "Phone : " + item.phone + "<br/>" +
                "Email : " + item.email + "</div>";
        }

        $(document).ready(function () {
            // Initialize
            $("#newcontact").hide();

            $("#shownew").on("click", function (e) {
                $("#contacts").hide();
                $("#newcontact").show();
                $(this).hide();
            });

            $("#newcancel").on("click", function (e) {
                $("#contacts").show();
                $("#newcontact").hide();
                $("#shownew").show();
            });

            $("#newadd").on("click", function (e) {
                if (window.confirm("Add new Contact?") == true) {

                    var newcontact = {
                        name: $("#ncname").val(),
                        phone: $("#ncphone").val(),
                        email: $("#ncemail").val(),
                    };

                    contacts.push(newcontact);
                    $("#contacts").append(getCard(newcontact));

                    $("#contacts").show();
                    $("#newcontact").hide();
                    $("#shownew").show();
                }
            });

            // Show Contacts
            $.each(contacts, function (index, item) {
               $("#contacts").append(getCard(item));
            })
        });

    </script>
</head>
<body>
    <h1>Contacts</h1>

    <input id="shownew" type="button" value="New..." /> <br/>
    <div id="contacts">
    </div>

    <div id="newcontact">
        <h2>New Contact</h2>
        Name : <input type="text" id="ncname" /><br/>
        Phone : <input type="text" id="ncphone" /><br />
        Email : <input type="text" id="ncemail" /><br /><br/>
        <input id="newadd" type="button" value="Add" />&nbsp;
        <input id="newcancel" type="button" value="Cancel" />
    </div>
</body>
</html>