#Day45 of #100DaysCodeOfCode
Today happened to be a great day… Had a slow start but ended on a high note… 
I ticked some tasks on my list… had an awesome dinner at my favorite cafe of amazing hosts and got a cappuccino discount as well 
These people have come to know I am a coffee addict… 
(please don’t judge me on the photo, I told my husband I look like a clown but he said I don’t 
)
So today I finally managed to create the Flashcard Project. It does look the way as asked but Jetbrains did not clear it as something according to them is missing but I am super happy it’s finally working.
As I mentioned before, the trick was absolutely using correct height and weight of the quizcards and the questions. For adding animations, there had to be 3 divs, with a card div sandwiched between a front and a back div. So a sample code for 2 cards would look like:
<div class="card">
<div class="questions front"><p>How many Realm SDKs are there?</p></div>
<div class="questions back"><p>7: Java, Kotlin, .NET, Swift, Node, ReactNative, Dart</p></div>
</div>
<div class="card">
<div class="questions front">What are different components of MongoDB Realm</div>
<div class="questions back">3 components: Realm SDK, Realm Sync, Application Services</div>
</div>
The transformation and transition code on these cards would look like (provided flex layout is applied to card and other divs) :
.card {
transition: 2s ease;
transform-style: preserve-3d;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
The complete project can be seen here:
https://hennasingh.github.io/RealmQuizCards/src/index.html
Did you know: I spent 15 minutes deciding the background 
Things I need to fix:
- Adjust the layout based on the screen size.
That is all for today…