<div id="root"></div>

"use strict";

function render(reactElement, containerDOMElement) {
  const { type, props, children } = reactElement;
  // 1. create the element from reactElement.type
  const element = document.createElement(type);

  // 2. for each reactElement.prop:
  for (let prop in props) {
    //   a. create an attribute from the key
    //   b. the value of that attribute should be the
    //      value of the prop
    element.setAttribute(prop, props[prop]);
  }
  // 3. the element's innerText should be the value of
  //    reactElement.children
  element.innerText = children;

  // 4. append the element to containerDomElement
  containerDOMElement.appendChild(element);
}

const reactElement = {
  type: "a",
  props: {
    href: "https://joeyreyes.dev",
    id: "howdy",
  },
  children: "Read More on joeyreyes.dev",
};

const containerDOMElement = document.querySelector("#root");

render(reactElement, containerDOMElement);