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"]
                    }
                ]
            }
        ]
    }
}
{
    let form = {
        tagName  : 'form',
        children : form.children,
    }
} */


// 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)
        })
}
*/

// 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 => {
        //console.log(data);
        const rates = Object.keys(data.rates);
        const values = Object.values(data.rates);
        console.log(rates);
        console.log(values);

        document.write('<table border=1, cellpadding=0, cellspacing=0, width="100%">');
        for (let i = 0; i < values.length; i++) {
            document.write("<tr>" + values[i].toFixed(3) + "</tr>");

            for (let k = 0; k < values.length; k++) {
                document.write("<td>" + (values[i]/values[k]).toFixed(3) + "</td>");
            }
            document.write("</tr>");
        }
        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
    },
]

const joinObj = {
    ...persons[0],
    ...persons[1],
    ...persons[2]
}

{
    const keyS = Object.keys(joinObj);
    const lineArr = Object.values(joinObj);

    let   str = "<table width='80%' border='1' bgcolor='#add8e6'>"
    for (let name of keyS) {
        str +="<th>"+ name +"</th>";
    }
        for (let line of lineArr) {
            str += "<tr>"+ line +"</tr>";
        }
    str+= "</table>";
    document.write(str)
}