rohanthewiz/htm-index.html

## htm-index.html
<!DOCTYPE html>
<html lang="en">
<title>htm Demo</title>
<script type="module">
    import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.mjs';

    class App extends Component {
        constructor() {
            super();
            this.Pi = 3.1416;
        }

        addTodo() {
            const { todos = [] } = this.state;
            this.setState({ todos: todos.concat(`Item ${todos.length}`) });
        }

        render({ page }, { todos = [] }) {
            return html`
          <div class="app">
            <${Header} name="ToDo's (${page})" />
            <p>The local value of Pi is ${this.Pi}</p>
            <ul>
              ${todos.map(todo => html`
                <li>${todo}</li>
              `)}
            </ul>
            <button onClick=${() => this.addTodo()}>Add Todo</button>
            <${Footer}>footer content here<//>
          </div>
        `;
        }
    }
    //const Pi = 3.1416;

    const Header = ({ name }) => html`<h1>${name} List</h1>`

    const Footer = props => html`<footer ...${props} />`

    render(html`<${App} page="All" />`, document.body);
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<title>htm Demo</title>
	<script type="module">
	import { html, Component, render } from 'https://unpkg.com/htm/preact/standalone.mjs';

	class App extends Component {
	constructor() {
	super();
	this.Pi = 3.1416;
	}

	addTodo() {
	const { todos = [] } = this.state;
	this.setState({ todos: todos.concat(`Item ${todos.length}`) });
	}

	render({ page }, { todos = [] }) {
	return html`
	<div class="app">
	<${Header} name="ToDo's (${page})" />
	<p>The local value of Pi is ${this.Pi}</p>
	<ul>
	${todos.map(todo => html`
	<li>${todo}</li>
	`)}
	</ul>
	<button onClick=${() => this.addTodo()}>Add Todo</button>
	<${Footer}>footer content here<//>
	</div>
	`;
	}
	}
	//const Pi = 3.1416;

	const Header = ({ name }) => html`<h1>${name} List</h1>`

	const Footer = props => html`<footer ...${props} />`

	render(html`<${App} page="All" />`, document.body);
	</script>
	</html>