From bf99789d47b3c3adb1458eb0eadd5ca811218dd9 Mon Sep 17 00:00:00 2001 From: GuhStvo Date: Sun, 17 Mar 2024 17:23:40 -0300 Subject: [PATCH] =?UTF-8?q?Adi=C3=A7=C3=A3o=20de=20formata=C3=A7=C3=A3o=20?= =?UTF-8?q?de=20cart=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- "assets/img/cart\303\243o-null.svg" | 111 ++++++++++++++++++++++++++++ index.html | 14 ++-- script.js | 19 +++++ style.css | 44 ++++++++++- 4 files changed, 181 insertions(+), 7 deletions(-) create mode 100644 "assets/img/cart\303\243o-null.svg" create mode 100644 script.js diff --git "a/assets/img/cart\303\243o-null.svg" "b/assets/img/cart\303\243o-null.svg" new file mode 100644 index 0000000..a9bd835 --- /dev/null +++ "b/assets/img/cart\303\243o-null.svg" @@ -0,0 +1,111 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 7b5aed0..9c45b7f 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,6 @@ - Adicione seu cartão @@ -24,7 +21,13 @@

Adicione um novo cartão

- Imagem do cartão de crédito. +
+ Imagem do cartão de crédito. + 123 *** *** *** + *** + **/** + *********** +
@@ -33,7 +36,7 @@

Adicione um novo cartão

- +
@@ -71,5 +74,6 @@

Adicione um novo cartão

+ diff --git a/script.js b/script.js new file mode 100644 index 0000000..70c537b --- /dev/null +++ b/script.js @@ -0,0 +1,19 @@ +// alert('!ATENÇÃO! Em hipótese alguma coloque seus dados reais neste site. Preserve sua segurança digital!' +function printarNumeroCartao(input) { + // Remove todos os caracteres que não são dígitos + input.value = input.value.replace(/\D/g, ''); + + // Limita o número de caracteres a 16 + if (input.value.length > 16) { + input.value = input.value.slice(0, 16); + } + + // Formata o número do cartão adicionando um espaço a cada três caracteres + var numFormatado = input.value.replace(/\D/g, '').replace(/(\d{4})(?=\d)/g, "$1 "); + + if (numFormatado == 0) { + document.getElementById("print-numero").innerHTML = "123 *** *** ***" + } else { + document.getElementById("print-numero").innerHTML = numFormatado + } +} \ No newline at end of file diff --git a/style.css b/style.css index 4d82409..0d7a495 100644 --- a/style.css +++ b/style.css @@ -32,11 +32,51 @@ header h1 { line-height: normal; } -section img { +section { + margin-top: 43px; + display: flex; + justify-content: center; +} + +.ancora-card img { display: block; - margin: 43px auto 0; } +.ancora-card { + width: fit-content; + position: relative; +} + +.ancora-card span { + color: #fff; + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + position: absolute; + left: 20px; +} + +#print-numero { + top: 53px; +} + +#print-cvv { + bottom: 40px; +} + +#print-validade { + bottom: 40px; + right: 28px; + left: unset; +} + +#print-nome { + bottom: 14px; +} + + form { margin: 40px 27px;