homework/js/06/HW06.js

// Материал
// Просмотрите, запустите и внимательно проанализируйте все примеры кода из материала лекции.
{
    // сделано
}



// Literals
// Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript.Например:
{
    const flover = {
        type: 'palm',
        height: 150,
        color: 'green'
    }

    const dog = {
        type: 'york',
        sex: 'female',
        color: 'red'
    }

    const wife = {
        type: 'creator',
        sex: 'female',
        height: 165
    }
}



// Literals expand
// Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями.Обеспечьте ввод названия ключа и значения через prompt прямо в литерале объекта { }
{
    const flover = {
        type: 'palm',
        height: 150,
        color: 'green',
        [prompt('Введите первый параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра'),
        [prompt('Введите второй параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра')
    }

    const dog = {
        type: 'york',
        sex: 'female',
        color: 'red',
        [prompt('Введите первый параметр для объекта "Собака"')]: prompt('Введите описание этого параметра'),
        [prompt('Введите второй параметр для объекта "Собака"')]: prompt('Введите описание этого параметра')
    }

    const wife = {
        type: 'creator',
        sex: 'female',
        height: 165,
        [prompt('Введите первый параметр для объекта "Жена"')]: prompt('Введите описание этого параметра'),
        [prompt('Введите второй параметр для объекта "Жена"')]: prompt('Введите описание этого параметра')
    }
}



// Literals copy
// Пусть пользователь введет еще одно свойство в переменную.Вставьте в новый объект эту переменную.Скопируйте объект из предыдущего задания в новый объект.
{
    const flover = {
        type: 'palm',
        height: 150,
        color: 'green'
    }

    const dog = {
        type: 'york',
        sex: 'female',
        color: 'red'
    }

    const wife = {
        type: 'creator',
        sex: 'female',
        height: 165
    }

    const newObj = { ...flover }
    newObj[prompt('Введите имя ключа в поле ниже')] = prompt('Введите значение для указанного ранее ключа')
    console.log(newObj)
}



// Html tree
// Сделайте декларативную JSON - структуру для тэгов выше, в которой:
// каждый тэг будет объектом
// имя тэга будет полем tagName
// вложенные тэги будут в поле children
// набор аттрибутов тэга будет в поле attrs.
// Выведите значения текста во второй кнопке, используя.и[].
// Выведите значение атрибута id во втором input, используя.и[].
{
    const dataInput = {
        tagName: 'body',
        children: [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'span',
                        children: ['Enter a data please:']
                    },
                    {
                        tagName: 'br'
                    },
                    {
                        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: {
                            id: 'cancel'
                        },
                        children: ['Cancel']
                    }
                ]
            }
        ]
    }

    console.log(dataInput.children[1].children[1].children[0])
    console.log(dataInput.children[0].children[3].attrs.id)
}



// Parent
// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение
{
    const dataInput = {
        tagName: 'body',
        children: [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'span',
                        children: ['Enter a data please:']
                    },
                    {
                        tagName: 'br'
                    },
                    {
                        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: {
                            id: 'cancel'
                        },
                        children: ['Cancel']
                    }
                ]
            }
        ]
    }
    dataInput.children[0].father = dataInput
    dataInput.children[1].father = dataInput
    dataInput.children[0].children[0].father = dataInput.children[0]
    dataInput.children[0].children[1].father = dataInput.children[0]
    dataInput.children[0].children[2].father = dataInput.children[0]
    dataInput.children[0].children[3].father = dataInput.children[0]
    dataInput.children[1].children[0].father = dataInput.children[1]
    dataInput.children[1].children[1].father = dataInput.children[1]
}



// Change OK
// Добавьте(или измените) любой введенный пользователем атрибут тэга < button id = 'ok' > из задания HTML Tree.Пользователь также вводит значение этого атрибута.
{
    const dataInput = {
        tagName: 'body',
        children: [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'span',
                        children: ['Enter a data please:']
                    },
                    {
                        tagName: 'br'
                    },
                    {
                        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: {
                            id: 'cancel'
                        },
                        children: ['Cancel']
                    }
                ]
            }
        ]
    }

    dataInput.children[1].children[0].attrs[prompt('ВВедите любой атрибут для тега "button"')] = prompt('Введите значение для этого атрибута')
    console.log(dataInput.children[1].children[0].attrs)
}



