JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<div id='root'>

</div>

JavaScript

const getTag = (type) => {
  const el = document.createElement(type);
  return el;
}
class Element {
  constructor({type, props, children, key}) {
    this.type = type;
    this.props = props;
    this.children = children;
    this.key = key;
    this.text = "";

    return this.content();
  }

  content() {
    const tag = getTag(this.type ?? 'div');
    
    if(this.props) {
      Object.keys(this.props).forEach((prop) => {
        if (prop === 'children') {
          const children = this.props[prop];
          if (typeof children === 'object') {
            const child = new Element(children);
            tag.appendChild(child);
          } else {
            const textChild = new Element({text: children, type: 'div'});
            textChild.innerHTML = this.text;
            tag.appendChild(child);
          }
        } else {
          tag[prop] = this.props[prop];
        }
      })
    }
    console.log('tag: ', tag.innerHTML);
    
    return tag;
  }

  
}
function renderToDOM(virtualNode, domNode) {
  // write your solution below
  const html = new Element(virtualNode);
    //console.log(html);
  domNode.append(html);
}

const virtualNode = {
  type: "div",
  props: {
    class: "heading-container",
    children: {
      0: "This is",
      1: {
        type: "h1",
        props: {
          key: "10",
          id: "heading",
          children: "devtools.tech",
        },
      },
      2: {
        type: "h2",
        props: {
          id: "heading",
          children: "is Awesome!!",
        },
      },
      3: {
        type: "input",
        props: {
          type: "text",
          value: "Devtools Tech",
        },
      },
      4: {
        type: "button",
        props: {
          children: "Click",
        },
      },
      5: 0,
      6: {
        props: {
          children: {
            0: {
              type: "div",
              props: {
                children: "React",
              },
            },
            1: {
        ...