price display can be seen

src/front/pages/offers.js

@@ -3,6 +3,66 @@ const PublishOfferButton = require('../components/PublishOfferButton');
 const BuyOrSellButtonGroup = require('../components/BuyOrSellButtonGroup');
 const PremiumSelector = require('../components/PremiumSelector');
 
+class PriceDisplay {
+  constructor(
+    {parentElement,
+    id,
+    premiumProvidingCallback,
+    priceProvidingCallback}
+  ) {
+    this.element = null;
+    this.parentElement = parentElement;
+    this.id = id;
+    this.premiumProvidingCallback = premiumProvidingCallback;
+    this.priceProvidingCallback = priceProvidingCallback;
+  }
+
+  render() {
+
+    const marketPrice = this.priceProvidingCallback()
+    const marketPriceString = formatNumberWithSpaces(marketPrice);
+    const offerPriceString = formatNumberWithSpaces(
+      Math.round(marketPrice * (
+        1 + this.premiumProvidingCallback()
+      ))
+    );
+
+    const container = document.createElement("div");
+    container.id = "premium-price-display-area";
+    
+    const offerParagraph = document.createElement("p");
+    offerParagraph.id = "offer-price-paragraph";
+    offerParagraph.textContent = "Tu precio: ";
+    
+    const offerSpan = document.createElement("span");
+    offerSpan.id = "offer-price";
+    offerSpan.textContent = offerPriceString;
+    
+    offerParagraph.appendChild(offerSpan);
+    offerParagraph.append("€/BTC");
+    
+    const marketParagraph = document.createElement("p");
+    marketParagraph.id = "market-price-paragraph";
+    marketParagraph.textContent = "(Precio mercado: ";
+    
+    const marketSpan = document.createElement("span");
+    marketSpan.id = "market-price";
+    marketSpan.textContent = marketPriceString;
+    
+    marketParagraph.appendChild(marketSpan);
+    marketParagraph.append("€/BTC)");
+    
+    container.appendChild(offerParagraph);
+    container.appendChild(marketParagraph);
+
+    this.element = container;
+    this.parentElement.appendChild(this.element);
+  
+  }
+
+  update() {}
+}
+
 function offersPage() {
   const publishOfferButton = new PublishOfferButton({
     parentElement: document.getElementById('submit-button-area'),
@@ -27,6 +87,16 @@ function offersPage() {
   });
   premiumSelector.render();
 
+  const priceDisplay = new PriceDisplay(
+    {
+      parentElement: document.getElementById('premium-content-area'),
+      id: 'premium-price-display-area',
+      premiumProvidingCallback: () => {return 0.02},
+      priceProvidingCallback: () => {return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000)}
+    }
+  )
+  priceDisplay.render();
+
   // -----------
   const navbuttonHome = document.getElementById('navbutton-home');
   const navbuttonOffers = document.getElementById('navbutton-offers');

src/views/offers.ejs

@@ -39,14 +39,6 @@
           <div id="premium-area" class="create-offer-step">
             <h3>Premium</h3>
             <div id="premium-content-area">
-              <div id="premium-price-display-area">
-                <p id="offer-price-paragraph">
-                  Tu precio: <span id="offer-price">90 000</span>€/BTC
-                </p>
-                <p id="market-price-paragraph">
-                  (Precio mercado: <span>83 000</span>€/BTC)
-                </p>
-              </div>
             </div>
           </div>
           <div id="amount-area" class="create-offer-step">