homework/hw-js-05-objects-in-json/js/task-02.js

// Задание на синий пояс.

// -------------УСЛОВИЕ-------------
// Сделать HTML-конструктор из деревянной структуры, которая была на прошлом занятии:
// var someTree = {
//     tagName: "table", //html tag
//     subTags: [ //вложенные тэги
//         {
//                     tagName: "tr",
//                     subTags: [
//                         {
//                             tagName: "td",
//                             text: "some text",
//                         },
//                         {
//                             tagName: "td",
//                             text: "some text 2",
//                         }
//                     ]
//         }
//     ],
//     attrs:
//     {
//         border: 1,
//     },
// }

// Для начала сделайте конструктор для верхнего уровня (в примере - table). Потом с помощью копипасты сделайте то же самое 
// с вложенным уровнем nestedTags(tr).Аналогично для уровня td.
// Конструктор должен поддерживать вложенность до 3его уровня (как в примере). 
// В результате работы конструктора из примера выше должен получиться следующий HTML(в строке str):
// <table border=1>
//     <tr>
//         <td>some text</td>
//         <td>some text 2</td>
//     </tr>
// </table>
// Переносы строк и отступы в результате не принципиальны, главное - структура HTML Проверьте ваш код на других структурах.

// -------------РЕШЕНИЕ-------------
const task15block = document.createElement('div');
task15block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task15title = document.createElement('h2');
task15title.innerText = 'Task-15 Задание на синий пояс: HTML-конструктор';
const task15comment = document.createElement('p');
task15comment.innerText = 'Реализовано построение HTML-дерева любой глубины вложенности';
const makeTableBtn = document.createElement('button');
makeTableBtn.innerText = 'Make HTML-table';
makeTableBtn.style = 'margin-bottom:15px';
const makeFormBtn = document.createElement('button');
makeFormBtn.innerText = 'Make HTML-form';
makeFormBtn.style = 'margin-bottom:15px; margin-left:15px';
root.appendChild(task15block); 
task15block.appendChild(task15title); 
task15block.appendChild(task15comment); 
task15block.appendChild(makeTableBtn); 
task15block.appendChild(makeFormBtn); 
//Функция построения HTML-строки из объекта данных
let str = '';
function elementParse(inputData) {
    
     const objData=JSON.parse(JSON.stringify(inputData));
    let strFin = '';
  
     for (let key in objData) { 
         
                if (key === 'tagName') {
                    str += '<' + objData[key]+'>' ;
                    strFin = '</' + objData[key] + '>';
                                   }
                if (key === 'attrs') {
                    str = str.slice(0, -1);
                    for (let attrKey in objData[key]) { str += ` ${attrKey}="${objData[key][attrKey]}"`; }
                    str += '>';
                }
                    if (key === 'text') {
                    str += objData[key] ;                                  
                }
                     
        if (key === 'subTags') {
                let subElements = [...objData[key]];
            for (let subData of subElements) {
                             elementParse(subData);
          
            }
         }
     };

    str += strFin; 
      }

makeTableBtn.onclick = () => { 
    str = '';
    var table = {
    tagName: 'table',
    attrs: {
        border: "1",
    },
    subTags: [
        {
            tagName: 'tr',
            subTags: [
                {
                    tagName: "td",
                    text: "1x1",
                },
                {
                    tagName: "td",
                    text: "1x2",
                },
            ]
        },
        {
            tagName: 'tr',
            subTags: [
                {
                    tagName: "td",
                    text: "2x1",
                },
                {
                    tagName: "td",
                    text: "2x2",
                },
            ]
        }
    ]
    }
  
    elementParse(table); 
    console.log(`HTML:${str}`);  
    const task15HTML = document.createElement('div');
    task15HTML.innerHTML = str;
    task15block.appendChild(task15HTML);
}
makeFormBtn.onclick = () => { 
    str = '';
    const body = {
    tagName: "body",
    subTags: [
        {
            tagName: "div",
            subTags:
                [
                    {
                        tagName: "span",
                        text: "Enter a data please:"
                    },
                    {
                        tagName: "br"
                    },
                    {
                        tagName: "input",
                        attrs: {
                            type: "text",
                            id: "name"
                        }
                    },
                      {
                        tagName: "input",
                        attrs: {
                            type: "text",
                            id: "surname"
                                }
                       }
                   ]
        },
        {
            tagName: "div",
            subTags:
                [
                    {
                        tagName: "button",
                        attrs: {
                            id: "ok"
                        },
                        text: "OK"
                    },
                    {
                        tagName: "button",
                        attrs: {
                            id: "cancel"
                        },
                        text: "Cancel"
                    }
                ]
        }
    ]
    }

    elementParse(body); 
    console.log(`HTML:${str}`);  
    const task15HTML = document.createElement('div');
    task15HTML.innerHTML = str;
    task15block.appendChild(task15HTML);
}