Discord role divider generator

by Davri

HTML

<html>

  <body>
    <h1>Discord role divider generator</h1>
    <input id='inputbox' contenteditable='plaintext-only' placeholder='Role name'>
    <div id='button'>Generate</div>
    <div id='hidden'></div>
    <div id='tip'>PS: set the role color to #292B2F for better results</div>
  </body>

</html>

CSS

@font-face {
  font-family: 'Whitney';
  font-style: normal;
  font-weight: 500;
  src: local('Whitney'), url('https://fonts.cdnfonts.com/s/38487/whitneymedium.woff') format('woff');
}

body {
  font-family: 'Whitney', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  background-color: #18191C;
  color: white;
  text-align: center;
}

h1 {
  font-weight: 500;
}

input,
div#button {
  padding: 10px;
  margin: 1px;
  border-radius: 3px;
  font-size: 16px;
}

input {
  display: inline;
  width: 300px;
  font-family: inherit;
  color: inherit;
  background-color: #292B2F;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

div#button {
  display: inline-block;
  background-color: #3BA55D;
  cursor: pointer;
  user-select: none;
}

div#hidden {
  visibility: hidden;
  position: absolute;
  overflow: auto;
  font-size: 12px;
}

div#tip {
  position: fixed;
  bottom: 5px;
  right: 5px;
  color: #4A4D55;
}

JavaScript

var rolewidth = 200; // change this in case the role doesn't fit

var hiddendiv = document.getElementById('hidden');
var userinput = document.getElementById('inputbox');

var px0 = "\u200b" // zero width space
var px1 = "\u200a" // hair space
var px3 = "\u2005" // four-per-em space
var px6 = "\u2000" // en space

function converttospace(x) {
  return px6.repeat(Math.floor(x / 6)) + px3.repeat(Math.floor((x % 6) / 3)) + px1.repeat(Math.floor(x % 3));
}

button.onclick = function() {
  hiddendiv.innerText = userinput.value;
  var width = hiddendiv.clientWidth;
  if (width > rolewidth-12) {
    alert("The text is too long!")
  } else {
    var leftside = rolewidth / 2 - width / 2 - 8;
    var rightside = rolewidth / 2 - width / 2 + 6;
    prompt("Here's your text (Ctrl-A, Ctrl-C)", px0 + converttospace(leftside) + userinput.value + converttospace(rightside) + px1.repeat(Math.ceil(rightside % 1)) + px0)
  }
  hiddendiv.innerText = "";
}

// I have no idea what I'm doing, I have never used js before