Adição de formatação de cartão

GustavoGads · Mar 17, 2024 · bf99789 · bf99789
1 parent 7a7bead
commit bf99789
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 7 deletions.
diff --git a/assets/img/cartão-null.svg b/assets/img/cartão-null.svg
diff --git a/index.html b/index.html
@@ -9,9 +9,6 @@
     <link rel="stylesheet" href="style.css">
     <link rel="icon" href="assets/favicon/BG-CARD.svg">
 
-    <script>
-        alert('!ATENÇÃO! Em hipótese alguma coloque seus dados reais neste site. Preserve sua segurança digital!')
-    </script>
     <title>Adicione seu cartão</title>
 </head>
 <body>
@@ -24,7 +21,13 @@ <h1>Adicione um novo cartão</h1>
     <main>
 
         <section>
-            <img src="assets/img/cartão.png" alt="Imagem do cartão de crédito.">
+            <div class="ancora-card">
+                <img src="assets/img/cartão-null.svg" alt="Imagem do cartão de crédito.">
+                <span id="print-numero">123 *** *** ***</span>
+                <span id="print-cvv">***</span>
+                <span id="print-validade">**/**</span>
+                <span id="print-nome">***********</span>
+            </div>
         </section>
 
         <form action="#">
@@ -33,7 +36,7 @@ <h1>Adicione um novo cartão</h1>
                 <label for="num-card">
                     Número do cartão
                 </label>
-                <input id="num-card" name="num-card" type="number" required>
+                <input id="num-card" name="num-card" type="number" oninput="printarNumeroCartao(this)" required autofocus maxlength="16">
             </div>
 
             <div id="inputs-juntos">
@@ -71,5 +74,6 @@ <h1>Adicione um novo cartão</h1>
 
     </main>
 
+    <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js 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
+    }
+}
diff --git 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;