<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;
}
.minus {
font-size: 60px;
color: #ffff;
}
.num {
margin: 0 50px 0 50px;
color: lighten(red, 20%);
font-size: 60px;
}
View Compiled
const counter = (
<div className="container">
<div className="plus">+</div>
<div className="num">0</div>
<div className="minus">-</div>
</div>
);
ReactDOM.render(counter, document.querySelector("#root"));
const plus = document.querySelector(".plus");
let num = document.querySelector(".num");
const minus = document.querySelector(".minus");
const plusNum = () => (num.innerHTML = Number(num.textContent) + 1);
const minusNum = () => {
if (Number(num.textContent) > 0) {
num.innerHTML = Number(num.textContent) - 1;
}
};
plus.addEventListener("click", plusNum);
minus.addEventListener("click", minusNum);
View Compiled
This Pen doesn't use any external CSS resources.