<!DOCTYPE html>
<html>
<head>
    <title>Collection</title>
    <script>
        var booktitles = [
                        {
                            title: "Mac OS X Leopard Edition",
                            id: "1",
 
                        },
                        {
                            title: "The Qmail Handbook",
                            id: "2",
 
                        },
                        {
                            title: "Hardening Network Infrastructure: Bulletproof Your Systems Before You Are Hacked!",
                            id: "3",
 
                        },
                        {
                            title: "Cocoa Programming for Mac OS X Second Edition",
                            id: "4",
 
                        },
                        {
                            title: "LDAP System Administration",
                            id: "5",
 
                        }
 
                        ];
 
 
    </script>
 
</head>
<body>
<ul>
    <script>
        for(i =0; i < booktitles.length;i++){
            document.write('<h4>'+booktitles[i].title+'</h4>');
 
            var myCoords = xyzGen(booktitles[i].title)
            console.log("Coordinates of " + booktitles[i].title)
            console.log("x : " + myCoords.x)
            console.log("y : " + myCoords.y)
            console.log("z : " + myCoords.z)
 
        }
    //  console.log(booktitles);
 
        var x,y,z
 
        function xyzGen(string) {
            let coords = {
                x: 0,
                y: 0,
                z: 0,
            }
            string = string.split(' ')
 
            for (var i = 0; i < 3; i++) {
                for (c in string[i]) {
                    if (i == 0) {
                        coords.x += string[i].charCodeAt(c)
                    } else if (i == 1) {
                        coords.y += string[i].charCodeAt(c)
                    } else if (i == 2) {
                        coords.z += string[i].charCodeAt(c)
                    }
                }
            }
            return coords
        }
    </script>
</ul>
 
</body>
</html>