In this task, we will add a power value to the cards. We will also create a Card object to get the original value back.
Before going into the core part, we will get the interface prepared.
There is not much to add in HTML. Add the power element inside the front face element, as shown in the following code:
<div class="front face"> <div class="power">100</div> </div>
Also, add some very basic CSS styling to define the power text, which is large and aligned in the center, as shown in the following code:
.card .power{
position: absolute;
width: 100%;
text-align: center;
bottom: 30px;
font-size: 2em;
}