Checkout Credit Card Page Using HTML, CSS And JavaScript
Hello there! Welcome to Torque Programming! Are you ready to improve your coding skills? Today, we will create a Checkout Credit Card Page that looks great and works well. With HTML, CSS, and JavaScript, you can make a webpage that is both visually attractive and practical. Let’s begin and see what we can create!
Before we begin, here are some JavaScript code that you may find helpful to create:
Prismatic Forms Using HTML, CSS And JavaScript
Interactive Product Card Using HTML, CSS And JavaScript – Torque Programming
Toggle Profile Card Info Using JavaScript – Torque Programming
I suggest that you don’t simply copy and paste the code. Rather, take a look at the code and type it out by comprehending it.
JavaScript Checkout Credit Card Page Using HTML, CSS And JavaScript
HTML Code
Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title>Credit Card Checkout Page - Torque Programming</title>
<!-- Further code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
Paste the below code in your <body> tag.
<div class="grid align__item">
<h2>Enter your payment information below</h2>
<div class="card">
<header class="card__header">
<h3 class="card__title">Payment Details</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="card__logo" width="140" height="43"
viewBox="0 0 175.7 53.9">
<style>
.visa {
fill: #fff;
}
</style>
<path class="visa"
d="M61.9 53.1l8.9-52.2h14.2l-8.9 52.2zm65.8-50.9c-2.8-1.1-7.2-2.2-12.7-2.2-14.1 0-24 7.1-24 17.2-.1 7.5 7.1 11.7 12.5 14.2 5.5 2.6 7.4 4.2 7.4 6.5 0 3.5-4.4 5.1-8.5 5.1-5.7 0-8.7-.8-13.4-2.7l-2-.9-2 11.7c3.3 1.5 9.5 2.7 15.9 2.8 15 0 24.7-7 24.8-17.8.1-5.9-3.7-10.5-11.9-14.2-5-2.4-8-4-8-6.5 0-2.2 2.6-4.5 8.1-4.5 4.7-.1 8 .9 10.6 2l1.3.6 1.9-11.3M164.2 1h-11c-3.4 0-6 .9-7.5 4.3l-21.1 47.8h14.9s2.4-6.4 3-7.8h18.2c.4 1.8 1.7 7.8 1.7 7.8h13.2l-11.4-52.1m-17.5 33.6c1.2-3 5.7-14.6 5.7-14.6-.1.1 1.2-3 1.9-5l1 4.5s2.7 12.5 3.3 15.1h-11.9zm-96.7-33.7l-14 35.6-1.5-7.2c-2.5-8.3-10.6-17.4-19.6-21.9l12.7 45.7h15.1l22.4-52.2h-15.1" />
<path fill="#F7A600"
d="M23.1.9h-22.9l-.2 1.1c17.9 4.3 29.7 14.8 34.6 27.3l-5-24c-.9-3.3-3.4-4.3-6.5-4.4" />
</svg>
</header>
<form action="" method="post" class="form">
<div class="card__number form__field">
<label for="card__number" class="card__number__label">Card Number</label>
<input type="text" id="card__number" class="card__number__input" placeholder="1234 1234 1234 1234">
</div>
<div class="card__expiration form__field">
<label for="card__expiration__year">Expiration</label>
<select name="" id="card__expiration__year">
<option value="january">January</option>
<option value="februrary">Februrary</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select name="" id="">
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
</select>
</div>
<div class="card__ccv form__field">
<label for="">CCV</label>
<input type="text" class="card__ccv__input" placeholder="583">
</div>
</form>
</div>
<p class="text--center"><a href="#">change</a> payment method</p>
</div>
Output Till Now
CSS Code
Create a file style.css and paste the code below.
* {
box-sizing: border-box;
}
html {
height: 100%;
}
body {
background-color: #f1f1f1;
color: #2b2f31;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
min-height: 100%;
padding: 5vw 0;
}
.align {
align-items: center;
display: flex;
flex-direction: row;
}
.align__item--start {
align-self: flex-start;
}
.align__item--end {
align-self: flex-end;
}
.text--center {
text-align: center;
}
.card {
background-color: #171a1c;
border-radius: 1rem;
color: #bebec4;
padding: 2rem;
}
.card__header {
margin-bottom: 4rem;
}
.card__header:before,
.card__header:after {
content: " ";
display: table;
}
.card__header:after {
clear: both;
}
.card__title {
color: #fff;
float: left;
font-size: 1.5rem;
}
.card__logo {
float: right;
}
.card__number__input {
font-size: 2rem;
}
.card__expiration {
float: left;
}
.card__ccv {
float: right;
}
.card__ccv__input {
width: 1.75rem;
}
.card .ui-selectmenu-button {
float: left;
margin-right: 2rem;
}
input {
background-color: transparent;
border: 0;
color: #fff;
font: inherit;
width: auto;
}
input::placeholder {
color: #fff;
}
label {
display: block;
}
.form:before,
.form:after {
content: " ";
display: table;
}
.form:after {
clear: both;
}
.form__field {
margin-bottom: 1.5rem;
}
.form input {
outline: 0;
}
.form input[type="email"],
.form input[type="password"] {
width: 100%;
}
.grid {
margin: 0 auto;
max-width: 36rem;
width: 90%;
}
h1,
h2,
h3 {
margin: 0 0 0.5rem;
}
svg {
height: auto;
max-width: 100%;
vertical-align: middle;
}
a {
color: #171a1c;
}
.ui-selectmenu-menu {
display: none;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 0;
z-index: 999;
}
.ui-selectmenu-menu li {
background-color: #171a1c;
color: #fff;
padding: 0.25rem 1rem;
cursor: pointer;
}
.ui-selectmenu-menu li.ui-state-focus {
background-color: #47474e;
}
.ui-selectmenu-menu .ui-menu {
list-style: none;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow: auto;
}
.ui-selectmenu-open {
display: block;
}
.ui-selectmenu-button {
color: #fff;
cursor: pointer;
outline: 0;
}
.ui-selectmenu-button.ui-corner-top .ui-icon-triangle-1-s {
transform: rotate(-180deg);
}
.ui-selectmenu-button .ui-icon-triangle-1-s {
background: url('data:image/svg+xml; charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-254 408.9 42 24" fill="#47474e"><path d="M-212 411.9c0-1.7-1.3-3-3-3-.8 0-1.5.3-2.1.8l-15.9 15.9-15.7-15.7c-.5-.6-1.4-1-2.3-1-1.7 0-3 1.3-3 3 0 .8.3 1.5.8 2.1l18 18c.5.6 1.3.9 2.2.9.8 0 1.6-.4 2.2-.9l18-18c.5-.6.8-1.3.8-2.1z"/></svg>')
50% / 14px no-repeat;
float: right;
height: 14px;
margin-top: 5px;
transform-origin: 50%;
transition: transform 0.3s;
width: 14px;
}
Output Till Now
JavaScript Code
Create a file script.js and paste the code below.
(function ($) {
'use strict';
// Selectmenu
$('select').selectmenu();
}(jQuery));
