Skip to content

Instantly share code, notes, and snippets.

@alicethewhale
Created December 14, 2018 11:17
Show Gist options
  • Save alicethewhale/71d77432d958e8a5c85f7ff39694246c to your computer and use it in GitHub Desktop.
Save alicethewhale/71d77432d958e8a5c85f7ff39694246c to your computer and use it in GitHub Desktop.
const decSelector = document.querySelector('.decorations');
const tree = document.querySelector('.tree-container');
function placeDecoration(e) {
if (decSelector.value !== "") {
const decoration = document.createElement('div');
decoration.textContent = decSelector.value;
decoration.classList.add('decoration');
// minus 15 to account for the decorations’ size of 30px
decoration.setAttribute("style", `top: ${e.clientY}px; left: ${e.clientX - 15}px;`);
tree.appendChild(decoration);
decoration.setAttribute("x", `${e.clientY}`);
decoration.setAttribute("y", `${e.clientX}`);
tree.appendChild(decoration);
}
}
tree.addEventListener('click', placeDecoration);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment