JSFiddle - React, Tailwind, and code Playground

by Andre van tonder

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<textarea class="smiley-input"></textarea>
<div smiley>
  <button type="button" class="smiley-button">
    &#128513
  </button>
  <div class="smiley-picker hidden">
  </div>
</div>

CSS

.smiley-button {
  background-color: inherit;
  border: none;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 2em;
  height: 2em;
  font-size: 1em;
}

.smiley-button:hover {
  background: #d3d3d3;
}

.smiley-picker {
  background-color: white;
  width: 14em;
  height: 14em;
  display: block;
  border: 1px solid black;
  overflow: scroll;
}

.hidden {
  display: none;
}

.smiley {
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  width: 2em;
  height: 2em;
  font-size: 2em;
}

.smiley:hover {
  background: #d3d3d3;
}

JavaScript

$(".smiley-button").click(function() {
  if ($(".smiley-picker").hasClass("hidden")) {
    $(".smiley-picker").fadeIn("fast");
    $(".smiley-picker").toggleClass("hidden");
  } else {
    $(".smiley-picker").fadeOut("fast");
    $(".smiley-picker").toggleClass("hidden");
  }
});
for (i = 128512; i < 128576; i++) {
  $(".smiley-picker").append("<button type='button' value='&#"+i+"' class='smiley'>&#" + i + "</button>");
}
for (i = 128581; i < 128591; i++) {
  $(".smiley-picker").append("<button type='button' value='&#"+i+"' class='smiley'>&#" + i + "</button>");
}
$(document).ready(function() {
  $(document).on("click", ".smiley", function() {
    $(".smiley-input").val($('.smiley-input').val() + $(this).text());
  });
});