Text input with relevant emoji sorted with deeplearning

index.html

<main class="content">
  <div class="result"></div>
  <input class="input" type="text" autofocus />
</main>
<p class="credits">API by: <a href="http://getdango.com/" target="_blank">getdango</a><p>

script.babel

const result = document.querySelector('.result')
const input = document.querySelector('.input')
input.addEventListener('input', _.debounce(findEmoji, 300))

function findEmoji () {
  window.fetch(`https://emoji.getdango.com/api/emoji?q=${encodeURI(input.value)}`)
    .then(response => response.json())
    .then(json => handleResult(json.results))
    .catch(error => console.error(error.message))
}

function handleResult (items) {
    result.innerHTML = ''
    if (!items) return
    items.length = 7
    items.forEach(item => {
      const button = createEmojiButton(item.text)
      result.appendChild(button);
    })
}

function createEmojiButton(value) {
  const element = document.createElement('button')
  element.classList.add('button')
  element.value = element.innerHTML = value
  element.addEventListener('click', evt => {
    input.value = `${input.value} ${evt.currentTarget.value}`
    input.focus()
  })
  return element
}

// demo settings
input.value = 'I love hamburgers with fries'
// input.focus()
findEmoji()

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.postcss

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

* {
  box-sizing: border-box;
}

html {
  font-family: 'Open Sans', serif;
}

body {
  font-size: 2rem;
  background-color: #BFEBEA;
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  
  min-height:100vh;
}

.result {
  display: flex;
  height: 4rem;
  margin-bottom: 1.5rem;
}

.button {
  width: 4rem;
  height: 4rem;
  max-width: 4rem;
  max-height: 4rem;
  
  margin: 0.5rem;
  padding-top: 0.5rem;
  
  background: #F2F2F2;
  
  border: 1px solid #CCCCCC;
  border-radius: 2rem;
  outline: none;
  
  font-size: 2rem;
}

.button:first-child {
  margin-left: 0;
}

.button:last-child { 
  margin-right: 0;
}

.input {
  width: 34rem;
  height: 4rem;
  
  background: #F2F2F2;
  
  border: 1px solid #CCCCCC;
  border-radius: 2rem;
  outline: none;
  
  font-size: 2rem;
  color: #737373;
  letter-spacing: 1px;
  text-indent: 2rem;
}

.announcement {
  font-size: 1rem;
  color: white
}

.credits {
  position: fixed;
  right: 2rem;
  bottom: 0;
  font-size: 1rem;
  color: white
}

text-input-with-relevant-emoji-sorted-with-deeplearning.markdown

Text input with relevant emoji sorted with deeplearning

Finding the relevant emoji for the given text with help of deep learning for the best result.

Idea by: Dennis Passway (https://twitter.com/dennispassway)

A Pen by Johan Haneveld on CodePen.

License.