((
width = 200, height = 200,
cnv = document.body.appendChild(
Object.assign(
document.createElement('canvas'), {
width, height})
),
c = cnv.getContext('2d'),
f = c.fillRect.bind(c),
C = _ => c.fillStyle = _) => {
C`gray`; f(0, 0, width, height);
C`blue`; f(10, 10, 100, 20);
})();
console.log(
['x', 'y', 'z'][Math.floor(Math.random() * 3)]
);
This will output either x, y or z. It works by looking up a random index of an inline array. I find this great for quick prototyping – probably not something you want to be using outside throw away code… Hit the “Try it out…” button and open your dev console.
const el = document.createElement('div')
el.innerHTML = localStorage.memory == null ? 'type here' :
localStorage.memoryel.contentEditable = true;
document.body.appendChild(el);
document.addEventListener('keyup', () => {
localStorage.memory = el.innerHTML;
});
Create an editable div that remembers what was typed in it.
const el = document.createElement('div');
Object.assign(el.style, {
position: 'absolute',
left: '100px',
top: '100px',
width: '30px',
height: '30px',
background: 'linear-gradient(black, red)',
transform: 'rotate(15deg)'
});
document.body.appendChild(el);
Fast and easy way to set many styles on a DOM node. Click/tap the