K. Zemtsovsky imkost

## slender_createProject.sh
mkdir slender
cd slender
touch server.js

## slender_server.js
const http = require('http');
const PORT = 4000;

http.createServer(server).listen(PORT);

function server(req, res) {
  res.end('Hello, dude');
}

## slender_routing.js
function server(req, res) {
  const { url } = req;

  if (url === '/') {
    res.end('Main');
  } else if (url === '/about') {
    res.end('About');
  } else {
    res.end('404');
  }

## slender_styles.css
.app {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: sans-serif;
}

.app__body {
  margin: 0;
  padding: 0;

## slender_head.html
<head>
  <meta charset="utf-8" />
  <title>Slender Website</title>
  <link rel="stylesheet" href="/styles.css" />
</head>

## slender_App.js
function server(req, res) {
  return res.end(App({ url: req.url }));
}

function App({ url }) {
  return `
    <!doctype html>
    <html class="app">
      <head>
        <meta charset="utf-8" />

## slender_sendStylesCached.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;
  }

## slender_sendStyles.js
const fs = require('fs');

function server(req, res) {
  const { url } = req;

  if (url === '/styles.css') {
    res.end(fs.readFileSync('./styles.css'));
    return;
  }


## slender2_boxClick.js
function Box() {
  return `
    <div class="box" onClick="Box.onClick(this)"></div>
  `;
}

Box.onClick = (box) => {
  box.classList.toggle('box_big');
};

## slender2_id.html
<div>
  Hello, <span id="nameEditor__name"></span>
</div>
	const http = require('http');
	const PORT = 4000;

	http.createServer(server).listen(PORT);

	function server(req, res) {
	res.end('Hello, dude');
	}
	function server(req, res) {
	const { url } = req;

	if (url === '/') {
	res.end('Main');
	} else if (url === '/about') {
	res.end('About');
	} else {
	res.end('404');
	}
	.app {
	margin: 0;
	padding: 0;
	background: #fff;
	font-family: sans-serif;
	}

	.app__body {
	margin: 0;
	padding: 0;
	<head>
	<meta charset="utf-8" />
	<title>Slender Website</title>
	<link rel="stylesheet" href="/styles.css" />
	</head>
	function server(req, res) {
	return res.end(App({ url: req.url }));
	}

	function App({ url }) {
	return `
	<!doctype html>
	<html class="app">
	<head>
	<meta charset="utf-8" />
	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;
	}
	function Box() {
	return `
	<div class="box" onClick="Box.onClick(this)"></div>
	`;
	}

	Box.onClick = (box) => {
	box.classList.toggle('box_big');
	};