Toggle a Class
// lazy hack for css
document.body.innerHTML = `
<style>
button {
cursor: pointer;
}
.red {
background-color: red;
}
</style>
`
const btn = document.body.appendChild(
Object.assign(
document.createElement('button'),
{ innerText: 'click me' }
)
)
btn.addEventListener('click', e => {
e.target.classList.toggle('red')
})
classList.toggle
brings back memories…
Multiple Class Trick
.thing.thing.thing {
color: green;
}
.thing.thing {
color: red;
}
.thing {
color: blue;
}
What color would p.thing
be?
Odd Gradient Notation
// "Being clever is not clever"
// -- Bjarne Stroustrup
D = document
ang = {
'|': 180,
'-': 90,
'\\': 135,
'/': 225
}
box = def => {
def = def.split(/\s+/)
form = def.length
I = i => parseInt(def[i], 16)
;[,,, _=>{x = y = I(0); w = h = I(1); c = def[2]},
_=>{x = I(0), y = I(1); w = h = I(2);c = def[3]},
_=>{x = I(0); y = I(1); w = I(2); h = I(3); c = def[4]}
][form]()
c = c.split``
ca = c[0]
ca = ca+ca+ca
cD = ang[c[1]]
cb = c[2]
cb = cb+cb+cb
D.body.appendChild(
D.createElement`div`
).style = `
position: absolute; left: ${x}px; top: ${y}px;
width: ${w}px; height: ${h}px;
background: linear-gradient(${cD}deg, #${ca}, #${cb})
`
}
const parse = prog => prog.trim()
.split(/\n+/m)
.map(line => box(line.trim()))
parse(`
0 64 0/f
64 64 0\\f
a0 f0 30 54 f\\0
0 6f 20 60 0-c
f 7f 20 60 0|c
1f 8f 30 30 c/0
`)
Just playing around… odd micro-gradient notation:
'0 64 0/f'
// x=0 y=0 width=0x64 height=0x64
// 0/f = gradient black to white top right to bottom left
'64 64 0\\f'
// x=0 y=0 width=0x64 height=0x64
// 0\\f = black to to white gradient top left to bottom right
'0 6f 20 60 0-c'
// x=0 y=0x6f width=0x20 height=0x60
// 0-c = gradient black to grey (#ccc) left to right
// etc... ( | ) is top to bottom grad
CSS Checkbox
<div class="toggle">
<input class="check" type="checkbox" tabindex="0">
<label></label>
</div>
<style>
.toggle {
position: relative;
}
.check {
position: absolute;
width: 3rem;
height: 3rem;
margin: 0;
opacity: 0;
cursor: pointer;
}
label {
position: absolute;
pointer-events: none;
content: '';
width: 3rem;
height: 3rem;
background: black;
cursor: pointer
}
.check:checked + label {
background: red;
}
</style>
Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…
HWB Colors
// Safari and Firefox only... no Chrome support at time of this post
Object.assign(document.body.style, {
margin: 0,
display: 'grid',
'grid-template-columns': '1fr 1fr 1fr',
});
const hwbBlock = () => {
const hue = Math.round(Math.random() * 360)
const white = Math.round(
Math.random() * Math.random() * 100)
const black = Math.round(
Math.random() * Math.random() * 100)
const col = `hwb(${hue} ${white}% ${black}%)`
document.body.innerHTML += `
<div
style="
width: 100%;
height: 4em;
font-family: sans-serif;
text-align: center;
line-height: 2.3;
color: white;
text-shadow: 1px 1px 5px black;
background:${col}">${col}</div>
`
}
Array(102).fill(0).map(hwbBlock);
HWB color format… Looking forward to better support on this CSS color format…