<main><div>
<button id="undo">Undo</button>
<button id="redo">Redo</button>
 </div>
<div class="counter">
  <div>
<button id="subtract1">-1</button>
<button id="subtract10">-10</button>
<button id="subtract100">-100</button>
  </div>
  <p id="counterText">0</p>
  <div>
<button id="add1">+1</button>
<button id="add10">+10</button>
<button id="add100">+100</button>
  </div>
</div>
<div class="box-history">
  <h3> History</h3>
  <p id="historyBox"></p>
</div>
</main>
body{
  display:flex;
  align-items: center;
  justify-content: center;
}
main{
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}

.counter{
  display:flex;
 align-items:center;
 justify-content:space-evenly;
 width:20em;
}
button {
  width: 6em;
  padding: 1em 0.5em;
  border-radius: 5px;
  background: rgb(46, 46, 198);
  color: white;
  border: 1px solid white;
  cursor: pointer;
}
button:hover {
  background: rgb(38, 38, 162);
}
button:active {
  background: rgb(46, 46, 198);
}
#undo {
  background: rgb(255, 82, 82);
}
#undo:hover {
  background: rgb(205, 65, 65);
}
#undo:active {
  background: rgb(255, 82, 82);
}
#redo {
  background: rgb(48, 167, 91);
}
#redo:hover {
  background: rgb(42, 146, 80);
}
#redo:active {
  background: rgb(48, 167, 91);
}

#counterText {
  margin: 1em;
}

.counter > div {
  display: flex;
}

.box-history{
  text-align:center
}
#historyBox {
  display: flex;
  flex-direction: column-reverse;
  width: 16em;
  height: 10em;
  border: 1px solid black;
  overflow-y: scroll;
}

@media (max-width: 700px) {
  .box-counter {
    flex-direction: column;
  }
}

let counter=0;
let counterText=document.getElementById('counterText');
let history=[0];
let historyBox=document.getElementById('historyBox')
const handleCounterDecrementChange=()=>{
  counter-=event.target.innerText.slice(1)-"";
  counterText.innerText=counter;
  history.push(counter);
 let historyText=document.createElement("p");  historyText.innerText=`${event.target.innerText} ${history[history.length-2]}->${history[history.length-1]}`;
  historyBox.appendChild(historyText);
}
const handleCounterIncrementChange=()=>{
  console.log(event.target.innerText.slice(1))
  counter+=event.target.innerText.slice(1)-"";
  counterText.innerText=counter;
 history.push(counter); 
 let historyText=document.createElement("p"); historyText.innerText=`${event.target.innerText} ${history[history.length-2]}->${history[history.length-1]}`;
  historyBox.appendChild(historyText);
}
let subtract1Button= document.getElementById('subtract1');
subtract1Button.addEventListener("click",
                handleCounterDecrementChange);
let subtract10Button= document.getElementById('subtract10');
subtract10Button.addEventListener("click",
               handleCounterDecrementChange);
let subtract100Button= document.getElementById('subtract100');
subtract100Button.addEventListener("click",
                handleCounterDecrementChange);

let add1Button= document.getElementById('add1');
add1Button.addEventListener("click",
                handleCounterIncrementChange);
let add10Button= document.getElementById('add10');
add10Button.addEventListener("click",
                handleCounterIncrementChange);
let add100Button= document.getElementById('add100');
add100Button.addEventListener("click",
                handleCounterIncrementChange);

let undoTexts=[];
let clickUndo=1;
const handleUndo=()=>{
  if(history[history.length-clickUndo]==0)
    return false;
  clickUndo++;
   // const x=history.pop();
  // console.log(x)
  counter=history[history.length-clickUndo];
  counterText.innerText=counter;
  undoTexts.push(historyBox.lastChild.innerText);
  historyBox.lastChild.remove();
}

const handleRedo=()=>{
  if(clickUndo==1)
    return false;
  clickUndo--;
  counter=history[history.length-clickUndo];
  counterText.innerText=counter;
  let historyText = document.createElement("p");
  historyText.innerText = undoTexts[undoTexts.length - 1];
  
  historyBox.appendChild(historyText);

  undoTexts.pop();
}

let undoButton=document.getElementById("undo");

undoButton.addEventListener("click", handleUndo);

let redoButton=document.getElementById("redo");

redoButton.addEventListener("click", handleRedo);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.