GrabAFont

by raddevus

HTML

<span onclick="handleEmojiClick(this)">&#128512;</span>
<span onclick="handleEmojiClick(this)">&#128513;</span>
<span onclick="handleEmojiClick(this)">&#128514;</span>
<span onclick="handleEmojiClick(this)">&#128515;</span>
<span onclick="handleEmojiClick(this)">&#128516;</span>
<span onclick="handleEmojiClick(this)">&#128517;</span>
<span onclick="handleEmojiClick(this)">&#128518;</span>
<span onclick="handleEmojiClick(this)">&#128519;</span>
<span onclick="handleEmojiClick(this)">&#128520;</span>
<span onclick="handleEmojiClick(this)">&#128521;</span>
<span onclick="handleEmojiClick(this)">&#128522;</span>
<span onclick="handleEmojiClick(this)">&#128523;</span>
<span onclick="handleEmojiClick(this)">&#129392;</span>
<span onclick="handleEmojiClick(this)">&#129393;</span>
<span onclick="handleEmojiClick(this)">&#129395;</span>
<span onclick="handleEmojiClick(this)">&#129396;</span>
<span onclick="handleEmojiClick(this)">&#129397;</span>
<span onclick="handleEmojiClick(this)">&#129398;</span>
<span onclick="handleEmojiClick(this)">&#129402;</span>
<span onclick="handleEmojiClick(this)">&#128524;</span>
<span onclick="handleEmojiClick(this)">&#128525;</span>
<span onclick="handleEmojiClick(this)">&#128526;</span>
<span onclick="handleEmojiClick(this)">&#128527;</span>
<span onclick="handleEmojiClick(this)">&#128528;</span>
<span onclick="handleEmojiClick(this)">&#128529;</span>
<span onclick="handleEmojiClick(this)">&#129296;</span>
<span onclick="handleEmojiClick(this)">&#129297;</span>
<span onclick="handleEmojiClick(this)">&#129298;</span>
<span onclick="handleEmojiClick(this)">&#129299;</span>
<span onclick="handleEmojiClick(this)">&#129314;</span>
<span onclick="handleEmojiClick(this)">&#129315;</span>
<span onclick="handleEmojiClick(this)">&#129316;</span>
<span onclick="handleEmojiClick(this)">&#129488;</span>
<span onclick="handleEmojiClick(this)">&#129317;</span>
<span onclick="handleEmojiClick(this)">&#129318;</span>
<span...

CSS

body{font-size:xx-large;}
body {
    background: whitesmoke;
    cursor:pointer;
}

JavaScript

let allSelectedElements = [];

document.querySelector("html").addEventListener("click", ()=>selectElementContents());

function handleEmojiClick(el) {
  
  //var el = document.querySelector("#a");
  if (isSelected(el)){
    removeElement(el);
  	selectElementContents();
  }
  else{
  	allSelectedElements.push(el);
  	selectElementContents();
  }
}

function removeElement(el){
		foundItemIdx = 0;
    for (let i = 0;i < allSelectedElements.length;i++){
    	if (allSelectedElements[i] === el){
      	foundItemIdx = i;
        break;
      }
    }
    allSelectedElements.splice(foundItemIdx,1);
}
function isSelected(el){
  let retVal = false;
	allSelectedElements.forEach(a => {
  	if (a === el){
    	retVal = true;
    }
  });
	return retVal;
}

function selectElementContents() {
	allSelectedElements.forEach(el => {
  var range = document.createRange();
  range.selectNodeContents(el);
  var sel = window.getSelection();
  sel.addRange(range);
  });
}