SLC S23W5 -3D Edit Card Form- Learn How to make using |HTML CSS JAVASCRIPT

in #techclub-s23w5 • 9 days ago

I hope you are all well. This is my first post in this learning challenge of Steemit. I welcome you and will try to teach you everything I know in this learning challenge.It is truly the best campaign on Steemit, from which we can learn, grow and eliminate our mistakes.In today's post, I will try to teach you how we can make 3D Edit Card Form. This is my knowledge. I will try my best to explain it to you as much as I can.

@sub-developer (1).png
In today's post, we will learn how we can create a credit card form that is both responsive and best.To create this, we will use HTML, CSS and JavaScript. We can also use React, but I will teach you that in another post. Because this is my first post on Steemit, I will first get to know Steemit.If we had used React in this, we could have made it much better, but if we learn it in parts, it will be easier for us. For your convenience, I have uploaded it to the GitHub website. You will find the link in the post below.
First of all, I wrote the code in HTML to create this form because if we write the code in HTML, we will be able to create the CSS and JavaScript code.
We are going to make a Credit Card form like this.

okh.gif

Screenshot (4).png

Screenshot (5).png

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Credit Card Form</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card-container">
    <div class="credit-card">
      <div class="card-front">
        <div class="card-logo">MyBank</div>
        <div class="card-chip"></div>
        <div class="card-hologram"></div>
        <div class="card-number" id="display-card-number">**** **** **** ****</div>
        <div class="cardholder-name" id="display-cardholder-name">FULL NAME</div>
        <div class="expiration-date" id="display-expiration-date">MM/YY</div>
      </div>
      <div class="card-back">
        <div class="black-strip"></div>
        <div class="cvv-strip">
          <div class="cvv" id="display-cvv">***</div>
        </div>
      </div>
    </div>
  </div>

  <form class="credit-card-form">
    <div class="form-group">
      <label for="card-number">Card Number</label>
      <input type="text" id="card-number" placeholder="1234 5678 9012 3456" maxlength="19" required>
    </div>
    <div class="form-group">
      <label for="cardholder-name">Cardholder Name</label>
      <input type="text" id="cardholder-name" placeholder="John Doe" required>
    </div>
    <div class="form-group">
      <label for="expiration-date">Expiration Date</label>
      <input type="text" id="expiration-date" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div class="form-group">
      <label for="cvv">CVV</label>
      <input type="text" id="cvv" placeholder="123" maxlength="3" required>
    </div>
    <button type="submit">Submit</button>
  </form>

  <script src="script.js"></script>
</body>
</html>

1. Credit Card Display (.card-container)

  • This section visually represents a credit card.
  • Front Side (.card-front) → Shows bank name, chip, hologram, card number, cardholder name, and expiration date.
  • Back Side (.card-back) → Displays the black security strip and CVV code.

2. Form Section (.credit-card-form)

  • Users input their card details, such as:
    • Card Number (e.g., 1234 5678 9012 3456)
    • Cardholder Name (e.g., John Doe)
    • Expiration Date (e.g., 12/24)
    • CVV (e.g., 123)
  • As users type, their details instantly appear on the card preview.

3. JavaScript (script.js)

  • This script connects the form with the card display.
  • When users enter details, they immediately reflect on the card preview.

index.html Output

Screenshot (3).png
I will upload the source code of my entire project to Beta so that it is easy for you to download and edit, and you will find the link at the end of my post.
After that, I created a CSS file based on this HTML code, that is, a style.css file. I am also giving a screenshot of it below and apart from that, I am also explaining to you what has been done in it.

Screenshot (6).png

Screenshot (7).png

Screenshot (8).png
.
.
.
.
Screenshot (11).png
We can provide this gile source on github link in post below

1. Basic Page Styling (body)

  • Background A gradient from light blue to white.
  • Centered Layout Everything is in the middle of the screen.
  • Responsive & Fullscreen Uses flexbox to align items properly.

2. The Credit Card Design (.card-container & .credit-card)

  • Looks Like a Real Card Width 340px, height 220px.
  • 3D Effect (perspective: 1000px) Makes it look like it's actually flipping.
  • Flipping Animation (.flipped) Rotates the card 180 degrees when clicked.
  • Smooth Transitions (transition: transform 0.6s) No sudden jumps, just a smooth flip.

