Flashcard Site – Update 2

Back to the blog

So now I'm into version 0.2.2. After getting through my first goal of establishing the basic concept pretty smoothly, the next big hurdle was a double: doing the hiding/showing of the sides with a single click and also creating code that was more scalable. As I was working on the script, I pretty quickly realized that my original method of having the scripting inline in the html was not going to work. Not only was it tied directly to a single button but there was no way to reuse the code meaning that for every card a script would need to be inline. So I began investigating different script options and found one that worked well for me.

The first step of making the code more reusable was to create two classes that determined if the text was "visible" or "hidden". It does this by changing the CSS visibility property to either visible or collapsed. This allows me to put this class on anything, a div, some text, whatever, and it'll hide or show the contents.

So here's the script, then I'll break down what's happening.

window.fnccardswap = function(cardfront, cardback) {
  if (document.getElementById(cardfront).getAttribute('class') === 'visible') {
    document.getElementById(cardfront).setAttribute('class', 'hidden');
    document.getElementById(cardback).setAttribute('class', 'visible');
   } else {
     document.getElementById(cardfront).setAttribute('class', 'visible');
     document.getElementById(cardback).setAttribute('class', 'hidden');
   };
  };

So the basic structure of the code is: if the div labeled "cardfront" has a class of "visible", set it to "hidden" and also set the class of the "cardback" div to "visible", but if "cardfront" does not have the class "visible", set the class to "visible" and set the class of the "cardback" to "hidden".

Each div has this code on it to trigger the function:

onmouseup="fnccardswap('cardfront1', 'cardback1')"

So it starts with the onmouseup which tells the page to run the fnccardswap function. The original version of the code for the trigger and also the script itself didn't have 'cardfront' or 'cardback'. It actually was specific to the first div which was labeled "cardfront1" and "cardfront2". So as I was trying to make the script reusable, I learned that you can create variables for the function and specify what would go into those variables. So what I mean is, if you look at the full script you can see how it starts off with "function(cardfront, cardback)". This is defining two variables and what they are called throughout the function. So then as you look through the function, you can see cardfront and cardback listed. If the function was going to directly connect to a specific element, instead of a variable, the function at top would just have empty parenthesis () and you'd see quotes around each of the cardfront mentions ('cardfront1'). So if you look at the div trigger again you see that on the mouseup it will run the function: fcncardswap and in the parenthesis it defines which two elements will be referenced by the two variables in the function. In this case, 'cardfront1' will be passed to the cardfront variable.

So it's a good start. I'm reusing code for efficiency, the goal of having the card front and back swapping was met and I'm off to a solid start.

See the Pen Flashcards v0.2.2 by Rob Lahoda (@rlahoda) on CodePen.

Back to the blog