homework/HW04/main.js

let a = {
    name: 'Ivan',
    surname: 'Ivanov',
};

let b = {
    name: 'Ivan',
    surname: 'Ivanov',
};

let c = {
    name: 'Ivan',
    surname: 'Ivanov',
};


function runDifferentFields() {
    a.age = 25;
    b.fathername = 'Ivanovich';
    c.sex = 'man';
}

function runFieldsCheck() {
    a.age = 25;
    b.fathername = 'Ivanovich';
    c.sex = 'man';

    alert('age' in a);

    if ('fathername' in b) {
        alert(`${b.fathername}`);
    }

    if ('sex' in c) {
        alert(`${c.sex}`);
    }
}

function runArrayOfPersons() {
    let persons = [];
    persons.push(b);
    persons[1] = {name: 'Ivan', surname: 'Ivanov',};
    persons.push(c);
    console.log(persons);
}

function runLoopOfPersons() {
    let persons = [];

    persons.push(b);
    persons[1] = {name: 'Ivan', surname: 'Ivanov',};
    persons.push(c);

    for (let i = 0; i < persons.length; i++) {
        console.log(persons[i]);
    }
}

let originPersons = [
    {
        name: 'Egor',
        surname: 'Egorov',
        age: 24,
        isCleanShaven: true,
    },
    {
        name: 'Oleg',
        surname: 'Olegov',
        age: 29,
        isBeard: true,
    },
    {
        name: 'Yriy',
        surname: 'Yriyev',
        age: 45,
        isMarried: false,
        isAlcoholic: true,
        hasCovid: true,
    }
];

function runLoopOfNameAndSurname() {
    let persons = [...originPersons];

    for (let i = 0; i < persons.length; i++) {
        console.log(persons[i].name, persons[i].surname);
    }
}

function runLoopOfLoopOfValues() {
    let persons = [...originPersons];

    for (let i = 0; i < persons.length; i++) {
        let person = persons[i];
        for (let k = 0; k < 1; k++) {
            let result = Object.entries(person);
            console.log(result);
        }
    }
}

function runFullName() {
    let persons = [...originPersons];

    persons[0].fathername = 'Egorovich';
    persons[1].fathername = 'Olegovich';

    console.log(persons);
    for (let i = 0; i < persons.length; i++) {
        persons[i].fullname = `${persons[i].surname} ${persons[i].name} ${persons[i].fathername}`;
    }
}

function runSerialize() {
    let persons = [...originPersons];

    let resultJSONStringify = JSON.stringify(persons);
    console.log(resultJSONStringify);
}

function runDeserialize() {
    let persons = [...originPersons];
    persons[2] = JSON.parse('{"name":"Alyona","surname":"Ivanova","age":"23"}');
    console.log(persons);
}

function runHTML() {
    let persons = [...originPersons];


    let str = '<table>';
    for (let i = 0; i < 2; i++) {
        person = persons[i];
        let personName = person.name;
        let personSurName = person.surname;
        let personAge = person.age;
        str += '<tr>';
        for (let k = 0; k < 1; k++) {
            str += `<td>Имя:</td><td>${personName}</td>`;
            str += `<td>Фамилия:</td><td>${personSurName}</td>`;
            str += `<td>Возраст:</td><td>${personAge} лет</td>`;
        }
        str += '</tr>';
    }
    str += '</table>';

    document.write(str);
}


