How to Tally

     A thought hit me a few weeks ago while I was commuting: surely there must already exist a computer font (or plugin? or...malware?) that can render Arabic numerals (ie: 1,2,3...) as tally marks (ie: /,//,///). A few search engine pages later, I was proven wrong. At first I felt frustrated and stymied. Sad and down. Depressed. Resentful.
    Well, not really. But I honestly didn't get it. Why wasn't there already a font that could take a number (say, 42) and render it as a series of slashes, grouped into fives with bundling-lines, and single slashes for the "remainder."
    As can be the case with a lot of problem solving, saying the question out loud helped me better understand the problem. Of course there was no font to do computational equations for me: all it's supposed to do is style a Unicode value! But then, how was I supposed to display the tally marks I had in mind for my project (more on that in other posts)??!? If only I knew a programmer...

    Oh wait. Time to prove my worth!

    It was actually thanks to the very same internet (which told me there would be no ready made solution) that I discovered a path forward: CSS. Thanks to one helpful message board, I was reminded that one of the many ways CSS can style your text is to strike a line through it. So, the kernel of what would come next was there, but it had yet to "pop." But then it did! Once again, on the commute, it came to me. Side note: it's amazing what having time to let your mind wander can do for creative thinking.
    What came to me was a program, or really, a series of functions. Essentially, ones that would execute the steps described in the second paragraph. So, what would it need to do?

1) Receive an integer (any integer).
2) Obtain the quotient when dividing that number by 5 - and round it (down).
3) Obtain the value of the remainder.
4) Create a string of marks ("|" and "/" and "\" work well enough), to represent each group of 5 or 1.
5) Get CSS to render the strike through the line of four marks to create the distinct/easily-counted groups of five.

So...no problem?

Actually, once the concept was clear, fortunately the execution was relatively straightforward. Javascript (unsurprisingly) has built in methods for each of those steps:

1) User input - or even Math.random() for test cases
2) Use the / operator to divide that number by 5
3) Use the % operator to find the remainder when that number is divided by 5
4) Use a loop and += to construct a string of marks (||||||||||), and append them to the DOM
5) Render the different parts of the strings ("fives" and "ones") in different DOM elements - different enough so that CSS can specifically target the groups of five and apply the styling.

Fortunately for me - it worked! Seriously, it was such a distinct feeling of pride to be able to bring this idea from concept to execution. Without further ado, here is the code:

HTML:

<h1 class="marks" id="marks"><span class="fives"; id="5"></span>

<span id="1"></span></h1>

CSS:

.fives{

    text-decoration: line-through;

}

Javascript:

const 5 = document.getElementById("5");

const 1 = document.getElementById("1");

function tallyMark(count, ones, fives){

    console.log(count);

    let quotient = Math.floor(count/5);

    console.log(quotient);

    let remainder = (count%5);

    console.log(remainder);

    let tally = ""

    let tallies = ""

    fives.textContent = "";

    ones.textContent = "";

for(let i=0; i<quotient; i++){

    tallies += "||||  ";

}

for(let k=0; k<remainder; k++){

    tally += "|"

}

fives.append(tallies);

ones.append(tally);

}

Someday, when this is posted on a GitHub, you can say to yourself "man, I remember when..."
And then, someday, when I'm a rich and famous programmer, your friends whom you showed my GitHubRepo to can say "man, I remember when..."