// 09. Highlight Active

// variant 1
function focused() {
    inputElement = document.querySelectorAll('div div input')
    let activeElement = document.activeElement;

    for (inputEl of inputElement) {
        inputEl.addEventListener('focusin', (e) => {
            e.currentTarget.parentNode.classList.add('focused')
        })
        
        inputEl.addEventListener('focusout', (e) => {
            e.currentTarget.parentNode.classList.remove('focused')
        })
    }

}

//variant 2
function focused() {
    let divs = document.querySelectorAll('div div input');
    
    for (let div of divs) {
        div.addEventListener('focusin', () => {
            div.parentNode.classList.add('focused');
        });
        
        div.addEventListener('focusout', () => { 
            div.parentNode.classList.remove('focused'); 
        });
    }
}