...

Mohammadflht · Mar 11, 2024 · 18393a9 · 18393a9
2 parents 73a4009 + 3b7031e
commit 18393a9
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 18 deletions.
diff --git a/app.js b/app.js
@@ -56,9 +56,11 @@ inputName.addEventListener('input', function() {
     // Update the cardName text
     if (inputValue) {
         cardName.textContent = inputValue;
+        cardName.style.animation = "slide-up 0.3s ease-out both"
     } else {
         // If the input is empty, set the default name
         cardName.textContent = 'JANE APPLESEED';
+        cardName.style.animation = "none";
     }
 });
 
@@ -134,8 +136,7 @@ inputCVC.addEventListener('input', function() {
 
 
 let mounthYearError = document.getElementById('mounthYearError');
-let cardNumberEmptyError = document.getElementById('cardNumberEmptyError');
-let cardNumberFormatError = document.getElementById('cardNumberFormatError');
+let cardNumberError = document.getElementById('cardNumberError');
 let cardCvcError = document.getElementById('cardCvcError');
 let confirmButton = document.getElementById('confirmButton');
 let continueButton = document.getElementById('continueButton');
@@ -145,27 +146,27 @@ let formMain = document.querySelector('.form-main');
 confirmButton.addEventListener('click', function() {
     let isError = false;
     if (!/^[0-9\s]*$/.test(inputNumber.value) || inputNumber.value.length < 19) {
-        cardNumberFormatError.style.display = "block";
-        cardNumberEmptyError.style.display = "none";
+        cardNumberError.style.display = "block";
+        cardNumberError.textContent = "Wrong format, number only";
         isError = true;
     }else {
-        cardNumberFormatError.style.display = "none";
+        cardNumberError.style.display = "none";
     }
     if (inputNumber.value.length === 0) {
-        cardNumberEmptyError.style.display = "block";
-        cardNumberFormatError.style.display = "none";
+        cardNumberError.style.display = "block";
+        cardNumberError.textContent = "Can't be blank";
         isError = true;
-    }else {
-        cardNumberEmptyError.style.display = "none";
     }
     if ((inputMonth.value.length === 0) || (inputYear.value.length === 0)) {
         mounthYearError.style.display = "block";
+        mounthYearError.textContent = "Can't be blank";
         isError = true;
     }else {
         mounthYearError.style.display = "none";
     }
     if (inputCVC.value.length === 0) {
         cardCvcError.style.display = "block";
+        cardCvcError.textContent = "Can't be blank";
         isError = true;
     }else {
         cardCvcError.style.display = "none";
@@ -178,6 +179,7 @@ confirmButton.addEventListener('click', function() {
     }
 
     console.log(isError);
+    console.log(cardNumberError.textContent);
 });
 
 continueButton.addEventListener('click', function() {

diff --git a/css/media.css b/css/media.css
@@ -8,20 +8,50 @@
         width: 100%;
     }
     .card-front {
-        top: 180px;
-        left: 20px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 20%);
         z-index: 1;
+        /* transform: translateY(-10%); */
     }
     .card-back {
-        top: 56px;
-        left: 100px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-30%, -36%);
+        /* margin: auto; */
     }
     .form-main {
         width: 80%;
-    }   
+        padding-top: 50px;
+        position: relative;
+        top: 100px;
+    }
 }
 @media (max-width: 668px) {
     .form-main {
         width: 100%;
+        top: 40px;
+    }
+    .card-back, .card-front {
+        left: 40%;
+        width: 300px;
+        height: 165px;
+    }
+.card-logo {
+    height: 40%;
+    left: 20px;
+    top: 20px;
+}
+.card-number {
+    & p {
+        font-size: 16px !important;
     }
+}
+.card-fron-details-name-exp {
+    font-size: 10px !important;
+}
+.card-back .card-back-clone .card-cvc {
+    font-size: 10px;
+    right: 34px;
+}
 }
diff --git a/css/style.css b/css/style.css
@@ -19,6 +19,7 @@ body {
     & .left-side {
         width: 33.33%;
         height: 100vh;
+        padding: 4px;
         background-image: url("/images/bg-main-desktop.png");
         background-size: cover;
         position: relative;
@@ -252,3 +253,14 @@ body {
         }
     }
 }
+
+@keyframes slide-up {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
diff --git a/index.html b/index.html
@@ -63,18 +63,17 @@
         <section class="form-main">
           <div class=" form-base"><label for="#">CARDHOLDER NAME</label><input id="cardholder" type="text" placeholder="e.g. Jane Appleseed" maxlength="30"></div>
           <div class=" form-base"><label for="#">CARD NUMBER</label><input id="card-number" type="text" placeholder="e.g.1234 5678 9123 0000" maxlength="19">
-            <p class="errorMessage" id="cardNumberFormatError">Wrong format, number only</p>
-            <p class="errorMessage" id="cardNumberEmptyError">Can't be blank</p>
+            <p class="errorMessage" id="cardNumberError"></p>
           </div>
           <div class="namedate-part">
             <div class="namedate-part-left">
               <div><label for="#">EXP. DATE</label><input type="text" placeholder="MM" maxlength="2">
-                <p class="errorMessage" id="mounthYearError">Can't be blank</p>
+                <p class="errorMessage" id="mounthYearError"></p>
               </div>
               <div><label for="#">(MM/YY)</label><input type="text" placeholder="YY" maxlength="2"></div>
             </div>
             <div class="namedate-part-right"><label for="#">CVC</label><input type="text" placeholder="e.g. 123" maxlength="3">
-              <p class="errorMessage" id="cardCvcError">Can't be blank</p>
+              <p class="errorMessage" id="cardCvcError"></p>
             </div>
           </div>
           <div class="button" id="confirmButton"><button>Confirm</button></div>