diff --git a/src/public/css/seca.css b/src/public/css/seca.css index 6a84a26..7a13e11 100644 --- a/src/public/css/seca.css +++ b/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; diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js index 28b78eb..d8a6e0e 100644 --- a/src/public/javascript/offers.js +++ b/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(); +}); diff --git a/src/views/offers.ejs b/src/views/offers.ejs index ef604c6..205567b 100644 --- a/src/views/offers.ejs +++ b/src/views/offers.ejs @@ -41,7 +41,7 @@
¿Cuánto?
- +¿Cómo se mueve el Bitcoin?