index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Checkout</title>
<link rel="stylesheet" href="styles.css"/>
<script src="script.js" type="text/javascript" ></script>
</head>
<body>
<main class="card">
<h1>💳 Payment details</h1>
<label>Card number</label>
<input type="text" placeholder="1234 5678 9012 3456" maxlength="19" data-format="card"/>
<div class="row">
<div>
<label>Expiry</label>
<input type="text" placeholder="MM / YY" maxlength="7" data-format="expiry"/>
</div>
<div>
<label>CVC</label>
<input type="text" placeholder="123" maxlength="3" data-format="digits"/>
</div>
</div>
<div class="total">
<span>Total</span>
<strong>$49.99</strong>
</div>
<button class="submit">Pay now</button>
</main>
</body>
</html>
styles.css
* {
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(ellipse at 30% 20%, #1e1b4b, #070810 70%);
font-family: system-ui, sans-serif;
}
.card {
width: 380px;
padding: 36px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
gap: 14px;
}
h1 {
font-size: 20px;
font-weight: 700;
color: #f0f0ff;
margin: 0;
}
label {
font-size: 12px;
font-weight: 500;
color: rgba(255, 255, 255, 0.45);
margin-bottom: -8px;
}
input {
width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: #e0e0ff;
font-size: 14px;
outline: none;
}
input::placeholder {
color: rgba(255, 255, 255, 0.15);
}
input:focus {
border-color: rgba(99, 102, 241, 0.5);
box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
}
.row {
display: flex;
gap: 12px;
}
.row > * {
flex: 1;
}
.total {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.total strong {
font-size: 20px;
color: #c7d2fe;
}
.submit {
padding: 14px;
border: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #4f46e5, #6366f1, #818cf8);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.35);
}
script.js
const formatters = {
card(value) {
const digits = value.replace(/\D/g, "").slice(0, 16);
return digits.replace(/(.{4})/g, "$1 ").trim();
},
expiry(value) {
const digits = value.replace(/\D/g, "").slice(0, 4);
if (digits.length < 2) return digits;
return digits.slice(0, 2) + " / " + digits.slice(2);
},
digits(value) {
return value.replace(/\D/g, "");
},
};
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[data-format]").forEach((input) => {
const format = formatters[input.dataset.format];
if (!format) return;
input.addEventListener("input", () => {
const cursor = input.selectionStart;
const before = input.value.length;
input.value = format(input.value);
const after = input.value.length;
input.setSelectionRange(cursor + after - before, cursor + after - before);
});
});
});
