Emojify It

Developer
Adam
Size
4,371 Kb
Views
6,072
  1. Emojify It Previews
  2. Emojify It HTML Codes
  3. Emojify It CSS Codes
  4. Emojify It JS Codes

How do I make an emojify it?

Experimental copy of iOS 10 iMessages Emojify feature. What is a emojify it? How do you make a emojify it? This script and codes were developed by Adam on 27 December 2022, Tuesday.

Emojify It Previews
IQ Test

Emojify It - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Emojify It</title> <link href="https://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="emojify-input" contenteditable="true">
Basketball finishes at 5. Then it's pizza or sushi. Maybe go to the movies or mini golf. You in?
</div>
<button id="emojifyIt">Emojify It!</button> <script src="js/index.js"></script>
</body>
</html>

Emojify It - Script Codes CSS Codes

body { font-family: 'Roboto', sans-serif;
}
.emojify-input { border: #DDD 1px solid; box-shadow: inset 0px -1px 2px rgba(0, 0, 0, 0.1), inset 0px 1px 2px rgba(0, 0, 0, 0.1); border-radius: 5px; height: 150px; width: 300px; padding: 15px; font-size: 12pt; line-height: 18pt; margin: 15% auto 0 auto; outline: none;
}
.emojify-input .emojiChar { padding: 0 0 0 3px;
}
.emojify-input span.detectedEmoji { color: #ff9933; font-weight: 500; cursor: pointer; display: inline-block; position: relative; background: -webkit-linear-gradient(left, #ff9933, #EF3D35, #ff9933); background: linear-gradient(90deg, #ff9933, #EF3D35, #ff9933); background-position: 0 0; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: shinny 5s infinite, bounce 500ms 1; animation: shinny 5s infinite, bounce 500ms 1; -webkit-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; -webkit-transform: translateY(0); transform: translateY(0);
}
.emojify-input span.detectedEmoji .selector { position: absolute; background-color: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); width: auto; border-radius: 5px; padding: 5px 15px 5px 15px; text-align: center; top: -42px; letter-spacing: 4px; border-top: #EEE 1px solid; z-index: 3; -webkit-background-clip: none; -webkit-text-fill-color: #333;
}
.emojify-input span.detectedEmoji .selector:before { content: ''; position: absolute; bottom: -7px; left: 50%; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #FFF; z-index: 2;
}
.emojify-input span.detectedEmoji .selector:after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 0; height: 0; margin-left: -8px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #CCC; z-index: 1;
}
#emojifyIt { height: 50px; width: 300px; padding: 15px; font-size: 12pt; margin: 10px auto; display: block; border: 0; background-color: #FFF; color: #2D72D9; font-weight: 500; text-transform: uppercase;
}
#emojifyIt:hover { background-color: #2D72D9; color: #FFF; border-radius: 5px; cursor: pointer;
}
@-webkit-keyframes shinny { 0% { background-position: 0 0; } 100% { background-position: 150px 0; }
}
@keyframes shinny { 0% { background-position: 0 0; } 100% { background-position: 150px 0; }
}
@-webkit-keyframes bounce { 0% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } 50% { -webkit-transform: scale(1.1) rotate(-2deg); transform: scale(1.1) rotate(-2deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
}
@keyframes bounce { 0% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); } 50% { -webkit-transform: scale(1.1) rotate(-2deg); transform: scale(1.1) rotate(-2deg); } 100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); }
}

Emojify It - Script Codes JS Codes

var emojifyItData = {};
var emojifyIt = function(selectorString){ var inputElement = document.querySelector(selectorString); var words = inputElement.textContent.trim().split(' '); words = words.map(function(word){ var emojiMatch = searchForEmoji(word); if(emojiMatch.length > 0){ var emojiString = emojiMatch.map(function(emoji){ return emoji.emoji; }).join(' '); return '<span class="detectedEmoji" data-emojis="'+emojiString+'">'+word+'</span>'; }else{ return word; } }); inputElement.innerHTML = words.join(' ');
};
var searchForEmoji = function(word){ word = word.toLowerCase().replace('?','').replace('.','').replace(',','').replace('!','') var emojiMatches = []; emojifyItData.forEach(function(emoji){ if(emoji.tags && emoji.tags.indexOf(word) !== -1 || emoji.aliases && emoji.aliases.indexOf(word) !== -1 || emoji.tags && emoji.tags.indexOf(dumbSingluarizer(word)) !== -1 || emoji.aliases && emoji.aliases.indexOf(dumbSingluarizer(word)) !== -1){ emojiMatches.push(emoji); } }); return emojiMatches;
};
var dumbSingluarizer = function(word){ return word.replace(/s$/g,'');
};
// Load Emoji JSON File
var loadEmojiJSON = function(callback) { var xhr = new XMLHttpRequest(); xhr.overrideMimeType("application/json"); xhr.open('GET', 'https://raw.githubusercontent.com/github/gemoji/master/db/emoji.json', true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == "200") { emojifyItData = JSON.parse(xhr.responseText); } }; xhr.send();
};
var insertEmojiSelector = function(emojiSpan){ var avalEmojis = emojiSpan.dataset.emojis; if(avalEmojis.length > 0){ avalEmojis = avalEmojis.split(' ').map(function(emoji){ return '<span class="emoji">'+emoji+'</span>'; }).join(' '); var emojiSelect = document.createElement("DIV"); emojiSelect.className = 'selector'; emojiSelect.innerHTML = avalEmojis; emojiSpan.appendChild(emojiSelect); emojiSelect.addEventListener('click', function(e){ if(e.target.classList.contains('emoji')){ e.target.parentNode.parentNode.className = 'emojiChar'; e.target.parentNode.parentNode.innerHTML = e.target.innerHTML; } }, false); }
};
document.addEventListener('DOMContentLoaded', loadEmojiJSON, false);
document.getElementById('emojifyIt').addEventListener('click', function(){ emojifyIt('.emojify-input');
}, false);
document.querySelector('.emojify-input').addEventListener('click', function(e){ if(e.target.classList.contains('detectedEmoji')){ insertEmojiSelector(e.target); }
}, false);
Emojify It - Script Codes
Emojify It - Script Codes
Home Page Home
Developer Adam
Username adamjacob
Uploaded December 27, 2022
Rating 4
Size 4,371 Kb
Views 6,072
Do you need developer help for Emojify It?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Adam (adamjacob) Script Codes
Name
Bouncy Box
Water
Weather Widget
CSS Triangle Shadow
Blog Card
Inline SVG with ReactJS
Simple Poll UI
Loading...
Simple Tabs
Speech To Text
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!