ClassName Behaviors
const ui = document.body.appendChild(
document.createElement('div')
);
ui.innerHTML = `
<button class="blue circle redBorder moveDown">click</button>
<button class="red circle sayHi">click</button>
<button class="green circle noBorder moveDown sayHi randomBgColor">click</button>
<style>
* { -webkit-user-select: none; user-select: none; }
body, html {
width: 100%; height: 100%;
}button {position: relative;
top: 0;
margin: .5em;
cursor: pointer;
color: white;
transition: all 200ms ease-out;
text-shadow: 1px 2px 1px black;
}.circle {
width: 50px;
height: 50px;
border-radius: 500px;
}.blue {
background: #275ba1;
}.red {
background: red;
}.green {
background: green;
}.redBorder {
border: 2px solid red;
}.noBorder {
border: none;
}</style>
`;const actions = {
moveDown(e) {
e.target.style.top = `${parseFloat(e.target.style.top || 0) + 30}px`;
},
sayHi(e) {
e.target.innerHTML = [
'hi', 'hello', 'hey', 'aloha', 'what\'s up'
][
Math.floor(Math.random() * 5)
];
e.target.style.transform = `
rotate(${Math.random() * 40 - 20}deg)
scale(${Math.random() * .3 + 1})`
},
randomBgColor(e) {
const col = `hsl(${Math.random() * 360}deg, 50%, 50%)`
e.target.style.background = col;
}};
document.body.addEventListener('click', e => {
// combine as many actions as we want[...e.target.classList].forEach(cls => {
const action = actions[cls];
if (action != null) action(e);
});
});
This snippet takes the ideas from yesterdays post and goes one level further. This associates behavior with class names, so the class names can be combined to mix and match behavior.
In this case, combining classes like this green circle noBorder moveDown sayHi randomBgColor will cause the element in question to “move down”, “say hi” and randomize its background color when it is clicked. Click the “Try it out” to get a better idea.
