Snippet Zone

Easy Mouse Events

```
const ui = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
ui.innerHTML = `
```

  <button class="hello">say hello</button>

  <button class="make-box">make a box</button>

  <button class="remove-boxes">remove boxes</button>

  <button class="consoleLog red">log in console</button>

```
 
```
```
  <style>
```

    button { margin: .5em; cursor: pointer; }

    .red { background: red; color: white; }

```
    .box {
```
```
      position: relative;
```
```
      float: left;
```
```
      width: 30px;
```
```
      height: 30px;
```
```
      margin: 1em;
```
```
      background: blue;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
const actions = {
```
```
  hello(e) {
```
```
    alert(e.target.className);
```
```
  },
```
```
 
```
```
  ['make-box']() {
```

    const box = document.body.appendChild(

```
      document.createElement('div')
```
```
    );
```
```
    box.classList.add('box');
```
```
  },
```
```
 
```
```
  ['remove-boxes']() {
```

    const boxes = [...document.querySelectorAll('.box')];

```
    const num = boxes.length;
```

    boxes.forEach((el) => el.parentNode.removeChild(el));

```
 
```
```
   alert(
```
```
      num === 0
```
```
        ? 'no boxes to remove'
```

        : `removing ${num} box${num > 1 ? 'es' : ''}`

```
    );
```
```
  },
```
```
 
```
```
  consoleLog(e) {
```

    console.log('camelCase instead of kebab-case :D');

```
  },
```
```
};
```
```
 
```

document.addEventListener('mousedown', (e) => {

  const action = actions[e.target.classList[0]];

```
  if (action != null) action(e);
```
```
});
```

This is a powerful little pattern for managing mouse/touch events. Rather than assigning many listeners, this snippet has one listener on the document. Anytime the page is clicked, we look at the event targets classList and use its first value as a key in an actions object.

I have used this or some variation of it many many times over the years. With a little customization it scales well into large projects. I always find myself on the fence about class naming conventions… kebab-case vs camelCase – probably because it just doesn’t matter that much. For large projects, each main section of the UI will have its own document.addEventListener just for organizational purposes.

Variations

The choice to use the first class as the key for the action is pretty arbitrary. Depending on how you like to set things up you could use the last value of the classList, the element id, the element name, or a custom data attribute etc… Like this:

```
// id
```
```
const action = actions[e.target.id];
```
```
 
```
```
// name
```
```
const action = actions[e.target.name];
```
```
 
```

// data attribute <button data-my-id="test">test</button>

const action = actions[e.target.dataset.myId];

September 1, 2021

// dom // events // javascript // tricks // ui

Pretty Print JSON in Console

```
  const obj = {
```
```
    x: 1, y: 2,
```
```
    data: { test: 'xyz' }
```
```
  };
```

  console.log(JSON.stringify(obj, null, 2));

JSON.stringify has two more arguments that allow for pretty printing and processing of the object in question. The second argument is a “replacer” function and the third argument is for indentation. Read more details here.

I am pretty sure I first learned this from this stack overflow post.

I used this technique in yesterdays console hijacking post.

August 31, 2021

// javascript // json // objects

console.log Hijack

```
const log = console.log;
```

const consoleUI = document.body.appendChild(

```
  document.createElement('div')
```
```
);
```
```
document.body.style.margin = 0;
```
```
Object.assign(consoleUI.style, {
```
```
  position: 'fixed',
```
```
  bottom: 0,
```
```
  width: '100%',
```
```
  height: '30%',
```
```
  maxHeight: '450px',
```
```
  minHeight: '200px',
```
```
  background: 'rgb(68, 68, 81)',
```
```
  overflow: 'scroll'
```
```
});
```
```
function consoleRow(str) {
```

  const row = document.createElement('div');

```
  consoleUI.prepend(row);
```
```
  row.innerText = str;
```
```
  Object.assign(row.style, {
```
```
    padding: '.5em',
```
```
    fontFamily: 'sans-serif',
```
```
    color: 'white',
```

    borderBottom: '1px solid rgba(255, 255, 255, .1)',

```
    whiteSpace: 'pre-wrap'
```
```
  });
```
```
}
```
```
 
