Js.Homework/hw-6/main.js

//Literals
/*
{
const i = {
    name: "Bohdan",
    surname: "Baberya",
    age: 21,

}
console.log(i.name, i.age)
alert(i.name + " " + i.age)
}


//Literals expand
{
    const i = {
        name: "Bohdan",
        surname: "Baberya",
        age: 21,
    }
        i[prompt("write key")] = prompt('')
        i[prompt("write key")] = prompt('')
    console.log(i)
}

//Literals copy
{
    const i = {
        name: "Bohdan",
        surname: "Baberya",
        age: 21,
    }
        i[prompt("write key")] = prompt('')
        i[prompt("write key")] = prompt('')

    const iCopy = i
    iCopy[prompt()] = prompt()
    console.log(i)
}

//Html tree


{
    var 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[0].children[0].children)
    console.log(body.children[0].children[3].attrs.id)
}


//Parent
{
    var body = {
        tagName: "body",
        children: [ 
            {
            tagName: "div",
            parent: body,
            children: [
                {
                    tagName: 'span',
                    parent: ['body.children[0]'],
                    children: ["Enter a data please:"],
                },
                {
                    tagName: 'br',
                    parent: ['body.children[0]'],
                },
                {
                    tagName: 'input',
                    parent: ['body.children[0]'],
                    attrs: 
                        {
                            type: 'text',
                            id: 'name',
                        }
                    
                },
                {
                    tagName: 'input',
                    parent: ['body.children[0]'],
                    attrs: 
                        {
                            type: 'text',
                            id: 'surname',
                        }
                    
                }
            ]
            },
            {
                tagName: "div",
                parent: body,
                children: [
                    {
                        tagName: 'button',
                        parent: ['body.children[1]'],
                        attrs: 
                            {
                                id: 'ok',
                            },
                        children: ['OK'],
                    },
                    {
                        tagName: 'button',
                        parent: ['body.children[1]'],
                        attrs: 
                            {
                                id: 'cancel',
                            },
                        children: ['Cancel'],
                    },
                    
                ]
            }
        ]
    }
   // console.log(body.children[0].children[0].children)
   //console.log(body.children[0].children[3].attrs.id)
    
    console.log(body.children[1].children[1])
}


//destruct array
{
let arr = [1,2,3,4,5, "a", "b", "c"]
const [odd1, even1, odd2, even2, odd3, ...someLetters] = arr
console.log(odd1)
console.log(someLetters)
}


//destruct string
{
let arr = [1, "abc"]
const [number, [s1, s2, s3]] = arr
console.log(s2)
}


//destruct 2
{
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
let arr = [1,2,3,4, 5,6,7,10]
const [a,b, ...{length: length}] = arr
console.log(a, length)


//Change OK

{
    var 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[0].children[0].children)
    //console.log(body.children[0].children[3].attrs.id)
    body.children[1].children[0].attrs[prompt()] = prompt()  
    console.log(body)
}


//Destructure
{
    var 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[0].children[0].children[0])
    //console.log(body.children[1].children[1].children[0])
    //console.log(body.children[0].children[3].attrs.id)

                        /* OR */

  /*  const {children: [{children: [{children},{},{},{attrs: {id}}]},{children: [{}, {children: [button]}]}]} = body                    
 

    console.log(children,id,button)
    alert(children + " " + id + " " + button)
}


//Copy delete
{ 
    const i = {
        name: "Bohdan",
        surname: "Baberya",
        age: 21,
    }
    const {[prompt("Write key for delete:  ")]:del, ...other} = i
    console.log(other)
}



//Currency real rate
{
let firstValue = prompt("write your value").toUpperCase()
let secondValue = prompt("write your second value").toUpperCase()
let amount = +prompt("Your amount value") 
fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
.then(data => { 
        let result, rate
        rate = data.rates[secondValue]
        result =amount * rate

       console.log(data)
       console.log(result)
       alert(result) 
   }) 
} 


// Currency drop down
{ 
    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => {           
           console.log(data)
           const allRates = Object.keys(data.rates)
           console.log(allRates)
           
           let str = "<select>"
           for(let all of  allRates){
            str +=  `"<option>" ${all} "</option>"`
           }
           str += "</select>"
           
           document.write(str) 
       }) 
} 


//Currency table
{
    fetch('https://open.er-api.com/v6/latest/USD').then(res => res.json())
    .then(data => { 
        const key = 0
        const value = 1
        const arr = Object.entries( data.rates )
        
            let str = "<table border=1px>"
            str += "<tr>" + "<td>" + "</td>"
            for (let i = 0; i<arr.length; i++){
                str +=  `<td>  ${arr[i][key]}  </td>`
            }
            str += "</tr>"
               
            for (let i = 0; i<arr.length; i++){
                str +=  `<tr><td>  ${arr[i][key]} </td>`
                rate1 = arr[i][value]

                for(let j=0; j<arr.length; j++){
                    rate2 = arr[j][value]
                    crossRate = rate2 / rate1
                    str += `<td> ${crossRate.toFixed(2)} </td>` 
                }
            }
            str += "</tr>"

            str += "</table>"
            
          
           console.log(data)
           document.write(str)
       }) 
 } 

*/

// Form
{
    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 ( const [key,value] of Object.entries(car)){
        if (typeof(value) === "string"){
            str +=  `<label>${key}: <input type="text" value="${value}" /> </label> `
        }
        if(typeof(value) === "number"){
            str += `<label>${key}: <input type="number" value="${value}" /> </label> `
        }
        if(typeof(value) === "boolean"){
            str += `<label>${key}: <input type="checkbox" value="${value}" /> </label> `
        }

       
    }
    str += "</form>"
    document.write(str)  
    console.log(str)
}


/*
//Table
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"
    },
 ] 

 
let i = 0
let arrKeys = []
    for (let key of persons){
        arrKeys += Object.keys(persons[i]) + ","

        i++
    }
arrKeys = arrKeys.split(",").slice(0,-1)
    const arrFilter = (x) => {
        return  x.filter((el1,el2) => x.indexOf(el1) === el2 ) 
}
arrKeys = arrFilter(arrKeys)

let arrValue =[]
    for (let arrVal of persons){
        arrValue.push(arrKeys.map(y=>arrVal[y] === undefined? arrVal[y]="-" : arrVal[y]))
    }
arrValue.unshift(arrKeys)

let str = `<table border="1">`
    for( let firstString of arrValue){
        str += `<tr>`
        for(let otherString of firstString){
            str += `<td>${otherString}</td>`
        }
        str += " </tr>"
    }
    str += "</table>"

document.write(str)



*/