Skip to content

Instantly share code, notes, and snippets.

View m_2.jsx
<div class="Page">
<h2 class="Page__title">IT Company</h2>
<div class="Page__content">We develop apps</div>
</div>
{
class: 'Page',
inner: [
{
tag: 'h2',
View m_1.html
<div class="Page">
<h2 class="Page__title">IT Company</h2>
<div class="Page__content">We develop apps</div>
</div>
View slender3_changeInnerText.js
NameEditor.onKeyUp = changeInnerText('nameEditor__name');
View slender3_watchClass.js
const nameElems = watchClass(id => `nameEditor__name-${id}`);
NameEditor.onKeyUp = (input, id) => {
nameElems(id, elem => elem.innerText = input.value);
};
View slender3_NameEditor3.js
const nameElems = {};
function getNameElems(id) {
return nameElems[id] || (
nameElems[id] = document.getElementsByClassName(`nameEditor__name-${id}`)
);
}
NameEditor.onKeyUp = (input, id) => {
for (const elem of getNameElems(id)) {
View slender3_live.js
const Box = () => '<div class="box"></div>';
const boxes = document.getElementsByClassName('box');
document.body.innerHTML = `${Box()}${Box()}${Box()}`;
console.log(boxes.length); // 3
document.body.innerHTML = `${Box()}`;
console.log(boxes.length); // 1
View slender3_NameEditor2.js
function NameEditor({ id }) {
// Add color to distinguish name editors
const color = {
0: '#b6e1c1',
1: '#b7c4ed',
}[id];
return `
<div class="nameEditor" style="background: ${color}">
...
View slender3_NameEditor.js
function App({ url }) {
return `
...
${NameEditor({ id: 0 })}
${NameEditor({ id: 1 })}
${NameEditor({ id: 2 })}
...
`
}
View slender3_Box.js
function Box({ text }) {
return `
<div class="box" onClick="Box.onClick()">
${text}
</div>
`;
}
Box.onClick = () => {
alert('box was clicked');
View slender2_id.html
<div>
Hello, <span id="nameEditor__name"></span>
</div>