HomeWork_JS/Js_06/js.js

// 1.  Literals +
// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript. Например:
/*{
   const dog = {
        name  : "leo",
        color : "orange",
        breed : "spitz",
}
}*/
// 2. Literals expand +
// Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями. Обеспечьте ввод названия
// ключа и значения через prompt прямо в литерале объекта {}
/*{
    const car = {
        brand : "Toyota",
    }
    car[prompt("Введите ключ")] = prompt('Введите значение для ключа');
    car[prompt("Введите ключ")] = prompt('Введите значение для ключа');
    console.log(car)
}*/

//3.  Literals copy +
// Пусть пользователь введет еще одно свойство в переменную. Вставьте в новый объект эту переменную.
// Скопируйте объект из предыдущего задания в новый объект.
/*{
    const car = {
        brand : "Toyota",
        model : "Camry",
        year : "2022"
    }
    const newCar = {...car}
    newCar[prompt("Введите ключ")] = prompt('Введите значение для ключа');
    console.log(newCar)
}*/

//4. Html tree +
/*{
    let form = {
        tagName  : 'form',
        children : [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: "span",
                        children: ["Enter a data please:"],
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'name'
                        },
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'surname'
                        }
                    }
                ],
            },
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'button',
                        attrs: {
                            id: 'ok'
                        },
                        children: ["OK"]
                    },
                    {
                        tagName: 'button',
                        attrs: {
                            type: 'text',
                            id: 'cancel'
                        },
                        children: ["Cancel"]
                    }
                ]
            }
        ]
    }
    console.log(form.children[1].children[1].children);
    console.log(form.children[0].children[2].attrs.id)
} */


// 5. Parent +
// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
/*{
    let form = {
        tagName  : 'form',
        children : [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: "span",
                        children: ["Enter a data please:"],
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'name'
                        },
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'surname'
                        }
                    }
                ],
            },
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'button',
                        attrs: {
                            id: 'ok'
                        },
                        children: ["OK"]
                    },
                    {
                        tagName: 'button',
                        attrs: {
                            type: 'text',
                            id: 'cancel'
                        },
                        children: ["Cancel"]
                    }
                ]
            }
        ]
    }

body.children[0].parent = body;
body.children[1].parent = body;
body.children[0].children[0].parent = body.children[0].parent;
body.children[0].children[1].parent = body.children[0].parent;
body.children[0].children[2].parent = body.children[0].parent;
body.children[0].children[3].parent = body.children[0].parent;
body.children[1].children[0].parent = body.children[1].parent;
body.children[1].children[1].parent = body.children[1].parent;
}
*/

// 6. Change OK +
// Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree.
// Пользователь также вводит значение этого атрибута
/*{
    let form = {
        tagName  : 'form',
        children : [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: "span",
                        children: ["Enter a data please:"],
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'name',

                        },
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'surname'
                        }
                    }
                ],
            },
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'button',
                        attrs: {
                            id: 'ok'
                        },
                        children: ["OK"]
                    },
                    {
                        tagName: 'button',
                        attrs: {
                            type: 'text',
                            id: 'cancel'
                        },
                        children: ["Cancel"]
                    }
                ]
            }
        ]
    }
    form.children[1].children[0].attrs['maxLength'] = prompt('Введите значение maxLength');
    console.log(form.children[1].children[0].attrs)
}*/

//7. Destructure +
// Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span,
// Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.
/*{
    let form = {
        tagName  : 'form',
        children : [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: "span",
                        children: ["Enter a data please:"],
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'name',

                        },
                    },
                    {
                        tagName: 'input',
                        attrs: {
                            type: 'text',
                            id: 'surname'
                        }
                    }
                ],
            },
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'button',
                        attrs: {
                            id: 'ok'
                        },
                        children: ["OK"]
                    },
                    {
                        tagName: 'button',
                        attrs: {
                            type: 'text',
                            id: 'cancel'
                        },
                        children: ["Cancel"]
                    }
                ]
            }
        ]
    }
const textSpan = form.children[0].children[0].children;
console.log(textSpan);
const textButton = form.children[1].children[1].children;
console.log(textButton);
const id = form.children[0].children[2].attrs.id;
console.log(id)
} */

// 8. Destruct array +
// напишите код, который используя деструктуризацию положит:
// четные числа в переменные even1, even2; нечетные в odd1, odd2, odd3; буквы в отдельный массив

/*{
    let arr = [1,2,3,4,5,"a","b","c"];
    [odd1, even1, odd2, even2, odd3, ...letters] = arr;
} */

