I'am trying to build up the site, and I had a problem with JS function. So the question is, do you have any thoughts about improving this JS fragment for work with different ID's (means If I click on button the exactly card will flip (the site will contains probably 10 cards)), pls help. Thanks for you attention
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('flip-card-btn-turn-to-back1').onclick = function() {
document.getElementById('flip-card1').classList.toggle('do-flip');
};
document.getElementById('flip-card-btn-turn-to-front1').onclick = function() {
document.getElementById('flip-card1').classList.toggle('do-flip');
};
document.getElementById('flip-card-btn-turn-to-back2').onclick = function() {
document.getElementById('flip-card2').classList.toggle('do-flip');
};
document.getElementById('flip-card-btn-turn-to-front2').onclick = function() {
document.getElementById('flip-card2').classList.toggle('do-flip');
};
});.flip-card-3D-wrapper {
width: 55vw;
height: 50vh;
max-width: 300px;
position: relative;
-o-perspective: 900px;
-webkit-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
margin: auto;
}
#flip-card1,
#flip-card2 {
width: 100%;
height: 100%;
text-align: left;
position: relative;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
#flip-card-btn-turn-to-back1,
#flip-card-btn-turn-to-front1,
#flip-card-btn-turn-to-back2,
#flip-card-btn-turn-to-front2 {
background: transparent;
font-size: 14pt;
position: absolute;
bottom: 0;
right: 0;
left: 0;
text-align: center;
border: 0;
border-top: 3px solid white;
}
#flip-card1 .flip-card-front1,
#flip-card1 .flip-card-back1,
#flip-card2 .flip-card-front2,
#flip-card2 .flip-card-back2 {
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
-webkit-box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
-moz-box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
box-shadow: 5px 6px 32px 2px rgba(133, 133, 133, 0.71);
}
#flip-card1 .flip-card-front1,
#flip-card2 .flip-card-front2 {
background: transparent;
}
#flip-card1 .flip-card-back1,
#flip-card2 .flip-card-back2 {
background: transparent;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#flip-card1 .flip-card-front1 p,
#flip-card1 .flip-card-back1 p,
#flip-card2 .flip-card-front2 p,
#flip-card2 .flip-card-back2 p {
color: white;
display: block;
position: relative;
font-size: 400%;
text-align: left;
font-family: inherit;
}<div class="w-90 col-md-12 p-lg-5">
<div class="card-group">
<div class="card border-0" style="background-color: transparent;">
<div class="card-body">
<div class="flip-card-3D-wrapper">
<div id="flip-card1">
<div class="flip-card-front1">
<p>front</p><button id="flip-card-btn-turn-to-back1">back</button></div>
<div class="flip-card-back1">
<p>Back</p>
<button id="flip-card-btn-turn-to-front1">front</button>
</div>
</div>
</div>
</div>
</div>
<div class="card border-0" style="background-color: transparent;">
<div class="card-body" style="border-left: solid; border-right: solid">
<div class="flip-card-3D-wrapper">
<div id="flip-card2">
<div class="flip-card-front2">
<p>front</p><button id="flip-card-btn-turn-
to-back2">back</button></div>
<div class="flip-card-back2">
<p>Back</p>
<button id="flip-card-btn-turn-to-front2">front</button>
</div </div>
</div>
</div>I have some doubts about the structure of the HTML, but for your question, an elegant solution may be this.
Identify your buttons with single class instead of different id
<div class="w-90 col-md-12 p-lg-5">
<div class="card-group">
<div class="card border-0" style="background-color: transparent;">
<div class="card-body">
<div class="flip-card-3D-wrapper">
<div id="flip-card1">
<div class="flip-card-front1">
<p>front</p>
<button class="flip-card-btn">back</button>
</div>
<div class="flip-card-back1">
<p>Back</p>
<button class="flip-card-btn">front</button>
</div>
</div>
</div>
</div>
</div>
<div class="card border-0" style="background-color: transparent;">
<div class="card-body" style="border-left: solid; border-right: solid">
<div class="flip-card-3D-wrapper">
<div id="flip-card2">
<div class="flip-card-front2">
<p>front</p>
<button class="flip-card-btn">back</button>
</div>
<div class="flip-card-back2">
<p>Back</p>
<button class="flip-card-btn">front</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Obviously change your CSS to
.flip-card-3D-wrapper {
width: 55vw;
height: 50vh;
max-width: 300px;
position: relative;
-o-perspective: 900px;
-webkit-perspective: 900px;
-ms-perspective: 900px;
perspective: 900px;
margin: auto;
}
#flip-card1, #flip-card2 {
width: 100%;
height: 100%;
text-align: left;
position: relative;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-o-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.do-flip {
-o-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.flip-card-btn {
background: transparent;
font-size: 14pt;
position:absolute;
bottom:0;
right:0;
left:0;
text-align:center;
border: 0;
border-top: 3px solid white;
}
#flip-card1 .flip-card-front1, #flip-card1 .flip-card-back1, #flip-card2 .flip-card-front2, #flip-card2 .flip-card-back2{
width: 100%;
height: 100%;
position: absolute;
-o-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
-webkit-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
-moz-box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
box-shadow: 5px 6px 32px 2px rgba(133,133,133,0.71);
}
#flip-card1 .flip-card-front1, #flip-card2 .flip-card-front2 {
background: transparent;
}
#flip-card1 .flip-card-back1, #flip-card2 .flip-card-back2 {
background: transparent;
-o-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#flip-card1 .flip-card-front1 p, #flip-card1 .flip-card-back1 p, #flip-card2 .flip-card-front2 p, #flip-card2 .flip-card-back2 p {
color: white;
display: block;
position: relative;
font-size: 400%;
text-align: left;
font-family: inherit;
}
And finally use a simple javascript code to flip your cards
document.addEventListener('DOMContentLoaded', function() {
const list = document.getElementsByClassName('flip-card-btn');
[].forEach.call(list, function(e) {
e.onclick = function() {
document.getElementById(this.parentNode.parentNode.id).classList.toggle('do-flip');
}
});
});
Check this sample