간단한 티스토리 자바스크립트 예제2

 

사용한 html 소스코드는 다음과 같다.

<style>
	.button-group {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	width: 300px;
	margin: 0 auto;
	}
    .text-field {
	justify-content: flex-end;
	width: 300px;
	margin: 0 auto;
	}
</style>

<div class="button-group" id="buttonContainer"></div>
<br />
<div class="text-field" id="status"></div>

<script>
	const emojiDictionary = '💘💝💖💗💓💞💕❤🧡💛💚💙💜🤎🖤🤍🥰🥹😂😅😢😭🙏👍👏🙌🫶💐🌹🌸✨🔮👑🔥🐥'
	const buttonTexts = Array.from(emojiDictionary);
	
	function copyTextToClipboard(text) {
		const tempInput = document.createElement('textarea');
		tempInput.style.position = 'absolute';
		tempInput.style.left = '-9999px';
		tempInput.value = text;
		document.body.appendChild(tempInput);
		tempInput.select();
		document.execCommand('copy');
		document.body.removeChild(tempInput);
		}

	function createButtonAndAddEventListener(buttonText) {
		const button = document.createElement('button');
		button.innerText = buttonText;
		button.style.width = '40px';
		button.style.height = '40px';
		button.style.fontSize = '25px';
		button.style.padding = '0';
		button.style.textAlign = 'center';
		document.getElementById('buttonContainer').appendChild(button);
		button.addEventListener('click', function() {
			copyTextToClipboard(buttonText);
			document.getElementById('status').innerText = buttonText + ' copied!'
			});
		}

	for (const text of buttonTexts) {
		createButtonAndAddEventListener(text);
	}
</script>