<section class="counter-container">
  <div class="counter-section">
    <button onclick="decrementCounter()" class="btn">-</button>
    <div id="counter_display"></div>
    <button onclick="incrementCounter()" class="btn">+</button>
  </div>

</section>

.btn {
  background-color: #03A84E; /* Green */
  border: none;
  color: white;
  padding: 10px 0px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  width: 45px;
  height:45px;
  margin: 15px
}
.counter-section{
  display:flex;
  justify-content:center;
align-items:center;

}

.counter-container{
  background-color:#FEF8F5;
  height:100vh;

}
.display-text{
  font-size:20px;
  text-align:center;
}

const displayCounter = document.getElementById("counter_display");

const state = {
  count: 0
};


const counter = (count) => {
  return `<p class="display-text">${count}</span></p>`;
};

function renderCount() {
  displayCounter.innerHTML = counter(state.count);
}

// Update methods

function incrementCounter() {
  let newCount = state.count + 1;
  state.count = newCount;

  renderCount();
};

function decrementCounter() {
  let newCount = state.count + 1;
  state.count = newCount;

  renderCount();
}


renderCount();