Number Abbreviation

by AntowaKartowa

HTML

<div class="container">
  <form action="#" class="abbr-form">
    <input type="number" name="number" id="" class="abbr-input">
    <button type="submit" class="abbr-submit">Abbreviate</button>
  </form>
  <div class="abbr-result"></div>
</div>

CSS

body {
  margin: 0;
}

.container {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100vh;
  margin: 0 auto;
}

.abbr-form {
  margin-bottom: 20px;
}

.abbr-result {
  height: 16px;
}

JavaScript

const toAbbrInt = (number, decimals = 2, cuttZeros = false) => {
  if (number === 0) {
    return '0';
  }

	const multiplier = 1000;
  const abbreviation = ['', 'K', 'M', 'B', 'T'];
  const measureIndex = Math.floor(Math.log(number) / Math.log(multiplier));
  const abbrNumber = (number / (multiplier ** measureIndex)).toFixed(decimals);

  return `${cuttZeros ? parseFloat(abbrNumber) : abbrNumber} ${abbreviation[measureIndex]}`;
};

const input = document.body.querySelector('.abbr-input');
const button = document.body.querySelector('.abbr-submit');
const board = document.body.querySelector('.abbr-result');

const abbreviateNumber = (e) => {
	e.preventDefault();
  board.innerText = toAbbrInt(parseFloat(input.value || 0), 3, true);
}

button.addEventListener('click', abbreviateNumber);