A Rose by any Other Name
Published: 2021-05-08 17:32:16

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...

```javascript
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.

```javascript
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).

```javascript
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:

```css
.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.    :)