// 9. Destruct string +
//// напишите код, который используя деструктуризацию положит: число в переменную number; букву a в переменную s1;
// букву b в переменную s2; букву c в переменную s3

/*{
    let arr = [1, "abc"];
    [number, [s1, s2, s3]] = arr;
} */

//10. Destruct 2 +
//извлеките используя деструктуризацию имена детей в переменные name1 и name2
/*{
    let obj = { name: 'Ivan',
                surname: 'Petrov',
                children: [
                    {name: 'Maria'},
                    {name: 'Nikolay'}]};

    const [name1,name2] = obj.children;
    console.log(name1, name2)
} */

// 11. Destruct 3 +
// извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length
/*{
    const arr = [1,2,3,4,5,6,7,10];
    const {0:a, 1:b, length} = arr;
}*/

// 12. Copy delete +
// Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.
/*{
    const dog = {
            name: "leo",
            color: "orange",
            breed: "spitz",
    }

    const dog2 = {...dog};

    dog2[prompt('Добавьте одно из свойств собаки')] = prompt('Введите значение');
    console.log(dog2)
} */

// 13.Currency real rate +
// Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него вставьте в
// браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
/*{
    let sum = prompt("Введите сумму в исходной валюте")

    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
        .then(data => {
            const {[prompt("Введите исходную валюту").toUpperCase()]:baseCurrency} = data.rates;
            const {[prompt("Введите валюту в которую просходит конвертация").toUpperCase()]:quoteCurrency} = data.rates;
            let result = baseCurrency/quoteCurrency*sum;
            console.log(result)
            console.log(data)
        })
}*/


// 14. Currency drop down +
// Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML-тэгов
// в строковой переменной. Для выпадающих списков в HTML предусмотрены тэги <select> и <option>

/* {   fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {
        console.log(data);
        let rates = Object.keys(data.rates);
        console.log(rates);
        let   str = "<select>";
        for (let currency of rates){
            str += "<option>"+ currency + "</option>";
        }
        str += "</select>"
        document.write(str);
    })
} */

// 15. Currency table +
// Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя
// заготовку из задания Currency real rate:
/*
  fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {

        let table = '<table>'
        table += '<tr><td></td>'
        for (let currency in data.rates){
            table += '<td>' + currency + '</td>'
        }
        table += '</tr>'

            for (let currencyVertical in data.rates){
                table += '<tr><td>' + currencyVertical + '</td>';

                for (let currencyHorizontal in data.rates) {
                    table += `<td>${data.rates[currencyHorizontal] / data.rates[currencyVertical]}</td>`
                    }
        }
        table += '</table>'
        document.write(table)

    })
     */

//16. Form +
// Напишите код, который их любого объекта создает форму HTML. Например для такого объекта
/*{
    const car = {
        "Name":"chevrolet chevelle malibu",
        "Cylinders":8,
        "Displacement":307,
        "Horsepower":130,
        "Weight_in_lbs":3504,
        "Origin":"USA",
        "in_production": false
    }
    for (const [key, values] of Object.entries(car)) {
        console.log(key, values)
        let str = "<form>";
        if (typeof values === 'string') {
            str += "<label>" + key + "<input type='text' value='" + values + "'/>" + "</label>";
        } else if (typeof values === 'number') {
            str += "<label>" + key + "<input type='number' value='" + values + "'/>" + "</label>";
        } else if (typeof values === 'boolean') {
            str += "<label>" + key + "<input type='checkbox' value='" + values + "'/>" + "</label>";
        }
        str += "</form>"
        document.write(str);
    }
} */


//17. Table в конспекте
// Даден любой массив с объектами
const persons = [
    {
        name: 'Мария',
        fatherName: 'Ивановна',
        surname: 'Иванова',
        sex: 'female'
    },
    {
        name: 'Николай',
        fatherName: 'Иванович',
        surname: 'Иванов',
        age: 15
    },
    {
        name: 'Петр',
        fatherName: 'Иванович',
        surname: 'Иванов',
        married: true
    },
]
let arrColumn = [];

for (let obj of persons) {
    for (let key in obj) {
        if (!(arrColumn.includes(key))) {arrColumn.push(key)}
    }
}
let table = '<table>';

table += '<tr>'
for (let th of arrColumn){
    table += '<th>' + th + '</th>'
}
table += '</tr>'

for ( let obj of persons) {
    table += '<tr>';

    for (column of arrColumn){
        table += '<td>'
        if (obj[column]) { table += obj[column] }
        table += '</td>'
    }
    table += '</tr>';
}

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