Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Mar 22, 2017

Embed
What would you like to do?
Text input with relevant emoji sorted with deeplearning
<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>
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()
<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>
@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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.