11 March, 2016
Flashcard Site – Update 1
My next update for the flashcard site is up. I’m calling it version 0.2.1 because the first version was really just the styling and layout. This one introduces actual interactivity. The first goal was to add in the basic ability to hide and show each side of the card. I did some searching around and found that I can use a button to change the CSS visibility style value applied to the text in the div. So to just achieve the basic functionality I was looking for, I created 4 buttons. Each button changed the visibility to either visible or collapse for either the front or the back text of the div.
Here you can see the code for the “Hide Front” button. You can see there’s the click detection: “onclick” then it looks for the element based on the ID, in this case it’s “cardfront1”. Then it changes the style visibility to “collapse”.
<input type="button" value="Hide Front" onclick="document.getElementById('cardfront1').style.visibility='collapse'">