Coding Challenge #8 - Flash Cards

Key Takeaways

all right then my friends so in this challenge what I'd like you to do is to create a flash card which spins around or rotates around when you click on it so you can see right here we have this card with some text on get 50 off net Ninja Pro when we click on this it's gonna spin around to show you the back of the card which has the promo code ninja fledgling when you click on it again it's gonna rotate back around to the front so this is the kind of effect I'd like you to try and do in this challenge now I have prepped and created some starter files for this Challenge and you can find them on the coding challenges repo I will leave this link down below the video to get the starter files go down to the branch drop down and you need to scroll right down to challenge 8 start and then right here you can see we've got three files the HTML file JavaScript and CSS so download these go to code and then go to download zip click on that it will download a zip folder just unzip that and open it up in a text editor so once you open up those data files something like this we have the HTML file right here which is a really really simple template just an H1 then a section down here which is all the stuff we're concerned with so inside the section tag we have a div with a class of card then inside that we have a div for the front with a classic front that's the front of the card content and then this is the back stuff right here with the class of back now you don't need to change the HTML one bit this is how it should look at the end according to my solution but if you want to change it that's absolutely fine there's no one set way of doing this you just approach this however way you want to but you don't have to change it so that's the HTML file we're linking to a styles.css file and also an index.js file as well now there will be a little bit of JavaScript involved just to listen to that click event and you can put that inside here empty at the minute the styles.css file that it's linked up to just has a few basic Styles we load in the pop-ins font family and we apply that right here to every element strip out the margin and padding of every element then for the body we give a background color of dark gray text aligned to the center a bit of padding and a text color of white then the card which is this thing right here this div we say the position is relative the width is 300 pixels height is 300 pixels a bit of margin top and bottom also left and right and then text align to the center so at the minute if we preview this it's going to look like this in the browser not much styling this is the front of the card this is the back but remember we only want to show one of those at a time so have a good go at this try and make it so this shows to begin with then when you click on the card it flips around and shows this on the back okay and again there are multiple ways of doing this I'm going to be posting my solution very soon