Skip to content

Instantly share code, notes, and snippets.

View imkost's full-sized avatar

K. Zemtsovsky imkost

9 followers · 0 following
View GitHub Profile
@imkost
imkost / slender2_1server.js
Last active November 18, 2016 17:18
// server.js
const http = require('http');
const fs = require('fs');
require('./components');
const PORT = 4000;
const styles = fs.readFileSync('./styles.css');
const components = fs.readFileSync('./components.js');
@imkost
imkost / slender2_box.css
Last active November 18, 2016 17:19
.box {
width: 30px;
height: 30px;
background: #ccc;
}
.box_big {
width: 100px;
height: 100px;
}
@imkost
imkost / slender2_App2.js
Last active November 18, 2016 17:47
function App({ url }) {
return `
<!doctype html>
<html class="app">
<head>
...
</head>
<body class="app__body">
${NameEditor({ instanceIndex: 0 })}
${NameEditor({ instanceIndex: 1 })}
@imkost
imkost / slender2_nameEditor.js
Last active November 18, 2016 18:22
function NameEditor() {
return `
<div class="nameEditor">
<div>Enter you name:</div>
<input onKeyUp="NameEditor.onKeyUp(this)" />
<div>
Hello, <span></span>
</div>
</div>
`;
@imkost
imkost / slender2_nameEditorId.js
Last active November 18, 2016 18:23
function NameEditor({ instanceIndex }) {
return `
<div class="nameEditor">
<div>Enter you name:</div>
<input onKeyUp="NameEditor.onKeyUp(this, ${instanceIndex})" />
<div>
Hello, <span id="nameEditor__name-${instanceIndex}"></span>
</div>
</div>
`;
@imkost
imkost / slender3_Box.js
Created December 5, 2016 19:33
function Box({ text }) {
return `
<div class="box" onClick="Box.onClick()">
${text}
</div>
`;
}
Box.onClick = () => {
alert('box was clicked');
@imkost
imkost / slender3_NameEditor.js
Created December 5, 2016 19:39
function App({ url }) {
return `
...
${NameEditor({ id: 0 })}
${NameEditor({ id: 1 })}
${NameEditor({ id: 2 })}
...
`
}
@imkost
imkost / slender3_NameEditor2.js
Created December 5, 2016 19:40
function NameEditor({ id }) {
// Add color to distinguish name editors
const color = {
0: '#b6e1c1',
1: '#b7c4ed',
}[id];
return `
<div class="nameEditor" style="background: ${color}">
...
@imkost
imkost / slender3_live.js
Created December 5, 2016 19:41
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
@imkost
imkost / slender3_NameEditor3.js
Created December 5, 2016 19:42
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)) {