Some coding challenges for the AO front end team who are learning JavaScript

Write a script to draws a simple pen line freehanded across the browser window

/*
    style:
    .marker {
		background-color: #5F5FFF;
	    width: 7px;
	    height: 7px;
	    border-radius: 50%;
	    position: absolute;
	    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
	}
*/

function marker(x,y) {
    var m = new Marker();
    m.className = "marker";
    m.style.left = x + "px";
    m.style.top = y + "px";
    return m;
}

function draw(e) {
    e.preventDefault();
    document.body.appendChild(marker(e.clientX, e.clientY));				
}

var Marker = document.registerElement("my-marker");

document.addEventListener("mousedown", function() {
    document.addEventListener("mousemove", draw);
});

document.addEventListener("mouseup", function() {
    document.removeEventListener("mousemove", draw);
});