const data  = [
    {
        name: 'Гайк1',
        lastname: 'Инанц1',
        age: 27
    },
    {
        name: 'Гайк2',
        lastname: 'Инанц2',
        age: 27
    },
    {
        name: 'Гайк3',
        lastname: 'Инанц3',
        age: 27
    },
    {
        name: 'Гайк4',
        lastname: 'Инанц4',
        age: 27
    }
];





const root_elem = document.querySelector('#root');


function changeCount(name, coef){
    const cur_user = data.find(elem=>elem.name === name);
    const key_arr = Object.keys(cur_user);

    if (key_arr.includes('count')){
        cur_user['count'] += coef;
    }else{
        cur_user['count'] = coef;
    }
    console.log(data);
    render();
}


function render(){
    root_elem.innerText = '';


    data.forEach((elem)=>{
        const card = document.createElement('div');
        card.classList.add('user');

        const name = document.createElement('p');
        const lastname = document.createElement('p');
        const age = document.createElement('p');
        const btn_incr = document.createElement('button');
        const btn_decr = document.createElement('button');
        const clicker_info = document.createElement('p');

        clicker_info.classList.add('clicker_info');


        card.appendChild(name);
        card.appendChild(lastname);
        card.appendChild(age);
        card.appendChild(btn_incr);
        card.appendChild(btn_decr);
        card.appendChild(clicker_info);


        name.innerText = elem.name;
        lastname.innerText = elem.lastname;
        age.innerText = elem.age;
        btn_incr.innerText = '+';
        btn_decr.innerText = '-';

        if (elem.count === undefined){
            clicker_info.innerText = 'кликов небыло';
        }else{
            clicker_info.innerText = elem.count;
        }




        btn_incr.addEventListener('click', ()=>changeCount(elem.name, 1));
        btn_decr.addEventListener('click', ()=>changeCount(elem.name, -1));

        root_elem.appendChild(card);

    });


}

render()