text: const Keyboard = {
    elements: {
      main: null,
      keysContainer: null,
      keys: []
    },
  
    eventHandlers: {
      oninput: null,
      ondone: null
    },
  
    properties: {
      value: "",
      capslock: false,
    },
  
    init() {
        this.elements.main = document.createElement("div");
        this.elements.keysContainer = document.createElement("div");
  
        this.elements.main.classList.add("keyboard");
        this.elements.keysContainer.classList.add("keyboard__keys");
        this.elements.keysContainer.appendChild(this._createKeys());
  
        this.elements.keys = this.elements.keysContainer.querySelectorAll(".keyboard__key");
  
        this.elements.main.appendChild(this.elements.keysContainer);
        document.body.appendChild(this.elements.main);
  
        document.querySelectorAll(".use-keyboard-input").forEach(element => {
          element.addEventListener("focus", () => {
            this.open(element.value, currentValue => {
              element.value = currentValue;
            })
          });
        });
  
  
    },
  
    _createKeys(){
      const fragment = document.createDocumentFragment();
      const keyLayout = [
                "q", "w", "e", "r", "t", "z", "u", "i", "o", "p", "ü", "backspace",
                "a", "s", "d", "f", "g", "h", "j", "k", "l", "ö", "ä",
                "caps", "y", "x", "c", "v", "b", "n", "m", "done",
                "space"
            ];
  
            const createIconHTML = (icon_name) => {
              return `<i class="material-icons">${icon_name}</i>`;
            };
  
            keyLayout.forEach(key => {
              const keyElement = document.createElement("button");
              const insertLineBreak = ["backspace", "ä", "done"].indexOf(key) !== -1;
  
              keyElement.setAttribute("type", "button");
              keyElement.classList.add("keyboard__key");
  
              switch(key) {
                case "backspace":
                  keyElement.classList.add("keyboard__key--wide");
                  keyElement.innerHTML = createIconHTML("backspace");
  
                  keyElement.addEventListener("click", () => {
                    this.properties.value = this.properties.value.substring(0, this.properties.value.length - 1);
                    this._triggerEvent("oninput");
                  });
                  break;
  
                case "caps":
                  keyElement.classList.add("keyboard__key--wide", "keyboard__key--activatable");
                  keyElement.innerHTML = createIconHTML("keyboard_capslock");
  
                  keyElement.addEventListener("click", () => {
                    this.toggleCapsLock();
                    keyElement.classList.toggle("keyboard__key--active", this.properties.capsLock);
                  });
                  break;
  
                case "enter":
                  keyElement.classList.add("keyboard__key--wide");
                  keyElement.innerHTML = createIconHTML("keyboard_return");
  
                  keyElement.addEventListener("click", () => {
                    this.properties.value += "\n";
                    this._triggerEvent("oninput");
                  });
                  break;
  
                case "space":
                  keyElement.classList.add("keyboard__key--extrawide");
                  keyElement.innerHTML = createIconHTML("space_bar");
  
                  keyElement.addEventListener("click", () => {
                    this.properties.value += " ";
                    this._triggerEvent("oninput");
                  });
                  break;
  
                case "done":
                  keyElement.classList.add("keyboard__key--wide", "keyboard__key--dark");
                  keyElement.innerHTML = createIconHTML("print");
  
                  keyElement.addEventListener("click", () => {
                    this.close();
                    this._triggerEvent("onclose");
                  });
                  break;
  
                default:
                  keyElement.textContent = key.toLowerCase();
  
                  keyElement.addEventListener("click", () => {
                    this.properties.value += this.properties.capsLock ? key.toUpperCase() : key.toLowerCase();
                    this._triggerEvent("oninput");
                  });
                  break;
                }
  
                fragment.appendChild(keyElement);
  
                if (insertLineBreak) {
                  fragment.appendChild(document.createElement("br"));
                }
            });
            return fragment;
    },
  
    _triggerEvent(handlerName) {
      if (typeof this.eventHandlers[handlerName] == "function") {
        this.eventHandlers[handlerName](this.properties.value);
      }
    },
  
    toggleCapsLock(){
      this.properties.capsLock = !this.properties.capsLock;
  
      for (const key of this.elements.keys) {
        if (key.childElementCount === 0) {
          key.textContent = this.properties.capsLock ? key.textContent.toUpperCase() : key.textContent.toLowerCase();
        }
      }
  
    },
  
    open(initialValue, oninput, onclose) {
      this.properties.value = initialValue || "";
      this.eventHandlers.oninput = oninput;
      this.eventHandlers.onclose = onclose;
      this.elements.main.classList.remove("keyboard--hidden");
    },
  
    close() {
      this.properties.value = "";
      this.eventHandlers.oninput = oninput;
      this.eventHandlers.onclose = onclose;
      document.querySelectorAll(".use-keyboard-input").forEach(element => {
        element.value = "";
      });
    }
  };
  
  window.addEventListener("DOMContentLoaded", function() {
    Keyboard.init();
  });
  