function runHTMLOptionalFields() {

    let persons = [
        {
            name: 'Egor',
            surname: 'Egorov',
            age: 24,
            isMarried: true,
            isAlcoholic: false,
            isCleanShaven: true,
        },
        {
            name: 'Oleg',
            surname: 'Olegov',
            age: 29,
            isMarried: false,
            isAlcoholic: true,
            isCleanShaven: false,
        },
        {
            name: 'Yriy',
            surname: 'Yriyev',
            age: 45,
            isMarried: false,
            isAlcoholic: true,
            isCleanShaven: false,
        }
    ];

    let str = '<table border="1">';
    for (let i = 0; i < 2; i++) {
        person = persons[i];
        let personName = person.name;
        let personSurName = person.surname;
        let personAge = person.age;
        let personIsMarried = person.age;
        let personIsAlcoholic = person.isAlcoholic;
        let personIsCleanShaven = person.isAlcoholic;
        str += '<tr>';
        for (let k = 0; k < 1; k++) {
            str += `<td>Имя:</td><td>${personName}</td>`;
            str += `<td>Фамилия:</td><td>${personSurName}</td>`;
            str += `<td>Возраст:</td><td>${personAge} лет</td>`;
            str += `<td>Увлекается алкоголем:</td><td>${personIsAlcoholic}</td>`;
            str += `<td>Женат:</td><td>${personIsMarried}</td>`;
            str += `<td>Выбрит идеально гладно:</td><td>${personIsCleanShaven}</td>`;

        }
        str += '</tr>';
    }
    str += '</table>';

    document.write(str);
}

function runHTMLTrColor() {
    let persons = [
        {
            name: 'Egor',
            surname: 'Egorov',
            age: 24,
            isMarried: true,
            isAlcoholic: false,
            isCleanShaven: true,
        },
        {
            name: 'Oleg',
            surname: 'Olegov',
            age: 29,
            isMarried: false,
            isAlcoholic: true,
            isCleanShaven: false,
        },
        {
            name: 'Yriy',
            surname: 'Yriyev',
            age: 45,
            isMarried: false,
            isAlcoholic: true,
            isCleanShaven: false,
        }
    ];

    let str = '<table border="1">';
    for (let i = 0; i < 2; i++) {
        person = persons[i];
        let personName = person.name;
        let personSurName = person.surname;
        let personAge = person.age;
        let personIsMarried = person.age;
        let personIsAlcoholic = person.isAlcoholic;
        let personIsCleanShaven = person.isAlcoholic;
        str += '<tr style="color: red">';
        for (let k = 0; k < 1; k++) {
            str += `<td>Имя:</td><td>${personName}</td>`;
            str += `<td>Фамилия:</td><td>${personSurName}</td>`;
            str += `<td>Возраст:</td><td>${personAge} лет</td>`;
            str += `<td>Увлекается алкоголем:</td><td>${personIsAlcoholic}</td>`;
            str += `<td>Женат:</td><td>${personIsMarried}</td>`;
            str += `<td>Выбрит идеально гладно:</td><td>${personIsCleanShaven}</td>`;
        }
        str += '</tr>';
    }
    str += '</table>';
    document.write(str);
}


function runHTMLThOptional() {
    let persons = [
        {
            name: 'Egor',
            surname: 'Egorov',
            age: 24,
            isMarried: true,
            isAlcoholic: false,
            hasCovid: true,
        },
        {
            name: 'Oleg',
            surname: 'Olegov',
            age: 29,
            isMarried: false,
            isAlcoholic: true,
            isCleanShaven: false,
            eyesColor: 'blue',
        },
        {
            name: 'Yriy',
            surname: 'Yriyev',
            age: 45,
            isMarried: false,
            likeHealthyFood: true,
            isCleanShaven: false,

        }
    ];
    const keys = persons.map(Object.keys);
    const withoutDuplicate = keys.flat();
    const setKeys = new Set(withoutDuplicate);
    const arrOfKeys = [...setKeys];

    let str = '<table border="1">';

    arrOfKeys.forEach(key => {
        str += `<th>${key}</th>`;
    });

    persons.forEach(person => {
        str += `<tr>`;
        console.log(person);
        arrOfKeys.forEach(key => {
            let result;
            if (person[key] === true) {
                result = 'да';
            } else if (person[key] === false) {
                result = 'нет';
            } else if (person[key] === undefined) {
                result = '';
            } else {
                result = person[key];
            }
            str += `<td>${result}</td>`;
        });

        str += `</tr>`;
    });

    str += '</table>';
    document.write(str);

}


