<div id="popit" class="popit"></div>
body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
.popit {
align-items: center;
box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
-8px -8px 12px 0 rgba(255, 255, 255, 0.3);
border-radius: 25px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.circle {
display: inline-block;
cursor: pointer;
width: 14vw;
height: 14vw;
max-width: 80px;
max-height: 80px;
margin: 3px;
border-radius: 50%;
transition: 0.5s;
box-shadow: inset 8px 8px 8px rgba(255, 255, 255, 0.3),
inset -8px -8px 8px rgba(0, 0, 0, 0.25);
/* Убираем выделение при нажатии с мобилки */
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-tap-highlight-color: transparent;
}
.pressed {
box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.25),
inset -8px -8px 8px rgba(255, 255, 255, 0.3);
}
.r {
background-color: #f23c39;
}
.o {
background-color: #fb8f17;
}
.y {
background-color: #fcf620;
}
.g {
background-color: #69d437;
}
.b {
background-color: #3cc1f6;
}
.p {
background-color: #bca3f6;
}
const colors = ["r", "o", "y", "g", "b", "p"];
const popit = document.getElementById("popit");
for (let color of colors) {
const row = document.createElement("div");
row.className = color;
for (let i = 0; i < 5; i++) {
const pop = document.createElement("div");
pop.className = "circle " + color;
row.appendChild(pop);
}
popit.appendChild(row);
}
const sound = new Audio(
"https://freesound.org/data/previews/399/399934_1676145-lq.mp3"
);
popit.onclick = function (event) {
const target = event.target;
if (!target.matches(".circle")) {
return;
}
sound.pause();
sound.currentTime = 0;
sound.play();
if ("vibrate" in navigator) {
navigator.vibrate(100);
}
target.classList.toggle("pressed");
};
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.