3. Front & Back of the Card (.card-front & .card-back)

  • Front Side

    • Has a logo, chip, hologram, and card details (number, name, expiry date).
    • Uses Glassmorphism (backdrop-filter: blur(10px)) Gives a transparent, frosted-glass look.
    • Cool Gradient (linear-gradient(135deg, rgba(98, 0, 234, 0.8), rgba(55, 0, 179, 0.8))) Dark purple-blue gradient background.

  • Back Side

    • Contains black security strip and CVV section.
    • Flips on click (rotateY(180deg)) When flipped, only the back is visible.

4. Card Elements (Chip, Hologram, CVV, etc.)

  • Chip (.card-chip) A small golden rectangle to make it look real.
  • Hologram (.card-hologram) A shiny effect to mimic real holograms.
  • Card Number (.card-number) Spaced numbers with letter-spacing: 2px for clarity.
  • Black Strip (.black-strip) The usual black band on the back of cards.
  • CVV Section (.cvv-strip) A white strip with black numbers (like real CVVs).

5. Credit Card Form (.credit-card-form)

  • Inputs for card details (number, name, expiry, CVV).
  • Live Update Effect Whatever the user types, it instantly appears on the card.
  • Nice Focus Effects (input:focus) When clicking an input, it glows purple with a shadow.
  • Smooth Button (button) Changes color slightly when hovered (background-color: #3700b3).

6. Animations & Microinteractions

  • Flipping the card transform: rotateY(180deg);
  • Hovering the button Slight lift effect (transform: translateY(-2px);)
  • Clicking an input field Changes border color & adds a glow effect.

On this, I want to tell you one thing. I have not added the JavaScript code yet. The only thing that will come out of it is that whatever we write, the entire design will remain the same, but when we go to the CV button, that is, the box, the card will not be inverted unless we mention the code for inversion in the JavaScript.

Check Output Without script.js file

Screenshot (12).png
You can see that I clicked my mouse on the CSV box but the card did not flip. If we want to flip the card, we have to mention this in the script.js file that when clicked there, the card should flip.

Screenshot (13).png

Screenshot (14).png
Final Output Using script.js
okh.gif

Github Source

I would love to invite my dear friends @sualeha, @aneukpineung78, @uzma4882, @chant, @josepha, and @wilmer1988 to join this exciting challenge!

Regards

@sun-developer
The form we were creating to store credit card data is almost complete. You can see the output here.

Thanks for Learning/Reading

#techclub #learnwithsteem #pakistan #steemexclusive #card #desin
9 days ago in #techclub-s23w5 by
$0.14
  • Past Payouts $0.14
  • - Author $0.09
  • - Curators $0.05
20 votes
Reply 8
Sort:  
  • Trending
    • Loading...
    [-]
     9 days ago 

    !upvote 15

    2️⃣0️⃣2️⃣5️⃣ Participate in the "Seven Network" Community
    This post was manually selected to be voted on by "Seven Network Project". (Manual Curation of Steem Seven).

    $0.00
      Reply
      [-]
       9 days ago 

      the post has been upvoted successfully! Remaining bandwidth: 0%

      $0.00
        Reply
        Loading...
        [-]
         9 days ago 

        Nice bro you give a good efforts to design this payment card for payment purpose and i really like your way to use HTML and CSS with javascript.

        Good luck for your participation!!!!

        $0.00
          Reply
          [-]
           8 days ago 

          Thank you so much for your kind words and support! I'm really glad you liked the design and the way I used HTML, CSS, and JavaScript. Your appreciation means a lot to me! Wishing you success as well in all your endeavors. Stay connected!

          $0.00
            Reply
            [-]
             6 days ago 

            Your github repo is 404, please try checking permissions

            It looks good, but make sure to finish the work, the label for the first input is hidden by the card.

            $0.00
              Reply
              [-]
               6 days ago 

              My Great Brother @alejos7ven How are yu/Ihope you are well.
              Yes, indeed, what you have said is the same as the error that is occurring. I have now solved it. I am giving you the link to the new GetUp repository where you will find it. Actually, there was a moon issue in this account, due to which GetUp has suspended my account.But this is my own account, there is no issue with it, I have uploaded the repository to it.

              Github Repository

              And besides, I have also set the problem you were talking about, the space between the card and the card name.

              Thanks For your Feedback

              $0.00
                Reply