Use textContent instead of hard code in html

Mohammadflht · Mar 7, 2024 · 85b192a · 85b192a
1 parent a0e0d82
commit 85b192a
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/app.js b/app.js
@@ -159,12 +159,14 @@ confirmButton.addEventListener('click', function() {
     }
     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";

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>