'blue belt' task remade to function recursively

hw5/script.js

@@ -119,56 +119,104 @@ document.write(htmlOptional)
 class Markup {
     constructor(tagName, [...nestedTags]=[], {...attrs}={}, text='') {
         this.tagName = tagName,
-        this.nestedTags = nestedTags
         this.attrs = attrs
         this.text = text
+        this.nestedTags = nestedTags
     }
 }
 
-
-let md3 = new Markup('table', [new Markup('tr', [new Markup('td', undefined, undefined, 'some text'),new Markup('td', undefined, undefined, 'some text2')])],{border: 1})
-console.dir(md3)
-
-let HTMLstr = `<h2>Blue belt</h2><${md3.tagName}`
-if(md3.attrs.length !== 0) {
-    for(let i in md3.attrs) {
-        HTMLstr += ` ${i}="${md3.attrs[i]}" `
-    }
-}
-HTMLstr += '>'
-//nested
-for(let i = 0; i < md3.nestedTags.length; i++) {
-    //open
-    HTMLstr += `<${md3.nestedTags[i].tagName}`
-    //attrs
-    if(md3.nestedTags[i].attrs.length !== 0) {
-        for(let attr in md3.nestedTags[i].attrs) {
-            HTMLstr += ` ${attr}="${md3.nestedTags[i].attrs[attr]}" `
-        }
-    }
-    HTMLstr += '>'
-    //nested
-    for(let nested = 0; nested < md3.nestedTags[i].nestedTags.length; nested++) {
-        HTMLstr += `<${md3.nestedTags[i].nestedTags[nested].tagName}`
-        //attrs
-        if(md3.nestedTags[i].nestedTags[nested].attrs.length !== 0) {
-            for(let attr in md3.nestedTags[i].nestedTags[nested].attrs) {
-                HTMLstr += ` ${attr}="${md3.nestedTags[i].nestedTags[nested].attrs[attr]}" `
+let md3 = new Markup(
+                'table', 
+                [
+                    new Markup(
+                        'tr', 
+                        [
+                            new Markup(
+                                'td', 
+                                undefined, 
+                                {disabled:true}, 
+                                'some text'
+                            ),
+                            new Markup(
+                                'td', 
+                                undefined, 
+                                undefined, 
+                                'some text2'
+                            )
+                        ]
+                    ),
+                    new Markup(
+                        'tr', 
+                        [
+                            new Markup(
+                                'td', 
+                                [ 
+                                    new Markup(
+                                        'div', 
+                                        [
+                                            new Markup(
+                                                'p', 
+                                                undefined, 
+                                                {disabled:true}, 
+                                                'some textp'
+                                            ),
+                                            new Markup(
+                                                'p', 
+                                                undefined, 
+                                                {style:'font-weight:800;color:red'}, 
+                                                'some textp'
+                                            )
+                                        ]
+                                    )
+                                ],
+                                {style:'background-color:purple;color:white;'},
+                                'some text div'
+                            ),
+                            new Markup(
+                                'td', 
+                                undefined, 
+                                {class:'someclass'}, 
+                                'some text4'
+                            )
+                        ]
+                    )
+                ],
+                {border: 1, style:"color:'red';"}
+            )
+
+function stringifyMdObject(Md_obj) {
+    let str = ''
+    for(let key in Md_obj) {
+        if(key === 'tagName') {
+            str += `<${Md_obj[key]}`
+            if(Md_obj.attrs.length !== 0) {
+                continue;
+            } else {
+                str += `>`
             }
         }
-        HTMLstr += '>'
 
-        HTMLstr += `${md3.nestedTags[i].nestedTags[nested].text}`
+        if(key === 'nestedTags') {
+            for(let i = 0; i < Md_obj[key].length; i++) {
+                str += stringifyMdObject(Md_obj[key][i])
+            }            
+        }
 
-        HTMLstr += `</${md3.nestedTags[i].nestedTags[nested].tagName}>`
+        if(key === 'attrs' && Md_obj[key].length !== 0) {
+            for(let i in Md_obj.attrs) {
+                str += ` ${i}="${Md_obj.attrs[i]}"`
+            }
+            str += `>`
+        }
     }
-    //close
-    HTMLstr += `</${md3.nestedTags[i].tagName}>`
+    str += `${Md_obj.text}`
+    str += `</${Md_obj.tagName}>`
+
+    return str
 }
 
-HTMLstr += `</${md3.tagName}>`
-console.log('html str:',HTMLstr)
-document.write(HTMLstr)
+document.write(stringifyMdObject(new Markup('h2',[new Markup('span',undefined,{style:'color:blue;'},'Blue ')],undefined,'belt')))
+document.write(stringifyMdObject(md3))
 
 //destruct array
 let arr = [1,2,3,4,5, "a", "b", "c"]