Coding Challenge SOLUTION #8 - Flash Cards

Key Takeaways

okay then so the first thing I'd like to do is attach an event listener to this card div right here a click event listener so that when we click on that card it toggles another class which will be flipped and then we can use that class to style the card to show either the front or the back later so let me go to the index.js file to do this we need a constant we'll call it card and we set it equal to documents dot oh we need to spell this correctly documents dot query select all and this is going to be the div with a class of card okay so let's take that card and add an event listener to it which will be a click event and when that occurs we fire a function and inside that function we just want to take our card get the class list and we want to toggle a particular class and that will be flipped so let's check this out in a browser if I inspect this we should see if I click on it see this element over here this one if I click on this it gets a class of flipped yep and if I click again it takes that class away awesome so now we have that conditional class and we can go ahead and start styling the card based on that class first of all I want to apply some very very simple Styles so I've got this little comment down here for the solution and what I'd like to do first of all is just style the front and back of the card so let's go back over here and do that so what we'll do is grab both the front and the back at once and star them together because there's going to be a lot of common styles for these the first thing we want to do is position this absolutely so position absolute and that's absolutely relative to the parent element card because that's position relative Now the default values for its position are going to be 0 and 0 in the top left we don't have to manually type those out so next I will say the width of this is 100 of the parent and the height is 100 of the parent as well so 300 pixels for both then what I'll do is say the background color of the front and the back is going to be 222 which is a dark gray will also apply a border radius which is going to be 8 pixels to soften those Corners a border as well which is going to be two pixels solid and white so FFF and then after that the cursor is going to be pointer so if we take a look at this should start to look a little bit better awesome now I want this text to appear down here and by the way we're only seeing one of the cards now well we're just seeing the back of the card and not the front and the reason we're just seeing the back is because they're on top of each other now because we positioned them both absolutely so they stack on top of each other and because this comes after this one in the document this one has a higher stacking order by default so it shows on top of the front anyway what I'd like to do is position the text for both of these in the middle down here now there's a little trick we can use to do this and that is to display these as Flex first of all because then we can say that the flex Direction is going to be in the column so going down and then we can use justify content to say Center and that will put it in the center of the card so if we take a look now we can see it's in the middle awesome all right so now we've done that next I want to maybe show the front by default instead of the back now the way we're going to do this is by rotating the back so that we can't see it and instead we see the front so let me quickly show you this I'm going to come down here and say okay I want to grab now just the back and the color of this first of all of this text will be like a golden color just to distinguish it a little bit so DB and then C A and then six C save that in preview now we can see we've got a gold color for this text then I will say transform and it will be a rotate around the y-axis now the y-axis is the axis going up and down so this way like that so if we rotate around that it's going to look like it's flipping so for example if I rotate it by 25 degrees you'll see a very slight flip it actually just looks like it's getting squashed but it is flipping around that y-axis but you can see the front of the card underneath it now so what we need to do is take it all the way to 180 degrees to turn it around now when we do that look at what happens well we just see the back of the back of the card if that makes sense so we see Ninja fledgling but a mirror image of this because it's flipped 180 degrees so essentially we're seeing the back of the back does that make sense and we don't want to see the back of the back now what we can do is hide this using a property called back face visibility so if we set that to Hidden whenever an element is rotated 180 degrees then we don't see it because it's hidden when we see the back face so now we should just see yep the front underneath because this is turned 180 degrees if we change this to zero again then because we're not showing the back it will be visible but we are showing the back when we say 180 degrees so it's hidden and we see the front of the card underneath awesome okay so now what I'd like to do is react to that conditional class remember when we click on this card we want to turn it around now if we take a look at this card when we click on this it's toggling that flipped class now we want to style it differently when we have that flipped class because we want to show the back of the card don't we that other promo code instead so what we're going to do is we're going to just paste in this and it says okay when the card has a class of flipped then I want to transform and it's going to rotate around the y direction the whole card this is so not just the front or back remember the back is already rotated 180 degrees so the whole card is going to be rotated by 180 degrees and also what I want to do is come up here and select the card itself even without the flipped class so all of the time and we want to apply a transition property to the transform which is what we just specified right here and we want it to be over 0.5 seconds and that's so it doesn't just rotate like a snap without any kind of Animation we want a transition so it looks nice over 0.5 seconds so let me save this and come back over here now watch what happens when I click on this well I click on that and now we just see the back of the front of the card now remember for the back of the card we said for back face visibility it's going to be hidden so when we rotate the back we don't see it however we don't do that on the front and we're not actually rotating the front when we click on the card we're rotating the card itself so even if we apply this to the front it wouldn't work and it's not going to work if we apply it to the card itself oops let me undo that if we took this thing right here and applied it to the card that's not going to work either because then we would only ever see the front of the card right so we can't do it right here either so the way we get around this is by using a property called transform style and we set that to preserve 3D and that will sort it out for us so now this should work and if we click on this we're going to see the back and then we see the front then we see the back and the front so this is working but it doesn't yet look fully 3D now the way we can combat this is by using a perspective property on whatever the parent of this element is now the parent of that element is the section right here so I could take the section and I could apply a property of perspective and we would set that to a number I like to use something around 900 pixels now if I save this when I click on this it's going to look a little more 3D because we have that perspective so click on it and that looks a little bit better right awesome it's all working now the bigger this number so if I do something like 5000 then the smaller the 3d effect is going to be and it's barely noticeable there still quite good but barely noticeable if I go up to ten thousand it's going to be less of an effect now if I go something really low like 100 it's going to be a really exaggerated 3d effect like that which we don't want to do so I like to go somewhere in the middle ground I like about 900 pixels and then we get that nice 3d effect awesome so there we go my friends that is the solution so hopefully you managed to do this as well it doesn't have to be the way that I did it it could have been entirely your own way if you've got a different way feel free to share your solution Down Below in the comments [Music]