function runDestructArray() {
    let arr = [1, 2, 3, 4, 5, 'a', 'b', 'c'];

    let resultEven = arr.filter(even => {
        return even % 3;
    });
    const [even1, even2] = resultEven;
    console.log(even1, even2);

    let resultOdd = arr.filter(odd => {
        return odd % 2;
    });
    const [odd1, odd2, odd3] = resultOdd;
    console.log(odd1, odd2, odd3);

    let resultLetters = arr.filter(letter => {
        return typeof letter === 'string';
    });
    const [letter1, letter2, letter3] = resultLetters;
    console.log(letter1, letter2, letter3);
}

function runDestructString() {
    let arr = [1, 'abc'];

    const letters = arr[1].split('');
    arr.pop();

    for (let i = 0; i < letters.length; i++) {
        arr.push(letters[i]);
    }

    let [number, s1, s2, s3] = arr;
    console.log(arr);
}

function runDestruct2() {
    let obj = {
        name: 'Ivan',
        surname: 'Petrov',
        children: [
            {name: 'Maria'},
            {name: 'Nikolay'}]
    };

    const [{name: name1}, {name: name2}] = obj.children;
    console.log(name1, name2);
}

function runDestruct3() {
    let arr = [1, 2, 3, 4, 5, 6, 7, 10];

    const {0: a, 1: b, length} = arr;
    console.log(a, b, length);
}

function runBlueBelt() {
    let someTree = {
        tagName: 'table',
        subTags: [
            {
                tagName: 'tr',
                subTags: [
                    {
                        tagName: 'td',
                        text: 'some text',
                    },
                    {
                        tagName: 'td',
                        text: 'some text 2',
                    }
                ]
            }
        ],
        attrs:
            {
                border: 1,
            },
    };

    function createComponent(object) {
        let parentElem = document.createElement(object.tagName);

        Object.entries(object.attrs).forEach(([key, value]) => parentElem.setAttribute(key, value));

        object.subTags.forEach(function (elem) {
                let elem1 = document.createElement(elem.tagName);
                parentElem.appendChild(elem1);
                console.log(parentElem);
                elem.subTags.forEach(function (inner) {
                        let elem2 = document.createElement(inner.tagName);
                        elem1.appendChild(elem2);
                        elem2.textContent = inner.text;
                    }
                );
            }
        );
        document.body.appendChild(parentElem);
    }

    createComponent(someTree);
}

const tasksArray = [
    ['different fields', runDifferentFields],
    ['fields check', runFieldsCheck],
    ['array of persons', runArrayOfPersons],
    ['loop of persons', runLoopOfPersons],
    ['loop of name and surname', runLoopOfNameAndSurname],
    ['loop of loop of values', runLoopOfLoopOfValues],
    ['fullName', runFullName],
    ['serialize', runSerialize],
    ['deserialize', runDeserialize],
    ['HTML', runHTML],
    ['HTML optional fields', runHTMLOptionalFields],
    ['HTML tr color', runHTMLTrColor],
    ['HTML th optional', runHTMLThOptional],
    ['destruct array', runDestructArray],
    ['destruct string', runDestructString],
    ['destruct 2', runDestruct2],
    ['destruct 3', runDestruct3],
    ['синий пояс', runBlueBelt]
];

let $list = document.querySelector('.list');
tasksArray.forEach(task => {
    const [name, callback] = task;

    const $div = document.createElement('div');
    $div.className = 'div';

    let $button = document.createElement('button');
    $button.textContent = 'Запустить';
    $button.className = 'button';
    $button.onclick = callback;
    $div.appendChild($button);

    const $li = document.createElement('li');
    $li.className = 'li';
    $li.textContent = name;
    $div.appendChild($li);
    $list.appendChild($div);
});