<div class='memory' id='memory'>
<div class='rectangle on' data-shape='rectangle'></div>
<div class='triangle on' data-shape='triangle'></div>
<div class='square on' data-shape='square'></div>
<div class='drop on' data-shape='drop'></div>
<div class='drop on' data-shape='drop'></div>
<div class='rectangle on' data-shape='rectangle'></div>
<div class='square on' data-shape='square'></div>
<div class='round on' data-shape='round'></div>
<div class='triangle on' data-shape='triangle'></div>
<div class='round on' data-shape='round'></div>
</div>
body{
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.memory{
display: flex;
width: 700px;
margin: 10x;
flex-wrap: wrap;
&.off{
pointer-events: none;
}
> div{
display: flex;
width: calc(20% - 30px);
padding: 20px 0;
align-items: center;
justify-content: center;
margin: 15px;
background:
linear-gradient(135deg, #f7f2ea 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #f7f2ea 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #f7f2ea 25%, transparent 25%),
linear-gradient(45deg, #f7f2ea 25%, transparent 25%);
background-size: 40px 40px;
background-color: #4b797661;
cursor: pointer;
box-shadow: 0 29px 35px rgb(64, 64, 64, 0.2);
transition: 0.3s ease-in-out;
&:before{
content: '';
display: block;
opacity: 0;
}
&.on, &.first, &.done{
background: #fff;
box-shadow: none;
transform: translate3d(0,-10px,0);
&:before{
opacity: 1;
}
}
}
}
.rectangle{
&:before{
width: 30px;
height: 50px;
border: 10px solid #EC8D28;
}
}
.triangle{
&:before{
width: 0;
height: 0;
border-style: solid;
border-width: 37.5px 0 37.5px 65px;
border-color: transparent transparent transparent #DF622D;
}
}
.square{
&:before{
width: 65px;
height: 65px;
background: #F8BA41;
}
}
.drop{
&:before{
width: 65px;
height: 65px;
background: #65A3DA;
border-radius: 50%;
}
}
.round{
&:before{
width: 45px;
height: 45px;
border: 10px solid #4D917E;
border-radius: 50%;
}
}
View Compiled
const memory = document.getElementById('memory');
const cards = memory.querySelectorAll('div');
let active;
cards.forEach(function(elt, i){
setTimeout(() => { elt.classList.remove('on'); }, 500+i*50);
elt.addEventListener('click', () => {
if( memory.classList.contains('off') ) return;
active = memory.querySelector('.on');
if( active ){
active.classList.add('first');
active.classList.remove('on');
elt.classList.add('on');
if( elt.getAttribute('data-shape') == active.getAttribute('data-shape') ){
elt.classList.add('done');
elt.classList.remove('on');
active.classList.add('done');
active.classList.remove('first');
}else{
memory.classList.add('off');
setTimeout(() => {
elt.classList.remove('on');
active.classList.remove('first');
memory.classList.remove('off');
}, 500);
}
}else{
elt.classList.add('on');
}
});
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.