<div class="container">
  <h2>行送り</h2>
  <input class="input input-line" placeholder="行送り">
  <input class="input input-fontSize" placeholder="フォントサイズ">
  <pre class="result">line-height: <span class="result-line">0</span>;</pre>
</div>

<div class="container">
  <h2>トラッキング</h2>
  <input class="input input-tracking" placeholder="トラッキング">
  <pre class="result">letter-spacing: <span class="result-tracking">0</span>em;</pre>
</div>

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  font-family: 'Noto Sans JP', sans-serif;
}

.container {
  margin-bottom: 2rem;
}

.input {
  padding: 0.5rem;
  width: 20rem;
  
  &.input-line,
    &.input-fontSize{
    width: 10rem;
  }
}

.result {
  padding: 1.5rem 0.5rem;
  width: 20rem;
  user-select: all;
}

// 行送り
const inputLine = document.querySelector(".input-line");
const inputFontSize = document.querySelector(".input-fontSize");
const resultLine = document.querySelector(".result-line");

const calcLineValue = () => {
  const lineValue = parseInt(inputLine.value, 10);
  const fontSizeValue = parseInt(inputFontSize.value, 10);
  
  if (!lineValue || !fontSizeValue) return;
  resultLine.textContent = (lineValue / fontSizeValue);
};

inputLine.addEventListener("change", () => calcLineValue());

inputFontSize.addEventListener("change", () => calcLineValue());


// トラッキング
const inputTracking = document.querySelector(".input-tracking");
const resultTracking = document.querySelector(".result-tracking");

inputTracking.addEventListener("change", function() {
  if (!this.value) return;
  resultTracking.textContent = parseInt(this.value, 10) / 1000;
});