DmitriyPanasenko
/
homework


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
							//Literals
//Найдите несколько окружающих объектов реального мира и создайте соответственные объекты Javascript. Например:

{
    const phone = {
        brand: 'Xiaomi',
        model: 'mi11',
        year: '2021',
        memory: '256'
    }
}

//Literals expand
//Дайте возможность пользователю добавить любые два свойства в эти объекты с любыми значениями. Обеспечьте ввод названия ключа и значения через prompt прямо в литерале объекта {}

{
    const yourPhone = {
        [prompt('свойство 1')]: prompt('значение  свойства 1'),
        [prompt('свойство 2')]: prompt('значение  свойства 2'),
        [prompt('свойство 3')]: prompt('значение  свойства 3'),
    }
}

//Literals copy
//Пусть пользователь введет еще одно свойство в переменную. Вставьте в новый объект эту переменную. Скопируйте объект из предыдущего задания в новый объект.

{
    const yourPhone = {
        [prompt('свойство 1')]: prompt('значение  свойства 1'),
        [prompt('свойство 2')]: prompt('значение  свойства 2'),
    }


    const property = prompt()
    const objNew = {
    [property] : 25,
    ...yourPhone
    } 
}

//Html tree
/*
<body>
        <div>
            <span>Enter a data please:</span><br/>
            <input type='text' id='name'>
            <input type='text' id='surname'>
        </div>
        <div>
            <button id='ok'>OK</button>
            <button id='cancel'>Cancel</button>
        </div>
    </body>
*/
/*Сделайте декларативную JSON-структуру для тэгов выше, в которой:
каждый тэг будет объектом
имя тэга будет полем tagName
вложенные тэги будут в поле children
набор аттрибутов тэга будет в поле attrs.*/

{
    const body = {
        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( body.children[1].children[1].children ) ;

//Выведите значение атрибута id во втором input, используя . и [].

console.log( body.children[0].children[3].attrs.id ) ;

}

// Parent
// Добавьте каждому объекту тэга из предыдущего задания связь с родителем, используя свойство parent и присвоение

{
    const body = {
        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'
                    },
                ]
            }
        ]
    }

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

}

//Change OK
//Добавьте(или измените) любой введенный пользователем атрибут тэга <button id='ok'> из задания HTML Tree. Пользователь также вводит значение этого атрибута.

{
    const body = {
        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'
                    },
                ]
            }
        ]
    }

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

    const buttonIdOk = prompt("введите атрибут <button id='ok'> кторый хотите добавить или изменить");
    const buttonIdOkValue = prompt("введите значение атрибута " + buttonIdOk);
    body.children[1].children[0].attrs[buttonIdOk] = buttonIdOkValue
    

//Destructure
//Используя деструктуризацию структуры из задания HTML Tree, Выведите значения текста в тэге span, Выведите значения текста во второй кнопке и Выведите значение атрибута id во втором input.


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

}

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

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

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

{
    let arr = [1, "abc"]
    const [number, [s1, s2, s3]] = arr
}

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

    let {children:[{name: name1},{name: name2}]} = obj
}

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

{
    let arr = [1,2,3,4, 5,6,7,10];
    let {1 : a,
         2 : b,
         length : length} = arr;
}

/*Copy delete
Сделайте копию одного из объектов из задания Literals без ключа, который введет пользователь.*/

{
    const phone = {
        brand: 'Xiaomi',
        model: 'mi11',
        year: '2021',
        memory: '256'
    }

    const newObj = {...phone}
}

/*Currency real rate
Ниже приведен код, который скачивает актуальную информацию о курсах валют. Скопируйте ссылку из него вставьте в браузер интереса ради. Реализуйте калькулятор обмена валют следующим образом:
Пользователь вводит исходную валюту
Пользователь вводит валюту, в которую происходит конвертация
Пользователь вводит сумму в исходной валюте
Пользовател видит результат конвертации*/
{
    let currencyStart = prompt('Пользователь вводит исходную валюту').toUpperCase();
        let currencyFinish = prompt('Пользователь вводит валюту, в которую происходит конвертация').toUpperCase();
        let summStart = +prompt('Пользователь вводит сумму в исходной валюте');
        let rateStart
        let rateFinish

fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
            .then(data => {
                    //эта функция запускается когда данные скачиваются.
                    //остальной код работает РАНЬШЕ.
                    //только ТУТ есть переменная data со скачанными данными
                    console.log(data) //изучите структуру, получаемую с сервера в консоли
                    rateStart = data.rates[currencyStart];
                    console.log('rateStart' + rateStart);
                    rateFinish = data.rates[currencyFinish];
                    console.log('rateFinish' + rateFinish);
                    summStart / rateStart * rateFinish ? alert(summStart / rateStart * rateFinish) : alert('вы ввели какую -то дичь!')
                })
}
/*Учтите, что пользователь может ввести какую-то дичь или название валют в неверном регистре*/

