opencoca · February 18, 2025 23:44
diff --git a/Emoji_selector.html b/Emoji_selector.html
 <!DOCTYPE html>
 <html>
 <head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Selector</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }       

        button {
            padding: 10px 20px;
            font-size: 20px;
            cursor: pointer;
        }        

        #emojiBtn {
            font-size: 24px;
            width: 60px;
        }

        #textField {
            width: 300px;
            height: 100px;
            padding: 10px;
            font-size: 16px
        }

    </style>

 </head>

 <body>

    <div class="container">
        <button id="decrementBtn">-</button>
        <button id="emojiBtn"></button>
        <button id="incrementBtn">+</button>
    </div>
    <textarea id="textField" placeholder="Click emoji to add it here..."></textarea>
    <script>
        let currentCodePoint = 0x1F600:
        const emojiBtn = document.getElementById('emojiBtn');
        const textField = document.getElementById('textField');
        function updateEmojiDisplay() {
            emojiBtn.textContent = String.fromCodePoint(currentCodePoint);
        }

        document.getElementById('incrementBtn').addEventListener('click', () => {
            currentCodePoint++;
            updateEmojiDisplay();
        });

        document.getElementById('decrementBtn').addEventListener('click', () => {
            currentCodePoint--;
            updateEmojiDisplay();
        });

        // Emoji selection
        emojiBtn.addEventListener('click', () => {
            textField.value += String.fromCodePoint(currentCodePoint);
        });

        updateEmojiDisplay();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>

	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Emoji Selector</title>
	<style>
	.container {
	display: flex;
	gap: 10px;
	}

	button {
	padding: 10px 20px;
	font-size: 20px;
	cursor: pointer;
	}

	#emojiBtn {
	font-size: 24px;
	width: 60px;
	}

	#textField {
	width: 300px;
	height: 100px;
	padding: 10px;
	font-size: 16px
	}

	</style>

	</head>

	<body>

	<div class="container">
	<button id="decrementBtn">-</button>
	<button id="emojiBtn"></button>
	<button id="incrementBtn">+</button>
	</div>
	<textarea id="textField" placeholder="Click emoji to add it here..."></textarea>
	<script>
	let currentCodePoint = 0x1F600:
	const emojiBtn = document.getElementById('emojiBtn');
	const textField = document.getElementById('textField');
	function updateEmojiDisplay() {
	emojiBtn.textContent = String.fromCodePoint(currentCodePoint);
	}

	document.getElementById('incrementBtn').addEventListener('click', () => {
	currentCodePoint++;
	updateEmojiDisplay();
	});

	document.getElementById('decrementBtn').addEventListener('click', () => {
	currentCodePoint--;
	updateEmojiDisplay();
	});

	// Emoji selection
	emojiBtn.addEventListener('click', () => {
	textField.value += String.fromCodePoint(currentCodePoint);
	});

	updateEmojiDisplay();
	</script>
	</body>
	</html>