premium control

src/public/javascript/offers.js

@@ -9,12 +9,30 @@ const buyOrSellButtonGroup = document.getElementById(
 );
 const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button');
 
+const premiumValue = document.getElementById('premium-value');
+const buttonIncreasePremium = document.getElementById(
+  'button-increase-premium'
+);
+
+const buttonDecreasePremium = document.getElementById(
+  'button-decrease-premium'
+);
+
 function toggleCreateOfferControls() {
   createOfferControls.style.display =
     createOfferControls.style.display === 'block' ? 'none' : 'block';
   buttonStartCreateOffer.disabled = !buttonStartCreateOffer.disabled;
 }
 
+function modifyPremiumValue(delta) {
+  const regexExpression = /-*\d+/;
+  const numValue = parseInt(premiumValue.innerText.match(regexExpression)[0]);
+
+  const newValue = `${numValue + delta}%`;
+
+  premiumValue.innerText = newValue;
+}
+
 buttonStartCreateOffer.addEventListener('click', () => {
   toggleCreateOfferControls();
 });
@@ -38,3 +56,11 @@ buyOrSellButtons.forEach((button) => {
     toggleBuyOrSellButtonGroup();
   });
 });
+
+buttonIncreasePremium.addEventListener('click', () => {
+  modifyPremiumValue(1);
+});
+
+buttonDecreasePremium.addEventListener('click', () => {
+  modifyPremiumValue(-1);
+});

src/views/offers.ejs

@@ -33,6 +33,12 @@
             Quiero vender Bitcoin
           </button>
         </div>
+        <div id="premium-area">
+          <p>Premium</p>
+          <div id="premium-value">0%</div>
+          <button id="button-increase-premium">+</button
+          ><button id="button-decrease-premium">-</button>
+        </div>
         <button id="button-submit-offer" class="button-primary" disabled>
           Publicar oferta
         </button>