<div id="root"></div>html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #10375c;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
justify-content: center;
}
.plus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.minus {
font-size: 60px;
color: #ffff;
cursor: pointer;
user-select: none;
}
.num {
margin: 0 50px 0 50px;
color: rgb(150, 911, 905);
font-size: 60px;
user-select: none;
}
const { useState } = React;
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div className="container">
<div className="plus" onClick={() => setCount(count + 1)}>
+
</div>
<div className="num">{count}</div>
<div
className="minus"
onClick={() => {
if (count > 0) {
setCount(count - 1);
}
}}
>
-
</div>
</div>
);
};
ReactDOM.render(<Counter />, document.querySelector("#root"));
External CSS
This Pen doesn't use any external CSS resources.