cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <main>
	<input name="input" id="input" cols="30" rows="10" placeholder="Text to convert to emoji">
	<p id="output" autocorrect=off autocomplete=off></p>
	<button id="copy">copy</button><span id="msg"></span>
	<div><a href="https://haroen.me/emojibeth">haroen.me/emojibeth</a></div>
</main>
            
          
!
            
              body {
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

main {
	max-width: 40em;
	margin: 2em auto;
}

input {
	&:focus {
		border-width: 5px;
		outline: none;
	}
}

div {
	text-align: center;
	margin: 2em;
}

a {
	color: aquamarine;
	text-decoration: none;
	font-weight: 600;
}

a,
button {
	font-size: 1em;
	transition: font-size .2s cubic-bezier(0.4, 0, 1, 1);
	&:hover {
		font-size: 1.1em;
	}
}

p,
input {
	border: 2px solid aquamarine;
	padding: 1em;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1em;
	line-height: 2;
	width: 100%;
}

button {
	border: 2px solid aquamarine;
	padding: .2em;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1em;
	background: none;
}

#msg {
	transition: opacity .2s cubic-bezier(0.4, 0, 1, 1);
	opacity: 0;
	margin: 1em;
}
            
          
!
            
              const alphabet = {
	a: ["🅰ī¸"],
	b: ["🅱ī¸"],
	c: ["Šī¸", "🌜"],
	d: ["🌮"],
	e: ["📧"],
	f: ["🎏"],
	g: ["â›Ŋ"],
	h: ["♓"],
	i: ["ℹī¸", "đŸŒĩ", "đŸšĻ", "đŸ›ĸ", "đŸ•¯", "📍", "🎚"],
	j: ["🗾", "🏒"],
	k: ["🎋"],
	l: ["đŸ‘ĸ"],
	m: ["ã€Ŋī¸", "Ⓜī¸", "♍ī¸"],
	n: ["📈"],
	o: ["🅾ī¸", "🌕", "🌚", "🌝", "⚙"], //,"💍"
	p: ["đŸ…ŋī¸"],
	q: ["đŸŽ¯"],
	r: ["ÂŽī¸"],
	s: ["💲", "⚡ī¸"],
	t: ["🌴", "⛏"],
	u: ["⛎"],
	v: ["♈", "✅", "✔ī¸", "☑ī¸"],
	w: ["〰ī¸"],
	x: ["⚔", "❌", "❎"],
	y: ["🌱"],
	z: ["💤"],
	1: ["1ī¸âƒŖ"],
	2: ["2ī¸âƒŖ"],
	3: ["3ī¸âƒŖ"],
	4: ["4ī¸âƒŖ"],
	5: ["5ī¸âƒŖ"],
	6: ["6ī¸âƒŖ"],
	7: ["7ī¸âƒŖ"],
	8: ["8ī¸âƒŖ"],
	9: ["9ī¸âƒŖ"],
	0: ["0ī¸âƒŖ"],
	"?": ["❓", "❔"],
	"!": ["❗ī¸", "❕"],
	" ": ["ƒƒ "],
};

/**
 * Convert a character to its emoji equivalent
 * @param  {character} c the character to convert
 * @return {character}   the equivalent emoji
 */
function convert(c) {
	if (alphabet[c.toLowerCase()]) {
		const possibilities = alphabet[c.toLowerCase()];
		const index = Math.floor(Math.random() * possibilities.length);
		return possibilities[index];
	} else {
		return c;
	}
}

document.getElementById("input").addEventListener("input", () => {
	const output = document.getElementById('output');
	output.textContent = '';
	const text = document.getElementById("input").value;
	for (let i of text) {
		output.textContent += convert(i);
	}
});

function log(text) {
	msgText.style.opacity = 1;
	msgText.innerHTML = text;
	setTimeout(function() {
		msgText.style.opacity = 0;
		setTimeout(function() {
			//msgText.innerHTML = '';
		}, 200);
	}, 2000);
}

// copying
// https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en
const copyBtn = document.getElementById('copy');
copyBtn.disabled = !document.queryCommandSupported('copy');
const msgText = document.getElementById('msg');
copyBtn.addEventListener('click', function(event) {
	// Select the email link anchor text  
	const output = document.getElementById('output');
	let range = document.createRange();
	range.selectNode(output);
	window.getSelection().addRange(range);

	try {
		// Now that we've selected the anchor text, execute the copy command  
		var copy = document.execCommand('copy');
		log('Copy was ' + (copy ? 'successful' : 'unsuccessful'));
	} catch (err) {
		log('Oops, unable to copy');
	}

	// Remove the selections - NOTE: Should use
	// removeRange(range) when it is supported  
	window.getSelection().removeAllRanges();
});
            
          
!
999px
Loading ..................

Console