Konstantin imkost

imkost / m_2.jsx

Last active April 23, 2018 18:13

	<div class="Page">
	<h2 class="Page__title">IT Company</h2>
	<div class="Page__content">We develop apps</div>
	</div>

	{
	class: 'Page',
	inner: [
	{
	tag: 'h2',

imkost / m_1.html

Created April 23, 2018 18:06

	<div class="Page">
	<h2 class="Page__title">IT Company</h2>
	<div class="Page__content">We develop apps</div>
	</div>

imkost / slender3_changeInnerText.js

Created December 5, 2016 19:43

NameEditor.onKeyUp = changeInnerText('nameEditor__name');

imkost / slender3_watchClass.js

Created December 5, 2016 19:43

	const nameElems = watchClass(id => `nameEditor__name-${id}`);

	NameEditor.onKeyUp = (input, id) => {
	nameElems(id, elem => elem.innerText = input.value);
	};

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)) {

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 / 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 / slender3_NameEditor.js

Created December 5, 2016 19:39

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 / slender2_id.html

Created November 18, 2016 11:56

	<div>
	Hello, <span id="nameEditor__name"></span>
	</div>