// destruct array

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

// -------------РЕШЕНИЕ-------------
const task16block = document.createElement('div');
task16block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task16title = document.createElement('h2');
task16title.innerText = 'Task-16 Destruct array';
const destructArrayBtn = document.createElement('button');
destructArrayBtn.innerText = 'Destruct array';
destructArrayBtn.style = 'margin-bottom:16px';
root.appendChild(task16block); 
task16block.appendChild(task16title); 
task16block.appendChild(destructArrayBtn); 
destructArrayBtn.onclick = () => {
    let arr = [1, 2, 3, 4, 5, "a", "b", "c"];
    let [even1, even2, odd1, odd2, odd3, ...rest] = [...arr.filter(elem => !(elem % 2)&&!(isNaN(elem))), ...arr.filter(elem => elem % 2), arr.filter(elem=>isNaN(elem))];
    console.log([even1, even2, odd1, odd2, odd3, ...rest]);
  
    const task16even1 = document.createElement('p');
    const task16even2 = document.createElement('p');
    const task16odd1 = document.createElement('p');
    const task16odd2 = document.createElement('p');
      const task16odd3 = document.createElement('p');
    const task16letters = document.createElement('p');

    task16even1.innerText = `even1=${even1}`;
    task16even2.innerText = `even2=${even2}`;
    task16odd1.innerText = `odd1=${odd1}`;
    task16odd2.innerText = `odd2=${odd2}`;
    task16odd3.innerText = `odd3=${odd3}`;
    task16letters.innerText = `letters=[${[...rest]}]`;
    task16block.appendChild(task16even1);
     task16block.appendChild(task16even2);
    task16block.appendChild(task16odd1);
    task16block.appendChild(task16odd2);
      task16block.appendChild(task16odd3);
    task16block.appendChild( task16letters);
   }

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

// -------------РЕШЕНИЕ-------------
const task17block = document.createElement('div');
task17block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task17title = document.createElement('h2');
task17title.innerText = 'Task-17 Destruct string';
const destructStringBtn = document.createElement('button');
destructStringBtn.innerText = 'Destruct string';
destructStringBtn.style = 'margin-bottom:16px';
root.appendChild(task17block); 
task17block.appendChild(task17title); 
task17block.appendChild(destructStringBtn); 
destructStringBtn.onclick = () => {
    let arr = [1, "abc"]
    let [number, [s1, s2, s3]] = [...arr.filter(elem => !isNaN(elem)), ...arr.filter(elem => isNaN(elem))];
    console.log([number, [s1, s2, s3]]);
        
    const task17number = document.createElement('p');
    const task17s1 = document.createElement('p');
    const task17s2 = document.createElement('p');
    const task17s3 = document.createElement('p');
    task17number.innerText = `number=${number}`;
    task17s1.innerText = `s1=${s1}`;
    task17s2.innerText = `s2=${s2}`;
      task17s3.innerText = `s3=${s3}`;
    task17block.appendChild(task17number);
    task17block.appendChild(task17s1); 
    task17block.appendChild(task17s2); 
    task17block.appendChild( task17s3); 
    }

// -------------УСЛОВИЕ-------------
// destruct 2
// let obj = {name: 'Ivan',
//            surname: 'Petrov',
//            children: [{name: 'Maria'}, {name: 'Nikolay'}]}
// извлеките используя деструктуризацию имена детей в переменные name1 и name2

// -------------РЕШЕНИЕ-------------
const task18block = document.createElement('div');
task18block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task18title = document.createElement('h2');
task18title.innerText = 'Task-18 Destruct 2';
const outputChildrenBtn = document.createElement('button');
outputChildrenBtn.innerText = 'Output children names';
outputChildrenBtn.style = 'margin-bottom:16px';
root.appendChild(task18block); 
task18block.appendChild(task18title); 
task18block.appendChild(outputChildrenBtn); 
outputChildrenBtn.onclick = () => {
    let obj = {
        name: 'Ivan',
        surname: 'Petrov',
        children: [{ name: 'Maria' }, { name: 'Nikolay' }]
    }
    let [{ name: name1 }, {name:name2 }] = [...[...obj.children]];
    console.log(`name1:${name1}`)
    console.log(`name2:${name2}`)
    const task18childrenName1 = document.createElement('p');
    const task18childrenName2 = document.createElement('p');
    task18childrenName1.innerText = `name1:${name1}`;
      task18childrenName2.innerText = `name2:${name2}`;
    task18block.appendChild(task18childrenName1); 
      task18block.appendChild(task18childrenName2); 
    }

// -------------УСЛОВИЕ-------------
// destruct 3
// let arr = [1,2,3,4, 5,6,7,10]
// извлеките используя деструктуризацию объектов два первых элемента и длину массива в переменные a, b и length

// -------------РЕШЕНИЕ-------------

const task19block = document.createElement('div');
task19block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task19title = document.createElement('h2');
task19title.innerText = 'Task-19 Destruct 3';
const output2elemsAndLengthBtn = document.createElement('button');
output2elemsAndLengthBtn.innerText = 'Output element1, element2 & array.length';
output2elemsAndLengthBtn.style = 'margin-bottom:16px';
root.appendChild(task19block); 
task19block.appendChild(task19title); 
task19block.appendChild(output2elemsAndLengthBtn); 
output2elemsAndLengthBtn.onclick = () => {
    let arr = [1, 2, 3, 4, 5, 6, 7, 10];
    let [[a, b], length] = [[...arr, ...arr], arr.length];
     
    console.log(`a:${a}`)
    console.log(`b:${b}`)
    console.log(`length:${length}`)

    
    const task19a = document.createElement('p');
    const task19b = document.createElement('p');
       const task19length = document.createElement('p');
    task19a.innerText = `a=${a}`;
    task19b.innerText = `b=${b}`;
      task19length.innerText = `length=${length}`;
    task19block.appendChild(task19a); 
    task19block.appendChild(task19b); 
     task19block.appendChild(task19length); 
    }