// Destructure
// Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span, Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.
{
    const dataInput = {
        tagName: 'body',
        children: [
            {
                tagName: 'div',
                children: [
                    {
                        tagName: 'span',
                        children: ['Enter a data please:']
                    },
                    {
                        tagName: 'br'
                    },
                    {
                        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: {
                            id: 'cancel'
                        },
                        children: ['Cancel']
                    }
                ]
            }
        ]
    }

    const { children: [{ children: [{ children: [span] }] }] } = dataInput
    console.log(span)
    const { children: [, { children: [, { children: [button] }] }] } = dataInput
    console.log(button)
    const { children: [{ children: [, , , { attrs: { id } }] }] } = dataInput
    console.log(id)
}



// Destruct array
// напишите код, который используя деструктуризацию положит:
// четные числа в переменные even1, even2,
//     нечетные в odd1, odd2, odd3,
//     буквы в отдельный массив
{
    let arr = [1, 2, 3, 4, 5, "a", "b", "c"]
    const [odd1, even1, odd2, even2, odd3, ...letters] = arr
    console.log(even1, even2, odd1, odd2, odd3, letters)
}



// Destruct string
// напишите код, который используя деструктуризацию положит:
// число в переменную number
// букву a в переменную s1
// букву b в переменную s2
// букву c в переменную s3
{
    let arr = [1, "abc"]
    const [number, [s1, s2, s3]] = arr
    console.log(number, s1, s2, s3)
}



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



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



