)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Remove a DOM HTML Element

  1. const button = document.createElement('button');
  2. button.innerText = 'Hello There';
  3. document.body.appendChild(button);
  4.  
  5. // click anywhere
  6. document.body.addEventListener('click', () => {
  7.   if (button.parentNode != null) {
  8.     button.parentNode.removeChild(button);
  9.   }
  10. });

In vanilla js you’ll find yourself checking if an HTML DOM element can be removed, by seeing if it has a parent (as seen above). Forgetting to do so is the source of many errors.

With the death of IE11 you can use remove()

  1. const button = document.createElement('button');
  2. button.innerText = 'Hello There 2';
  3. document.body.appendChild(button);
  4.  
  5. // click anywhere
  6. document.body.addEventListener('click', () => {
  7.    button.remove();
  8. });

No error occurs when calling remove() on something that is already removed… just like the old jQuery days 😉

// dom // javascript // ui

Inverse of a Function

  1. const expoIn = t => 
  2.   (t==0) ? 0 : Math.pow(2, 10 * (t - 1))
  3.  
  4. const expoInInverse= t => 
  5.   (t==0) ? 0 : ((Math.log(t) + 10 * Math.log(2)) / Math.log(2)) / 10
  6.  
  7.  
  8. console.log(expoIn(.35) + ' ' +  expoInInverse(expoIn(.35)))

Very nice inverse function calculator by user fawad over at Wolfram Alpha. Was attempting to invert a standard “exponential in” easing function – after some futzing I resorted to the calculator 😀

// javascript // math

Normalize Value Between 0 and 1

  1. const d = document.body.appendChild(
  2.   document.createElement`div`)
  3. d.innerHTML = `
  4. <input 
  5.   id="input"
  6.   type="range" 
  7.   min="-2" max="5" 
  8.   value="0">
  9. `
  10.  
  11. let val = 0;
  12.  
  13. console.log('drag slider...')
  14.  
  15. const range = (input.max - input.min);
  16.  
  17. input.oninput = () => {
  18.   val = (input.value - input.min) / range
  19.   console.log(input.value + ' - normalized = ' + val)
  20. }
// html // javascript // math // ui

Little Grid

  1. const NUM = 9
  2. const col = 3
  3. const size = 30
  4. const pad = 10
  5. const box = (x, y) => Object.assign(
  6.   document.body.appendChild(
  7.     document.createElement('div')
  8.   ).style, {
  9.     position: 'absolute',
  10.     width: size + 'px', 
  11.     height: size + 'px',
  12.     top: y + 'px', 
  13.     left: x + 'px',
  14.     background: 'red'
  15. })
  16.  
  17. const off = (size + pad)
  18. for (let i = 0; i < NUM; i++) {
  19.   const x = (i % col) * off
  20.   const y = parseInt(i / col, 10) * off
  21.   box(x, y)
  22. }
// graphics // javascript // ui

Mangler

  1. const lookupReplacements = {
  2.   // entities (like &sum; or &Theta; - are safer
  3.   // than just putting things inline like ∑ or ®
  4.   'a': ['A', '&Auml;', '∆', '&aacute;'],
  5.   'e': ['&eacute;', '∃'],
  6.   't': ['⊤', '&Tau;'] ,
  7.   'b': ['&beta;'],
  8.   'o': ['&empty;', '_o_']
  9. }
  10.  
  11. function mangle(s) {
  12.   return s.split``.map(letter => {
  13.     const chars = lookupReplacements[letter]
  14.     return chars ? chars[
  15.       Math.floor(
  16.         chars.length * Math.random()
  17.       )
  18.     ] : letter
  19.   }).join``
  20. }
  21.  
  22. document.body.innerHTML = mangle('Been taking a break from making snippets... might start up again...<hr>')
  23.  
  24. document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')
  25.  
  26. document.body.innerHTML += mangle('Been taking a break from making snippets... might start up again...<hr>')

Substitute some characters in a string with some random choices…

// javascript // strings
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}