const { log } = console
// โญ๏ธ import
import { $, $all, elem } from './js/ext/Node_ext.js'; // Node extension
// --------------------------------------------------------------------
const DOT_SIZE = 16; // in px
// โญ๏ธ window.onclick -> draw dot
window.onclick = (event) => {
document.body.appendChild(elem('div', div => {
// (pageX, pageY): relative to document (top-left corner)
const {pageX: x,pageY: y} = event;
div.className = 'dot';
div.style.left = (x - DOT_SIZE/2) + "px";
div.style.top = (y - DOT_SIZE/2) + "px";
log(`(pageX, pageY) = (${x}, ${y})`);
}));
};
// โญ๏ธ button.onclock -> clear all dots
$('button').onclick = (e) => {
$all('.dot').forEach(node => node.remove());
e.stopPropagation(); // prevent from drawing new dot.
log(`dots all cleared ...`);
};