Payment input

index.html

<div class="terminal">
  <div class="crypto-output"><span data-crypto-output>0.00000000</span> BTC</div>
  <div class="currency-output">R$ <span data-int-output>0</span>,<span data-dec-output>00</span></div>
  
  <ul class="numpad">
    <li class="numpad__item"><button class="numpad__btn" id="button-1">1</button></li>
    <li class="numpad__item"><button class="numpad__btn" id="button-2">2</button></li>
    <li class="numpad__item"><button class="numpad__btn" id="button-3">3</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-4">4</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-5">5</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-6">6</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-7">7</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-8">8</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-9">9</button></li>
    <li class="numpad__item"><button class="numpad__btn numpad__btn--type-dark btn_decimal" id="button-decimal">.</button></li>
    <li class="numpad__item"><button class="numpad__btn btn_number" id="button-0">0</button></li>
    <li class="numpad__item">
      <button class="numpad__btn numpad__btn--type-dark btn_backspace" id="button-backspace">
        <svg class="icon icon-delete" viewBox="0 0 1024 1024">
          <path class="path1" d="M341.333 128h554.667q53 0 90.5 37.5t37.5 90.5v512q0 53-37.5 90.5t-90.5 37.5h-554.667l-341.333-384zM896 213.333h-516.333l-265.333 298.667 265.333 298.667h516.333q17.667 0 30.167-12.5t12.5-30.167v-512q0-17.667-12.5-30.167t-30.167-12.5zM810.667 384q0 18-12.333 30.333l-98 97.667 98 97.667q12.333 12.333 12.333 30.333 0 18.333-12.167 30.5t-30.5 12.167q-18 0-30.333-12.333l-97.667-98-97.667 98q-12.333 12.333-30.333 12.333-17.667 0-30.167-12.5t-12.5-30.167q0-17.333 12.333-30.333l98-97.667-98-97.667q-12.333-13-12.333-30.333 0-17.667 12.5-30.167t30.167-12.5q18 0 30.333 12.333l97.667 98 97.667-98q12.333-12.333 30.333-12.333 18.333 0 30.5 12.167t12.167 30.5z"></path>
        </svg>
      </button>
  </li>
  </ul>
  <button class="submit">Gerar Pagamento</button>
</div>

payment-input.markdown

Payment input

A Pen by Roberto Oliveira on CodePen.

License.

script.js

const intOutput = document.querySelector("[data-int-output]");
const decOutput = document.querySelector("[data-dec-output]");
const cryptoOutput = document.querySelector("[data-crypto-output]");

const buttons = document.querySelectorAll(".numpad__btn");
[].slice.call(buttons, 0).forEach(button => {
  button.addEventListener("click", onClick);
});

document.querySelector(".submit").addEventListener("click", pay);
document.querySelector(".btn_backspace").addEventListener("click", backspace);

let decimal = false;

function onClick(event) {
  const button = event.target;
  const value = button.innerText;

  if (!value) {
    return;
    // remove
  } else if (value === ".") {
    decimal = !decimal;
  } else {
    if (decimal) {
      if (decOutput.innerText.length < 2) {
        const decValue = decOutput.innerText;
        decOutput.textContent =
          parseInt(decValue, 10) === 0 ? value : decValue + value;
      }
      if (decOutput.innerText.length == 2) decimal = !decimal;
    } else {
      if (intOutput.innerText.length < 5) {
        const intValue = intOutput.innerText;
        intOutput.innerText =
          parseInt(intValue, 10) === 0 ? value : intValue + value;
        const cryptoValue = cryptoOutput.innerText;
        let valor = parseFloat(intOutput.innerText + "." + decOutput.innerText);

        let cotacao = 36900.0;

        let total = valor / cotacao;

        cryptoOutput.innerText = total.toFixed(8);
      }
    }
  }
}

function backspace() {
  if (decOutput.innerText.length > 0 && decOutput.innerText != 0) {
    decOutput.innerText = decOutput.innerText.slice(
      0,
      decOutput.innerText.length - 1
    );
    let valor = parseFloat(intOutput.innerText + "." + decOutput.innerText);

    let cotacao = 47699.0;

    let total = valor / cotacao;

    cryptoOutput.innerText = total.toFixed(8);
  }

  if (intOutput.innerText.length > 0) {
    intOutput.innerText = intOutput.innerText.slice(
      0,
      intOutput.innerText.length - 1
    );
    cryptoOutput.innerText.slice(0, cryptoOutput.innerText.length - 1);
    let valor = parseFloat(intOutput.innerText + "." + decOutput.innerText);

    let cotacao = 36900.0;

    let total = valor / cotacao;

    cryptoOutput.innerText = total.toFixed(8);
  }
  if (intOutput.innerText == 0 && decOutput.innerText == 0) {
    intOutput.innerText = "0";
    decOutput.innerText = "00";
    cryptoOutput.innerText = "0.00000000";
    let decimal = false;
  }
}

