JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<input id="create-word">
<section id="word-board"></section>
<template>
  <aritcle>
    <ul class="tally">
    </ul>
    <div class="word">
    </div>
  </aritcle>
</template>

JavaScript

const data = (() => {
	const
  	data = {},
    words = {},
    listeners = {
    	add : [],
      remove : [],
      increment : [],
      amend : []
    };
  data.addWord = (word) => {
  	words[word] = 0;
    runListeners("add", word);
  };
  data.removeWord = (word) => {
  	delete words[word];
    runListeners("remove", word);
  };
  data.increment = (word) => {
  	words[word]++;
    runListeners("increment", word);
  };
  data.amend = (word) => {
  	
  };
  return data;

  function runListeners(event, word) {
  	listeners[event].forEach((listener) => {
    	listener(word);
    });
  }
}());



(() => {
  const $input = document.querySelector("#word-input");

  document.body.addEventListener("keydown", (event) => {
    if (event.target === $input) {
      return;
    }
    $input.focus();
  });
}());