Skip to content

Instantly share code, notes, and snippets.

function App({ url }) {
return `
<!doctype html>
<html class="app">
<head>
...
</head>
<body class="app__body">
${NameEditor({ instanceIndex: 0 })}
${NameEditor({ instanceIndex: 1 })}
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>
`;
function NameEditor() {
return `
<div class="nameEditor">
<div>Enter you name:</div>
<input onKeyUp="NameEditor.onKeyUp(this)" />
<div>
Hello, <span></span>
</div>
</div>
`;
function Box() {
return `
<div class="box" onClick="Box.onClick(this)"></div>
`;
}
Box.onClick = (box) => {
box.classList.toggle('box_big');
};
.box {
width: 30px;
height: 30px;
background: #ccc;
}
.box_big {
width: 100px;
height: 100px;
}
// 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');
const fs = require('fs');
const styles = fs.readFileSync('./styles.css');
function server(req, res) {
const { url } = req;
if (url === '/styles.css') {
res.end(styles);
return;
}
const fs = require('fs');
function server(req, res) {
const { url } = req;
if (url === '/styles.css') {
res.end(fs.readFileSync('./styles.css'));
return;
}
<head>
<meta charset="utf-8" />
<title>Slender Website</title>
<link rel="stylesheet" href="/styles.css" />
</head>
.app {
margin: 0;
padding: 0;
background: #fff;
font-family: sans-serif;
}
.app__body {
margin: 0;
padding: 0;