function pay() {
  let currencyTotal = parseFloat(
    intOutput.innerText + "." + decOutput.innerText
  );

  alert(currencyTotal);
}

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
* {
  box-sizing: border-box;
}

.terminal {
  background-color: #111;
  color: #111;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  outline: 0;
}

.terminal {
  margin: 0 auto;
  max-width: 320px;
}

.crypto-output,
.currency-output {
  background-color: #fff;
  padding: 0.25em 16px;
  text-align: right;
}

.currency-output {
  font-size: 2.5em;
}

.submit {
  background-color: #45BF55;
  color: #fff;
  display: block;
  font-size: .9em;
  letter-spacing: .15em;
  padding: .5em 16px;
  text-align: center;
  transition: all .2s;
  width: 100%;
}
.submit:hover {
  background-color: #3fb84f;
}
.submit:active {
  background-color: #3cae4b;
}

.numpad {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.numpad__item {
  flex: 1 calc(100% / 3);
  position: relative;
}
.numpad__btn {
  background-color: #ddd;
  font-size: 1.75em;
  padding: .6em 0;
  transition: all .2s;
  width: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.numpad__btn:after {
  border: 1px solid #bdbdbd;
  border-radius: 50%;
  left: 50%;
  opacity: 0;
  padding-bottom: 64%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  transition: all .2s;
  width: 64%;
}
.numpad__btn:hover {
  background-color: #d7d7d7;
}
.numpad__btn:hover:after {
  opacity: 1;
}
.numpad__btn:active {
  background-color: #d0d0d0;
}
.numpad__btn:active:after {
  -webkit-transform: translateX(-50%) translateY(-50%) scale(0.9);
          transform: translateX(-50%) translateY(-50%) scale(0.9);
}
.numpad__btn--type-dark {
  background-color: #ccc;
}
.numpad__btn--type-dark:after {
  content: none;
}
.numpad__btn--type-dark:hover {
  background-color: #bfbfbf;
}
.numpad__btn--type-dark:active {
  background-color: #b3b3b3;
}

.icon-delete {
  width: 0.75em;
}

#button-1 {
  box-shadow: 0 1px 0 0 rgba(238, 49, 156, 0.25), 0 -1px 0 0 rgba(250, 58, 100, 0.25), 1px 0 0 0 rgba(238, 49, 156, 0.25), -1px 0 0 0 rgba(250, 58, 100, 0.25), 1px -1px 0 0 rgba(244, 53, 128, 0.5), -1px 1px 0 0 rgba(244, 53, 128, 0.5), 1px 1px 0 0 rgba(232, 44, 184, 0.75), -1px -1px 0 0 rgba(255, 62, 71, 0.75);
}

#button-2 {
  box-shadow: 0 1px 0 0 rgba(219, 44, 220, 0.25), 0 -1px 0 0 rgba(228, 44, 196, 0.25), 1px 0 0 0 rgba(219, 44, 220, 0.25), -1px 0 0 0 rgba(228, 44, 196, 0.25), 1px -1px 0 0 rgba(223, 44, 208, 0.5), -1px 1px 0 0 rgba(223, 44, 208, 0.5), 1px 1px 0 0 rgba(214, 44, 232, 0.75), -1px -1px 0 0 rgba(232, 44, 184, 0.75);
}

#button-4 {
  box-shadow: 0 1px 0 0 rgba(219, 44, 220, 0.25), 0 -1px 0 0 rgba(228, 44, 196, 0.25), 1px 0 0 0 rgba(219, 44, 220, 0.25), -1px 0 0 0 rgba(228, 44, 196, 0.25), 1px -1px 0 0 rgba(223, 44, 208, 0.5), -1px 1px 0 0 rgba(223, 44, 208, 0.5), 1px 1px 0 0 rgba(214, 44, 232, 0.75), -1px -1px 0 0 rgba(232, 44, 184, 0.75);
}

#button-3 {
  box-shadow: 0 1px 0 0 rgba(142, 58, 250, 0.25), 0 -1px 0 0 rgba(190, 49, 238, 0.25), 1px 0 0 0 rgba(142, 58, 250, 0.25), -1px 0 0 0 rgba(190, 49, 238, 0.25), 1px -1px 0 0 rgba(166, 53, 244, 0.5), -1px 1px 0 0 rgba(166, 53, 244, 0.5), 1px 1px 0 0 rgba(117, 62, 255, 0.75), -1px -1px 0 0 rgba(214, 44, 232, 0.75);
}

