Progress loader til Sigge

by Kenneth Luplau-Brøgger

HTML

<div class="inputs">
  <div>
    <input type="number" placeholder="Jeg har" id="have" />
  </div>
  <div>
    <input type="number" placeholder="Jeg skal bruge" id="want" />
  </div>
</div>

<div class="missing">
  <span>
    Mangler
  </span>
  <span class="missingText"></span>
</div>

<div class="loader">
  <div class="progressText"></div>
  <div class="progress">
    <div class="progressText"></div>
  </div>
</div>

CSS

body {
  background: #39464e;
}

.loader {
  width: 500px;
  position: absolute;
  height: 50px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

.progress {
  background: green;
  height: 50px;
  width: 0%;
  position: absolute;
  text-align: center;
  overflow: hidden;
  top: 0;
}

.progressText {
  width: 500px;
  height: 50px;
  text-align: center;
  color: #39464e;
  line-height: 50px;
}

.progress .progressText {
  color: #fff;
}

.missing {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 30%;
  left: 50%;
  font-size: 30px;
  color: #fff;
}

JavaScript 1.7

const $have = $("#have");
const $want = $("#want");
const $progress =  $(".progress");
const $progressText = $(".progressText");
const $missingText = $(".missingText");

const calculate = () => {
  if ($have.val() === "" || $want.val() === "") {
    return false;
  }

  const have = parseInt($have.val(), 10);
  const want = parseInt($want.val(), 10);

  const progress = have / want * 100;

  render(parseInt(progress, 10), have, want);
}

const render = (value, have, want) => {
	if (value < 0) {
  	value = 0;
  }
  
  if (value > 100) {
  	value = 100;
  }
  
	const percentage = value + "%";
  
  $progress.css("width", percentage);
  $progressText.text(percentage);
  $missingText.text(want - have);
  
}

render(0, 0, 0);

$have.on("input", calculate);
$want.on("input", calculate);