OwOifier

index.html

<div id="eldritchhorror" contenteditable></div>
<button id="eldritchgod" onclick="owo()">OwOify</button>

owoifier.markdown

OwOifier

A Pen by Aresiel on CodePen.

License.

script.js

// Below is the UMD equivalent of
// const owoify = require("owoify-js").default
const owoify = window["owoify-js"].default;

let element = document.getElementById("eldritchhorror");
element.innerText = owoify(
  "Write something!",
  "uwu"
);

function owo() {
  document.getElementById("eldritchhorror").innerHTML = owoify(
    document.getElementById("eldritchhorror").innerText,
    "uwu"
  );
  if(document.getElementById("eldritchhorror").innerText == ""){
    document.getElementById("eldritchhorror").innerText = owoify("Write something!", "uwu")
  }
}

scripts

<script src="https://unpkg.com/[email protected]/dist/owoify-js.umd.production.min.js"></script>

style.css

#eldritchhorror {
  display: flex;
  height: calc(100vh - 6rem - 1px);
  width: 100vw;
  align-items: center;
  justify-content: center;
  font: 3rem black Verdana, Arial, sans-serif;
}

#eldritchgod {
  display: flex;
  height: 4rem;
  width: 100vw;
  align-items: center;
  justify-content: center;
  font: 3rem black Verdana, Arial, sans-serif;
}