<div class="wrapper">
<button class="square" id="1">
Button 1
</button>
<button class="square" id="2">
Button 2
</button>
<button class="square" id="3">
Button 3
</button>
<button class="square" id="4">
Button 4
</button>
<button class="square" id="5">
Button 5
</button>
<button class="square" id="6">
Button 6
</button>
</div>
*,
*::after,
*::before {
font-family: sans-serif;
margin: 0px;
padding: 0px;
}
html,
body {
width: 100vw;
height: 100vh;
}
.wrapper,
body {
display: flex;
align-items: center;
justify-content: center;
}
.wrapper {
gap: 12px;
}
button.square {
width: 70px;
height: 70px;
padding: 12px;
background-color: #ddd;
color: #000;
border-radius: 11px;
cursor: pointer;
transition: all .4s cubic-bezier(0.215, 0.610, 0.355, 1);
}
.button.square.reverse {
transition: all 12s cubic-bezier(0.215, 0.610, 0.355, 1);
}
button.square:hover {
border: 8px;
}
const buttons = document.querySelectorAll(".square");
for (const button of buttons) {
button.addEventListener("click", UpdateSquares);
}
let array_sqr = [];
function UpdateSquares(event) {
const btn = event.target;
btn.style.backgroundColor = 'green';
array_sqr.push(btn.id);
if (array_sqr.length == 6) {
ReverseSquares();
}
}
function ReverseSquares() {
array_sqr.reverse();
for (const id of array_sqr) {
const reverse_btn = document.getElementById(id);
// Remove the color
reverse_btn.style.backgroundColor = 'white';
/* Also clear the array */
array_sqr = [];
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.