function Form(el, data, okCallback, cancelCallback) {
  let formBody = document.createElement("div");
  let okButton = document.createElement("button");
  okButton.innerHTML = "OK";

  let cancelButton = document.createElement("button");
  cancelButton.innerHTML = "Cancel";

  for (var key in data) {
    var inputs = document.createElement("input");
    var p = document.createElement('p')
    p.innerText = key
    inputs.value = data[key];

    inputs.oninput = () => {
      // data = inputs.value
      console.log(inputs.value);
    };

    el.appendChild(p)
    el.appendChild(inputs);
  }

  if (typeof okCallback === "function") {
    formBody.appendChild(okButton);
    okButton.onclick = (e) => {
      console.log(this);
      this.okCallback(e);
    };
  }

  if (typeof cancelCallback === "function") {
    formBody.appendChild(cancelButton);
    cancelButton.onclick = cancelCallback;
  }

  el.appendChild(formBody);

  this.okCallback = okCallback;
  this.cancelCallback = cancelCallback;

  this.data = data;
  this.validators = {};
}

let form = new Form(
  formContainer,
  {
    name: "Anakin",
    surname: "Skywalker",
    married: true,
    birthday: new Date(new Date().getTime() - 86400000 * 30 * 365),
  },
  () => console.log("ok"),
  () => console.log("cancel")
);
form.okCallback = () => console.log("ok2");

form.validators.surname = (value, key, data, input) =>
  value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ")
    ? true
    : "Wrong name";
console.log(form);