money amount

src/public/css/seca.css

@@ -28,6 +28,18 @@ h1 {
   cursor: pointer;
 }
 
+.money-input {
+  text-align: end;
+}
+
+.input-is-valid {
+  border: 1px solid green;
+}
+
+.input-is-invalid {
+  border: 2px solid red;
+}
+
 .button-group button {
   border: 0;
   padding: 1em;

src/public/javascript/offers.js

@@ -18,6 +18,8 @@ const buttonDecreasePremium = document.getElementById(
   'button-decrease-premium'
 );
 
+const eurAmountInput = document.getElementById('input-eur-amount');
+
 function toggleCreateOfferControls() {
   createOfferControls.style.display =
     createOfferControls.style.display === 'block' ? 'none' : 'block';
@@ -51,6 +53,23 @@ function toggleBuyOrSellButtonGroup() {
   });
 }
 
+function validateAndFormatEurAmountInput() {
+  const eurAmountFieldValue = eurAmountInput.value;
+  const regularExpression = /€?\s?(\d+[\.,]?\d*)\s?€?/;
+  const matchResult = eurAmountFieldValue.match(regularExpression);
+
+  eurAmountInput.classList.remove('input-is-valid', 'input-is-invalid');
+  if (matchResult) {
+    const numberString = matchResult[1];
+    const cleanInputNumber = parseInt(numberString);
+    eurAmountInput.value = `${cleanInputNumber} €`;
+    eurAmountInput.classList.add('input-is-valid');
+    return;
+  }
+
+  eurAmountInput.classList.add('input-is-invalid');
+}
+
 buyOrSellButtons.forEach((button) => {
   button.addEventListener('click', () => {
     toggleBuyOrSellButtonGroup();
@@ -64,3 +83,7 @@ buttonIncreasePremium.addEventListener('click', () => {
 buttonDecreasePremium.addEventListener('click', () => {
   modifyPremiumValue(-1);
 });
+
+eurAmountInput.addEventListener('blur', () => {
+  validateAndFormatEurAmountInput();
+});

src/views/offers.ejs

@@ -41,7 +41,7 @@
         </div>
         <div id="amount-area">
           <p>¿Cuánto?</p>
-          <input type="number">
+          <input id="input-eur-amount" type="text" required class="money-input">
         </div>
         <div id="bitcoin-methods-area">
           <p>¿Cómo se mueve el Bitcoin?</p>