script.js

const MAX_CHARS = 200;
const textarea = document.getElementById('messageBox');
const counterDisplay = document.getElementById('counterDisplay');
const warningMessage = document.getElementById('warningMessage');
const progressBar = document.getElementById('progressBar');

textarea.addEventListener('input', function () {
    // Enforce the limit (in case maxlength is bypassed, e.g. via paste)
    if (textarea.value.length > MAX_CHARS) {
        textarea.value = textarea.value.slice(0, MAX_CHARS);
    }

    const currentLength = textarea.value.length;
    const remaining = MAX_CHARS - currentLength;
    const percent = (currentLength / MAX_CHARS) * 100;
    const limitReached = currentLength >= MAX_CHARS;

    counterDisplay.textContent = `${currentLength}/${MAX_CHARS} characters (${remaining} remaining)`;
    progressBar.style.width = `${percent}%`;

    counterDisplay.classList.toggle('limit-reached', limitReached);
    progressBar.classList.toggle('limit-reached', limitReached);
    textarea.classList.toggle('limit-reached', limitReached);
    warningMessage.style.display = limitReached ? 'block' : 'none';
});