<h1>HTML实体符转换器</h1>
<div class="wrapper">
  <div id="calculator">
    <div class="control">
      <label for="decimal">数值（十进制）：</label>
      <input type="text" name="decimal" id="decimal" />
    </div>

    <div class="control">
      <label for="octal">CSS值（十六进制）：</label>
      <input type="text" name="octal" id="octal" disabled="disabled" />
    </div>

    <div class="control">
      <label for="octal2">JS值（十六进制）：</label>
      <input type="text" name="octal2" id="octal2" disabled="disabled" />
    </div>

    <div class="action">
      <button>转换</button>
    </div>
  </div>
  <p>👈或👉</p>
  <div id="converter">
    <div class="control">
      <label for="reverse">将字符粘贴到输入框：</label>
      <input type="text" id="reverse" size="2" maxlength="1" />
    </div>
    <div class="action">
      <button>转换</button>
    </div>
  </div>
</div>

<div class="link">
  <a href="https://css-tricks.com/snippets/html/glyphs/" target="_blank">Glyphs</a>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 130%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.wrapper {
  width: 100vw;
  padding: 4vh;
  margin-top: 3vh;
  display: flex;
  justify-content: center;
}

p {
  margin: 0 6vh;
  display: inline-flex;
  justity-content: center;
  align-items: center;
}

.control {
  margin-bottom: 2vh;
}

label {
  display: block;
  margin-bottom: 1vh;
  font-size: 1.4rem;
  color: #FF9800;
}


input {
  appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  font-size: 18px;
  color: white;
  transition-duration: 0.25s;
  font-weight: 300;
}

input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

input:focus {
  background-color: white;
  color: #444;
}

button {
  appearance: none;
  outline: 0;
  background-color: #2196F3;
  border: 0;
  padding: 10px 15px;
  color: #fff;
  border-radius: 3px;
  width: 250px;
  cursor: pointer;
  font-size: 18px;
  transition-duration: 0.25s;
}

button:hover {
  background-color: #1e84d4;
}

.link a {
  color: #fff;
  font-size: 12px;
}

var conversions = {
  calc: document.getElementById("calculator"),
  inputs: document.getElementsByTagName("input"),
  spans: document.getElementsByTagName("span"),
  theButton: document.getElementsByTagName("button"),
  x: "",
  y: "",
  z: "",
  setUp: function () {
    conversions.theButton[0].addEventListener(
      "click",
      conversions.setAllValues,
      false
    );
    conversions.theButton[1].addEventListener(
      "click",
      conversions.setTop,
      false
    );
  },
  setTop: function () {
    var letter = document.getElementById("reverse").value;
    document.getElementsByTagName(
      "input"
    )[0].value = letter.charCodeAt().toString(10);
    conversions.setAllValues();
  },
  setAllValues: function () {
    var decimalValue = conversions.inputs[0].value;
    decimalValue = decimalValue.replace(/\D/g, ""); //clean the value
    var hexValue = Number(decimalValue).toString(16);
    while (hexValue.length < 4) {
      hexValue = "0" + hexValue;
      //alert('\u' + hexValue);
    }
    if (isNaN(decimalValue)) {
      conversions.inputs[0].value = "Number Please";
      return;
    }
    conversions.inputs[0].value = "\46#" + decimalValue;
    conversions.inputs[1].value = hexcss = "\\" + hexValue.toUpperCase();
    conversions.inputs[2].value = hexjs = "\\u" + hexValue.toUpperCase();

    // cssText = document.createTextNode(`content:"${hexcss}"`);
    // jsText = document.createTextNode(
    //   `十六进制${hexjs}渲染的HTML实体符是\u0026#${decimalValue}`
    // );
    // conversions.spans[0].innerHTML = `&#38;#${decimalValue};= &#${decimalValue}`;
    // if (conversions.x) {
    //   conversions.x = conversions.spans[1].replaceChild(cssText, x);
    //   conversions.y = conversions.spans[2].replaceChild(jsText, y);
    // } else {
    //   conversions.x = conversions.spans[1].appendChild(cssText);
    //   conversions.y = conversions.spans[2].appendChild(jsText);
    // }
    return hexValue;
  }
};

conversions.setUp();