```
```
console.log = (...args) => {
```
```
  const formatted = args.map(val => {
```
```
    return typeof val === 'object' ? 
```

      JSON.stringify(val, null, 2) : val;

```
  });
```
```
  consoleRow(formatted.join(' '));
```
```
  log.apply(console, args);
```
```
};
```
```
 
```
```
// test it out
```
```
 
```
```
console.log(1, 2, 3, 4);
```
```
console.log(new Date());
```
```
 
```
```
const someObject = {
```
```
  test: 123,
```
```
  testing: { x: 1, y: 2, z: 3 }
```
```
};
```
```
console.log(someObject);
```
```
 
```
```
console.log(3, 2, 1, 0);
```

I’m thinking about adding a little fake console to the Snippet Zone Quick Editor – just whipped this up as a proof of concept – something like this should work…

August 30, 2021

// css // hacks // javascript // meta // strings // tricks // ui

Distance Between Two Points (SVG)

```
const dist = (x1, y1, x2, y2) => 
```
```
  Math.sqrt(
```
```
    (x1 - x2) ** 2 + 
```
```
    (y1 - y2) ** 2);
```
```
 
```
```
const el = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
 
```
```
el.innerHTML = `
```
```
  <svg style="overflow:visible;">
```

    <circle id="circA" cx="150" cy="100" r="50" fill="gray" />

    <circle id="circB" cx="150" cy="200" r="50" fill="blue" />

    <text id="text" dy="20" dx="20">move mouse</text>

```
  </svg>
```
```
  <style>
```
```
    body, html, svg {
```
```
      width: 100%;
```
```
      height: 100%;
```
```
    }
```
```
  </style>
```
```
`;
```
```
 
```
```
function touch(e) {
```
```
  const touches = e.touches;
```
```
  let x, y;
```

  if (touches != null && touches.length > 0) {

```
    x = touches[0].clientX;
```
```
    y = touches[0].clientY;
```
```
  } else {
```
```
    x = e.clientX;
```
```
    y = e.clientY;
```
```
  }
```
```
  return { x, y };
```
```
}
```
```
 
```

const hasTouch = navigator.maxTouchPoints > 0;

const move = hasTouch ? 'touchmove' : 'mousemove';

```
document.addEventListener(move, e => {
```
```
  const { x, y } = touch(e);
```
```
 
```
```
  // using global ids :D
```
```
  circB.cx.baseVal.value = x;
```
```
  circB.cy.baseVal.value = y;
```
```
 
```
```
  const distance = dist(
```
```
    circA.cx.baseVal.value, 
```
```
    circA.cy.baseVal.value, x, y
```
```
  );
```

  text.innerHTML = 'move mouse, distance: ' + distance;

```
 
```

  circA.r.baseVal.value = distance - circB.r.baseVal.value;

```
});
```

This snippet shows how to calculate the distance between two points. The dist function uses the pythagorean theorem:

```
const dist = (x1, y1, x2, y2) => 
```
```
  Math.sqrt(
```
```
    (x1 - x2) ** 2 + 
```
```
    (y1 - y2) ** 2);
```

August 29, 2021

// dom // graphics // javascript // math // svg

Combine Two or More Arrays

```
const numbers = [1, 2, 3];
```
```
const letters = ['a', 'b', 'c'];
```
```
const symbols = ['!', '@', '#'];
```
```
 
```
```
// use spread operator
```

const combined = [...numbers, ...letters, ...symbols];

```
console.log('first', combined);
```
```
 
```
```
// older way
```
```
const combinedConcat = numbers
```
```
  .concat(letters)
```
```
  .concat(symbols);
```
```
 
```
```
console.log('second', combinedConcat);
```

If you click “Try it out” be sure to open your console.

August 28, 2021

// arrays // javascript // tricks

Older Posts

Newer Posts