document.addEventListener('DOMContentLoaded', function() { const largeTextArea = document.getElementById('largeTextArea'); const coordDisplay = document.getElementById('coordDisplay'); const selectMode = document.getElementById('selectMode'); const plccoodBtn = document.getElementById('plccoodBtn'); // Coordinate selection in large text area largeTextArea.addEventListener('click', function(e) { if (selectMode.checked) { const rect = this.getBoundingClientRect(); const x = Math.floor(e.clientX - rect.left); const y = Math.floor(e.clientY - rect.top); coordDisplay.value = `${x.toString().padStart(3, '0')},${y.toString().padStart(3, '0')}`; } }); // Auto-formatting for coordinate inputs document.querySelectorAll('.coordInput').forEach(input => { input.addEventListener('input', function() { if (this.value.length === 3) this.value += ','; }); }); // PLCCOOD button functionality plccoodBtn.addEventListener('click', function() { const nextEmpty = document.querySelector('.coordInput:not(:filled)'); if (nextEmpty) nextEmpty.value = coordDisplay.value; }); // Implement other functionalities (content placement, save, copy, clear) });