#button-5 {
  box-shadow: 0 1px 0 0 rgba(142, 58, 250, 0.25), 0 -1px 0 0 rgba(190, 49, 238, 0.25), 1px 0 0 0 rgba(142, 58, 250, 0.25), -1px 0 0 0 rgba(190, 49, 238, 0.25), 1px -1px 0 0 rgba(166, 53, 244, 0.5), -1px 1px 0 0 rgba(166, 53, 244, 0.5), 1px 1px 0 0 rgba(117, 62, 255, 0.75), -1px -1px 0 0 rgba(214, 44, 232, 0.75);
}

#button-7 {
  box-shadow: 0 1px 0 0 rgba(142, 58, 250, 0.25), 0 -1px 0 0 rgba(190, 49, 238, 0.25), 1px 0 0 0 rgba(142, 58, 250, 0.25), -1px 0 0 0 rgba(190, 49, 238, 0.25), 1px -1px 0 0 rgba(166, 53, 244, 0.5), -1px 1px 0 0 rgba(166, 53, 244, 0.5), 1px 1px 0 0 rgba(117, 62, 255, 0.75), -1px -1px 0 0 rgba(214, 44, 232, 0.75);
}

#button-8 {
  box-shadow: 0 1px 0 0 rgba(71, 131, 238, 0.25), 0 -1px 0 0 rgba(102, 85, 250, 0.25), 1px 0 0 0 rgba(71, 131, 238, 0.25), -1px 0 0 0 rgba(102, 85, 250, 0.25), 1px -1px 0 0 rgba(86, 108, 244, 0.5), -1px 1px 0 0 rgba(86, 108, 244, 0.5), 1px 1px 0 0 rgba(55, 153, 232, 0.75), -1px -1px 0 0 rgba(117, 62, 255, 0.75);
}

#button-6 {
  box-shadow: 0 1px 0 0 rgba(71, 131, 238, 0.25), 0 -1px 0 0 rgba(102, 85, 250, 0.25), 1px 0 0 0 rgba(71, 131, 238, 0.25), -1px 0 0 0 rgba(102, 85, 250, 0.25), 1px -1px 0 0 rgba(86, 108, 244, 0.5), -1px 1px 0 0 rgba(86, 108, 244, 0.5), 1px 1px 0 0 rgba(55, 153, 232, 0.75), -1px -1px 0 0 rgba(117, 62, 255, 0.75);
}

#button-0 {
  box-shadow: 0 1px 0 0 rgba(47, 117, 232, 0.25), 0 -1px 0 0 rgba(53, 141, 232, 0.25), 1px 0 0 0 rgba(47, 117, 232, 0.25), -1px 0 0 0 rgba(53, 141, 232, 0.25), 1px -1px 0 0 rgba(50, 129, 232, 0.5), -1px 1px 0 0 rgba(50, 129, 232, 0.5), 1px 1px 0 0 rgba(44, 105, 232, 0.75), -1px -1px 0 0 rgba(55, 153, 232, 0.75);
}

#button-9 {
  box-shadow: 0 1px 0 0 rgba(47, 117, 232, 0.25), 0 -1px 0 0 rgba(53, 141, 232, 0.25), 1px 0 0 0 rgba(47, 117, 232, 0.25), -1px 0 0 0 rgba(53, 141, 232, 0.25), 1px -1px 0 0 rgba(50, 129, 232, 0.5), -1px 1px 0 0 rgba(50, 129, 232, 0.5), 1px 1px 0 0 rgba(44, 105, 232, 0.75), -1px -1px 0 0 rgba(55, 153, 232, 0.75);
}

#button-decimal {
  box-shadow: 0 1px 0 0 rgba(71, 131, 238, 0.25), 0 -1px 0 0 rgba(102, 85, 250, 0.25), 1px 0 0 0 rgba(71, 131, 238, 0.25), -1px 0 0 0 rgba(102, 85, 250, 0.25), 1px -1px 0 0 rgba(86, 108, 244, 0.5), -1px 1px 0 0 rgba(86, 108, 244, 0.5), 1px 1px 0 0 rgba(55, 153, 232, 0.75), -1px -1px 0 0 rgba(117, 62, 255, 0.75);
}

#button-backspace {
  box-shadow: 0 1px 0 0 rgba(58, 206, 250, 0.25), 0 -1px 0 0 rgba(49, 139, 238, 0.25), 1px 0 0 0 rgba(58, 206, 250, 0.25), -1px 0 0 0 rgba(49, 139, 238, 0.25), 1px -1px 0 0 rgba(53, 172, 244, 0.5), -1px 1px 0 0 rgba(53, 172, 244, 0.5), 1px 1px 0 0 rgba(62, 239, 255, 0.75), -1px -1px 0 0 rgba(44, 105, 232, 0.75);
}