+ 2
can someone help me with this web code on html5
Create a BUTTON as a sibling to the data-credit-card DIV. Set the BUTTON's class to mdc-button and give it a data-pay-btn attribute. It should have Pay & Checkout Now as its display text. After the user enters details of the card and clicks on this button, the app will strike-though the card numbers to indicate that they are in-valid.
10 Respuestas
+ 2
I suggest u start the code and post it with ur question, that way it's easier for me (us) to understand what u r trying to do.
So when u have the code started, show me (us) and i (us) will see what we can do.
+ 2
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie-edge" />
<title>Mini App</title>
<style>
body {
margin: 0;
padding: 1em;
background: white;
}
[data-cart-info],
[data-credit-card] {
transform: scale(0.70);
margin-left: -3.4em;
}
[data-cc-digits] input:focus,
[data-cc-digits] input:focus {
outline: none;
}
.mdc-card_primary-action,
.mdc-card_primary-action:hover {
cursor: auto;
padding: 20px;
min-width: inherit;
}
[data-credit-card][data-card-type] {
transit: width 1.5s;
margin-left: calc(100% - 130px);
}
.is-visa {
background: linear-gradient(135deg, #622774 0%, #c53364 100%);
}
.is-mastercard {
+ 2
Basically your problem is about changing the classes of a button giving it different functions to do
+ 2
Can you post your code on playground
+ 1
widows: auto;
}
input.is-invalid,
.is-invalid input {
text-decoration: line-through;
}
::placeholder {
color: #fff;
}
[data-cart-info] span{
display:inline-block;
vertical-align:middle;}
.material-icons {
font: 150px;
}
[data-credit-card]{
background:#5d6874;
min-height:240px;
width:345px;
border-radius:10px;}
[data-card-type] img {
width:120px;
height:60px;
display:block;}
[data-cc-digits]{
margin-top:2em;
border:0;
}
[data-cc-digits] input{
font: 2em;
line-height:2em;
margin-right:0.5em;
}
[data-cc-info]{
nargin-top:2em;
border:0;
background:none;
+ 1
info] input {
font:1.2em;
color:white;}
[data-cc-info] input:nth-child(2){
padding-right:10px;
float:right;}
[data-pay-btn]{
position:fixed;
width:90%;
border: solid 1px;
bottom: 20px;
}
</style>
</head>
<body>
<div data-cart-info="">
<h1 class="mdc-topography--headline4">
<span class="material-icons" content="shopping_cart"></span>
<span data-bill=""></span>
</h1>
</div>
<div data-credit-card="" class="mdc-card mdc-card--outlined">
<div class="mdc-card_primary-action">
<img src="http://placehold.it/120x60.png?text=card" alt="" d
<div data-cc-digits="">
<input type="text" size="4" placeholder="----">
<input type="text" size="4" placeholder="----">
<input type="textata-card-type="">" size="4" placeholder="---
+ 1
<div data-cc-info="">
<input type="text" size="20" placeholder="Name Surname">
<input type="text" size="6" placeholder="MM/YY">
</div>
<input type="button" class="mdc-button" data-pay-btn="" value="Pay & Checkout Now">
</div>
</div>
<script>
const xountries = [
{
0
This is where i had problem with the checkout button
0
Ok
0
plz some one may give me a help about Creating a BUTTON as a sibling to the data-credit-card DIV. Set the BUTTON's class to mdc-button and give it a data-pay-btn attribute. It should have Pay Now as its display text. After the user enters details of the card and clicks on this button, the app will strike-though the card details that are in-valid, if any.
¿Tienes a menudo preguntas como esta?
Aprende gratis de forma más eficaz
En tendencia hoy
Pig Latin
0 Votes
Someone can help me
0 Votes
Square Roots
0 Votes
What's wrong with this?
2 Votes
I’m new someone can help me
0 Votes
What's doctype htMl
2 Votes
HTML community, HELP!!
0 Votes