//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 select = '<select>'
        for (let currency in data.rates){
            select += '<option>' + currency + '</option>'
        }
        select += '</select>'
        document.write(select)
       })

}

/*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 currencyStart in data.rates){
            table += '<tr><td>' + currencyStart + '</td>';

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

/*Form
Напишите код, который их любого объекта создает форму HTML. Например для такого объекта:
const car = {
      "Name":"chevrolet chevelle malibu",
      "Cylinders":8,
      "Displacement":307,
      "Horsepower":130,
      "Weight_in_lbs":3504,
      "Origin":"USA",
      "in_production": false
}
На экране должна появиться форма из 7 строк, с названиями полей, взятыми из ключей и полями ввода соответствующих типов. Значениями полей ввода должны быть значения из объекта.
<form>
    <label>Name: <input type="text" value="chevrolet chevelle malibu"/></label>
    <label>Cylinders: <input type="number" value="8"/></label>
    <label>Displacement: <input type="number" value="307"/></label>
    <label>Horsepower: <input type="number" value="130"/></label>
    <label>Weight_in_lbs: <input type="number" value="3504"/></label>
    <label>Origin: <input type="text" value="USA"/></label>
    <label>in_production: <input type="checkbox" /></label>
</form>
Для создания правильного типа тэга input используйте оператор typeof Javascript:
console.log(typeof 5)//number
console.log(typeof "5") //string
console.log(typeof (5 > 2)) //boolean

Соответствие типов
JS        HTML
number  number
string  text
boolean checkbox*/

{
    const car = {
        "Name":"chevrolet chevelle malibu",
        "Cylinders":8,
        "Displacement":307,
        "Horsepower":130,
        "Weight_in_lbs":3504,
        "Origin":"USA",
        "in_production": false
  }

    let form = '<form>'

    for (let label in car){
        form += '<label>' + label +':';
        let type = typeof car[label];
        let typeHtml
        if (type === "number") typeHtml = "number";
        if (type === "string") typeHtml = "text";
        if (type === "boolean") typeHtml = "checkbox";

        form += `<input type="${typeHtml}" value="${car[label]}"/>`
        
        form += '</label>';
    }
    document.write(form)
}

//Table
/*
Даден любой массив с объектами

const persons = [
        {
            name: 'Мария',
            fatherName: 'Ивановна',
            surname: 'Иванова',
            sex: 'female'
        },
        {
            name: 'Николай',
            fatherName: 'Иванович',
            surname: 'Иванов',
            age: 15
        },
        {
            name: 'Петр',
            fatherName: 'Иванович',
            surname: 'Иванов',
            married: true
        },
]

Сформировать таблицу (используя накопление тэгов HTML в строке):

name     fatherName      surname     sex     age     married
Мария    Ивановна       Иванова     female
Николай  Иванович       Иванов               15
Петр     Иванович       Иванов                          true

Алгоритм решения
Перед непосредственно формированием строк таблицы надо знать все колонки. Для этого нужно предварительно перебрать все объекты и извлечь из них все ключи, что бы сформировать общее множество ключей.
Первый проход - поиск колонок
Перебираем массив объектов, перебираем ключи каждого объекта и добавляем в массив колонок, если этого ключа еще там нет. Для примера выше массив получится в шесть элементов. На этом этапе строку HTML создавать еще рано.
Заголовок
Начинаем создание таблицы. Используя массив колонок формируем одну строку таблицы с заголовками
Второй проход - отображение таблицы
Перебираем массив объектов, перебираем массив колонок для каждого объекта, и используем название колонки как ключ*/

{
    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)
}