Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <link rel="stylesheet" href="jquery-ui.css">
    <style type="text/css">
        label {
            display: inline-block;
            width: 100px;
            margin: 5px;
        }

        input {
            width: 90px;
            margin: 5px;
        }

        li:hover {
            cursor: pointer;
        }

        #feedback {
            font-size: 1.4em;
        }

        .selectable .ui-selecting {
            background: #FECA40;
        }
        .selectable .ui-selected {
            background: #F39814;
            color: white;
        }
        .selectable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 40%;
            display: inline-block;
        }
        .selectable li {
            margin: 3px;
            padding: 0.4em;
            font-size: 1.4em;
            height: 50px;
        }
        .content {
            width: 300px;
            background: #eef;
            padding: 5px;
            border: 1px grey dotted;
            font-size: 1.4em;
        }
        ul {
            list-style: none;
        }

        #low-level{
            display:none;
        }
    </style>

    <script type="text/javascript">
        var data = [
            {
                index: 123123,
                name: "Nikola Nikolovski",
                grades: [
                    {
                        course: "Calculus",
                        grade: 10
                    },
                    {
                        course: "OOP",
                        grade: 9
                    },
                    {
                        course: "Interactive Applications",
                        grade: 10
                    },
                ],
                edit: false
            },
            {
                index: 123124,
                name: "Petko Petkovski",
                grades: [
                    {
                        course: "User Interfaces",
                        grade: 8
                    },
                    {
                        course: "OOP",
                        grade: 9
                    },
                    {
                        course: "Interactive applications",
                        grade: 8
                    },
                ],
                edit: false
            },
            {
                index: 123125,
                name: "Petar Petrevski",
                grades: [
                    {
                        course: "Calculus",
                        grade: 6
                    },
                    {
                        course: "OOP",
                        grade: 9
                    },
                    {
                        course: "User Interfaces",
                        grade: 10
                    },
                ],
                edit: false
            }
        ];

        $(document).ready(function(){
            $(".selectable").selectable();
            $(data).each(function(event,ui){
                var prosek = 0;
                var suma = 0;
                for(var i = 0 ; i < data.length ; i++)
                {
                    if(ui.name == data[i].name)
                    {
                        for(var j = 0 ; j < data[i].grades.length; j++)
                              suma+= data[i].grades[j].grade;
                    }
                }
                prosek = suma/3;
                var prosek_konecen = prosek.toFixed(2);
                $(".selectable").append("<li>" + ui.name + " " +  prosek_konecen +"</li>");
            });
            $("#edit").click(function() {
                for (var i = 0; i < data.length; i++)
                        $("#index").val(data[i].index);
                $("#high-level").toggle();
                $("#low-level").toggle();
                var samo_ime = $(".ui-selected").text();
                var niza = samo_ime.split(" ")
                var konecno_ime = niza[0] + " " + niza[1];
                $("#name").val(konecno_ime);
                for(var i = 0 ; i < data.length ; i++)
                {
                    if(konecno_ime == data[i].name)
                    {
                        $("#index").val(data[i].index);
                    }
                }

            });
            $("#top").click(function(){
                $("#high-level").toggle();
                $("#low-level").toggle();
            })


            $("#save").click(function(){
                var novo_ime = $("#name").val();
                var indez = $("#index").val();
                for(var i = 0 ; i < data.length ; i++)
                {
                    if(data[i].index == indez)
                    {
                        data[i].name = novo_ime;
                        $("#name").val(novo_ime);

                    }
                }
            })

        });


    </script>
</head>
<body>
<div id="high-level">
    <button id="edit">Edit students</button><br/><br/>
    <ol class="selectable"></ol>
</div>

<div id="low-level">
    <div>
        <input id="prev" value="prev" type="button" />
        <input id="top" value="top" type="button" />
        <input id="next" value="next" type="button" />
    </div>
    <label>Name</label>
    <input id="name" class="content">
    <br/>
    <label>Index</label>
    <input id="index" class="content">
    <div id="grades" style="overflow: hidden;"></div>
    <button id="save">Save</button>
</div>
</body>

</html>