A Pen by Roberto Oliveira on CodePen.
Created
November 25, 2019 17:42
-
-
Save robertol/90a1b1785df1fe4e9c063c2683cfc032 to your computer and use it in GitHub Desktop.
Payment input
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment