const string = document.querySelector('#string');
const counterTotalDisplay = document.querySelector('.countTotal');
const currentCountDisplay = document.querySelector('.currentCount');
const btn = document.querySelector('#btn');
const allowedCount = 140; // So the allowed count can be changed
let currentCount = 0;
const changeArray = [counterTotalDisplay, currentCountDisplay];
counterTotalDisplay.textContent = `/ ${allowedCount}`
currentCountDisplay.textContent = allowedCount ;

string.addEventListener('input', (event) => {
    let count = string.value.length;
    currentCount = allowedCount - count;
    currentCountDisplay.textContent = currentCount;

    if (currentCount <= 20) {
        for (let element of changeArray) {
            element.style.color = "red";
        }
    } else {
        for (let element of changeArray) {
            element.style.color = "white";
        }
    }
    
    if (currentCount < 0) {
        btn.disabled = true;
        btn.classList.add('buttonDisabled');
    } else {
        btn.disabled = false;
        btn.classList.remove('buttonDisabled');
    }
});