button group and default value

src/public/css/seca.css

@@ -27,6 +27,39 @@ h1 {
 .clickable {
   cursor: pointer;
 }
+
+.button-group button {
+  border: 0;
+  padding: 1em;
+  cursor: pointer;
+}
+
+.button-group button.selected {
+  border: 0;
+  padding: 1em;
+  background: #e1c300;
+}
+
+.button-group button.unselected {
+  border: 0;
+  padding: 1em;
+  background: #e1c300;
+  font-weight: bold;
+  color: white;
+}
+
+.button-group button:first-of-type {
+  border-top-left-radius: 1em;
+  border-bottom-left-radius: 1em;
+  margin-right: 0;
+}
+
+.button-group button:last-of-type {
+  border-top-right-radius: 1em;
+  border-bottom-right-radius: 1em;
+  margin-left: 0;
+}
+
 .over-background {
   background-color: white;
   border-radius: 1vw;

src/public/javascript/offers.js

@@ -4,6 +4,17 @@ const buttonStartCreateOffer = document.getElementById(
 const closeOfferControls = document.getElementById('close-order-controls-x');
 const createOfferControls = document.getElementById('create-offer-controls');
 
+const buyOrSellButtonGroup = document.getElementById(
+  'button-group-buy-or-sell'
+);
+const buyOrSellButtons = buyOrSellButtonGroup.querySelectorAll('button');
+
+function toggleCreateOfferControls() {
+  createOfferControls.style.display =
+    createOfferControls.style.display === 'block' ? 'none' : 'block';
+  buttonStartCreateOffer.disabled = !buttonStartCreateOffer.disabled;
+}
+
 buttonStartCreateOffer.addEventListener('click', () => {
   toggleCreateOfferControls();
 });
@@ -11,9 +22,3 @@ buttonStartCreateOffer.addEventListener('click', () => {
 closeOfferControls.addEventListener('click', () => {
   toggleCreateOfferControls();
 });
-
-function toggleCreateOfferControls() {
-  createOfferControls.style.display =
-    createOfferControls.style.display === 'block' ? 'none' : 'block';
-  buttonStartCreateOffer.disabled = !buttonStartCreateOffer.disabled;
-}

src/views/offers.ejs

@@ -15,10 +15,17 @@
         Crear nueva oferta
       </button>
       <div id="create-offer-controls" style="display: none">
-        <img id="close-order-controls-x" src="/img/circle-xmark.svg" class="clickable" width="5%">
+        <img
+          id="close-order-controls-x"
+          src="/img/circle-xmark.svg"
+          class="clickable"
+          width="5%"
+        />
         <p>Añade los detalles de tu oferta</p>
-        <button>Quiero comprar Bitcoin</button>
-        <button>Quiero vender Bitcoin</button>
+        <div id="button-group-buy-or-sell" class="button-group">
+          <button class="selected">Quiero comprar Bitcoin</button
+          ><button>Quiero vender Bitcoin</button>
+        </div>
         <button id="button-submit-offer" class="button-primary" disabled>
           Publicar oferta
         </button>