A Rose by any Other Name

When I first started learning basic HTML, I hated that I had to name everything. "What a waste of time," I thought. "Who cares if it's a < p > or a < div >?," I thought.

Man was I dumb.

Now, as I wade through the swamp of Javascript, I'm dropping < div >s and < p >s like I'm the freakin' Johnny Appleseed of HTML! And to date, my all-time favorite drop has to do with...

classList.toggle

"classList" itself is already pretty fascinating. According to MDN Web Docs,

"The Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list."

In OTHER words: calling classList on an element gives you access to 12 awesome methods that you can use to play around with the classes of that element.

Looking at the DOMTokenList proto, you'll see: add; contains; entries; forEach; itemkeys; remove; replace; supports; toString; toggle(!!!!), &values.

A little background. My project deals with the concept of a Mind Palace (also known as the "method of loci"). It's basically a memory technique that uses familiar spaces to attach lists of thing you want to remember.

Pick a place you know well, like your apartment/house. Mentally create a path from one end of the house to the other, and along the way, write down objects or spaces that don't change. These are known as Loci. In my case I would choose something like:

1) doorknob, 2) coatrack, 3) bookshelf, 4) mirror, 5) couch,
6) table, 7) window, 8) painting, 9) guitar, 10) lamp

Then, when you have a list you'd like to remember (like my 1000 nieces/nephews) you assign each of them to a Loci.

1) doorknob -Haley
2) coatrack -Derek
3) bookshelf -Torrie
4) mirror -Pepper
5) couch -Maya
6) table -Dillon
7) window -Julianna
8) painting -Jessa
9) guitar -Jarod
10) lamp -Leonora

"WHAT DOES THIS HAVE TO DO WITH CLASSLIST???"

I'm getting there, I swear.
So, my app needed 2 things. A word representation of both the Loci/their list items. And a visual view of the Palace.

I choose an aerial view of an apartment where the walls were black and the rooms/hallways were grey. The black room I created like this.

function loadRoom(){
  const rc = document.getElementById("RightContainer")

  for(let j=0; j< 20; j++){
    const tr = document.createElement("tr")

    tr.innerHTML = ""
    rc.append(tr)
    for(let i = 0; i < 20; i++){
      const td = document.createElement("td")
      td.setAttribute("class", "block firstColor")
      td.setAttribute("onclick", "changeColor(this)")
      td.innerHTML = ""
      tr.append(td)
    }
   }
  }

Using a nested for loop allowed me to create a black box where each table data had a class of "block", a class of "firstColor", and an eventlistener that triggered the function changeColor(tdObj).

function changeColor(tdObj){
  tdObj.classList.toggle("secondColor")
}

changeColor(tdObj) takes in an argument of an element (in this case a table data object) & calls classList and toggle on it. toggle CHANGES the name of the class ("firstColor") to another name ("secondColor").

In my CSS file, they look like this:

.firstColor{
  background-color: black;
}
.secondColor{
  background-color: grey;
}

And BOOM! Black goes to grey, or grey goes to black whenever you click on a small square of table data - allowing you to 'draw' an aerial view of your house that you can start attaching Loci to.

I know for experienced coders this probably seems small & funny, but it seriously blew my mind. :)

Comments

[Ben Sinclair]

toggle CHANGES the name of the class ("firstColor") to another name ("secondColor").

tdObj.classList.toggle("secondColor") gives the td a class of secondColor if it doesn't already have one, and removes it if it's there. It doesn't have any effect on other classes, such as firstColor.