<div id="app"></div>
.undo-redo-btns{
display:flex;
gap:1em;
justify-content:center;
margin-bottom:1em;
}
.counter-section{
display:flex;
gap:1em;
justify-content:center;
}
/*
* https://frontendeval.com/questions/undoable-counter
*
* Create a simple counter with undo/redo functionality
*/
import {useState} from "https://esm.sh/react";
const App = () => {
const [count,setCount]=useState(0);
return (
<div>
<div className="undo-redo-btns">
<button>Undo</button>
<button>Redo</button>
</div>
<div className="counter-section">
<button>-100</button>
<button>-10</button>
<button>-1</button>
<p></p>
<button>+100</button>
<button>+10</button>
<button>+1</button>
</div>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'));
View Compiled
This Pen doesn't use any external CSS resources.