// Copy delete
//     Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.
{
    const flover = {
        type: 'palm',
        height: 150,
        color: 'green',
        [prompt('Введите первый параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра'),
        [prompt('Введите второй параметр для объекта "Цветок"')]: prompt('Введите описание этого параметра')
    }
    const { type, height, color, ...rest } = flover
    const floverCopy = { type, height, color }
    console.log(floverCopy)
    console.log(flover === floverCopy)
}



// Currency real rate
// Ниже приведен код, который скачивает актуальную информацию о курсах валют.Скопируйте ссылку из него вставьте в браузер интереса ради.Реализуйте калькулятор обмена валют следующим образом:
// Пользователь вводит исходную валюту
// Пользователь вводит валюту, в которую происходит конвертация
// Пользователь вводит сумму в исходной валюте
// Пользовател видит результат конвертации
// Учтите, что пользователь может ввести какую - то дичь или название валют в неверном регистре
{
    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
        .then(data => {
            let startCurrency = prompt('Введите исходную валюту').toUpperCase()
            startCurrency = startCurrency in data.rates ? startCurrency : alert('такая валюта не поддерживается')
            let finishCurrency = prompt('Введите конечную валюту').toUpperCase()
            finishCurrency = finishCurrency in data.rates ? finishCurrency : alert('такая валюта не поддерживается')
            const summ = prompt('Введите сумму для обмена в исходной валюте')

            const { rates: { [startCurrency]: startCurrencValue } } = data
            const { rates: { [finishCurrency]: finishCurrencValue } } = data
            const result = (startCurrency === 'USD' ? summ * finishCurrencValue / startCurrencValue : summ * finishCurrencValue / startCurrencValue).toFixed(2)
            alert(isNaN(result) ? 'Вы ввели неправильно один или несколько араметров' : result)
            console.log(data) //изучите структуру, получаемую с сервера в консоли
        })
}



// Currency drop down
// Сделайте выпадающий список с названиями всех валют, используя код из прошлого задания и накопление HTML - тэгов в строковой переменной.Для выпадающих списков в HTML предусмотрены тэги < select > и < option >
{
    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
        .then(data => {
            const currencies = Object.keys(data.rates)
            let str = '<select>'
            for (let currency of currencies) {
                str += `<option>${currency}</option>`
            }
            str += '</select>'
            document.write(str)
            console.log(data) //изучите структуру, получаемую с сервера в консоли
        })
}



// Currency table
// Сделайте двумерную таблицу с курсами между всеми возможными парами валют по типу таблицы Пифагора, используя заготовку из задания Currency real rate:
// Используйте только один запрос на сервер.Используйте расчет кросскурса для вычисления курса между любой парой валют
{
    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
        .then(data => {
            // создали массив заголовков-названий валют
            const currencies = []
            for (const currency in data.rates) {
                currencies.push(currency)
            }
            // создали строку заголовков валют
            let str = `<table style="text-align: center; border-collapse: collapse">`
            str += `<tr><td></td>`
            for (const currency of currencies) {
                str += `<td style="padding: 5px 10px;background-color: grey;">${currency}</td>`
            }
            str += `</tr>`

            // создали таблицу с кросс-курсами
            let i = 0
            for (const [key, value] of Object.entries(data.rates)) {
                str += (i % 2) ? `<tr style = "background-color:#0000001f">` : `<tr>`
                i++
                // str += `<tr>`
                str += `<td style="background-color: grey;">${key}</td>`
                for (const num of Object.values(data.rates)) {
                    str += `<td style="padding: 5px 10px;">${(num / value).toFixed(2)}</td>`
                }
                str += `</tr>`
            }

            document.write(str)
        })
}



// Form
// Напишите код, который их любого объекта создает форму HTML.Например для такого объекта
// На экране должна появиться форма из 7 строк, с названиями полей, взятыми из ключей и полями ввода соответствующих типов.Значениями полей ввода должны быть значения из объекта.
// Для создания правильного типа тэга input используйте оператор typeof Javascript:
{
    const car = {
        "Name": "chevrolet chevelle malibu",
        "Cylinders": 8,
        "Displacement": 307,
        "Horsepower": 130,
        "Weight_in_lbs": 3504,
        "Origin": "USA",
        "in_production": false
    }
    let str = `<form>`
    for (let [key, value] of Object.entries(car)) {
        str += `<label>${key}: <input type="${typeof value === 'string' ? 'text' : typeof value === 'number' ? 'number' : 'checkbox'}" value="${value}" /></label></br></br>`
    }
    str += `</form>`
    document.write(str)
}



// Table
// Даден любой массив с объектами
// Сформировать таблицу(используя накопление тэгов HTML в строке):
{
    const persons = [
        {
            name: 'Мария',
            fatherName: 'Ивановна',
            surname: 'Иванова',
            sex: 'female'
        },
        {
            name: 'Николай',
            fatherName: 'Иванович',
            surname: 'Иванов',
            age: 15
        },
        {
            name: 'Петр',
            fatherName: 'Иванович',
            surname: 'Иванов',
            married: true
        },
    ]

    // Первый проход - поиск колонок
    const keys = []
    for (const child of persons) {
        for (const key in child) {
            if (!keys.includes(key)) {
                keys.push(key);
            }
        }
    }

    // Заголовок
    let str = `<table style="border-collapse: collapse; text-align: center;">`
    str += `<tr style="background-color: grey;">`
    for (let key of keys) {
        str += `<td style="border: 1px solid black; padding: 5px 10px">${key}</td>`
    }
    str += `</tr>`

    // Второй проход - отображение таблицы
    for (const child of persons) {
        str += `<tr>`
        for (const num of keys) {
            str += `<td style="border: 1px solid black; padding: 5px 10px">${(Object.keys(child)).includes(num) ? child[num] : ''}</td>`
        }
        str += `</tr>`
    }

    str += `</table>`
    document.write(str)
}

// Тестовые данные

{
    const persons = [
        {
            "Name": "chevrolet chevelle malibu",
            "Cylinders": 8,
            "Displacement": 307,
            "Horsepower": 130,
            "Weight_in_lbs": 3504,
            "Origin": "USA"
        },
        {
            "Name": "buick skylark 320",
            "Miles_per_Gallon": 15,
            "Cylinders": 8,
            "Displacement": 350,
            "Horsepower": 165,
            "Weight_in_lbs": 3693,
            "Acceleration": 11.5,
            "Year": "1970-01-01",
        },
        {
            "Miles_per_Gallon": 18,
            "Cylinders": 8,
            "Displacement": 318,
            "Horsepower": 150,
            "Weight_in_lbs": 3436,
            "Year": "1970-01-01",
            "Origin": "USA"
        },
        {
            "Name": "amc rebel sst",
            "Miles_per_Gallon": 16,
            "Cylinders": 8,
            "Displacement": 304,
            "Horsepower": 150,
            "Year": "1970-01-01",
            "Origin": "USA"
        },
    ]
    const keys = []
    for (const child of persons) {
        for (const key in child) {
            if (!keys.includes(key)) {
                keys.push(key);
            }
        }
    }

    let str = `<table style="border-collapse: collapse; text-align: center;">`
    str += `<tr style="background-color: grey;">`
    for (let key of keys) {
        str += `<td style="border: 1px solid black; padding: 5px 10px">${key}</td>`
    }
    str += `</tr>`

    for (const child of persons) {
        str += `<tr>`
        for (const num of keys) {
            str += `<td style="border: 1px solid black; padding: 5px 10px">${(Object.keys(child)).includes(num) ? child[num] : ''}</td>`
        }
        str += `</tr>`
    }

    str += `</table>`
    document.write(str)
}