Created
March 29, 2021 16:32
-
-
Save paulc/6ff65ad164acdd5d21353d0a6603cf2e to your computer and use it in GitHub Desktop.
LitHTML starter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="lit-html starter"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>LitHTML</title> | |
| <script type="module"> | |
| import {html, render} from 'https://cdn.jsdelivr.net/npm/lit-html/lit-html.js'; | |
| // import {live} from 'https://cdn.jsdelivr.net/npm/lit-html/directives/live.js'; | |
| // State | |
| const state = { "count": 0, "name":"World!", "value":"A Value" }; | |
| // Handlers | |
| const bind = (name) => (e) => { state[name] = e.target.value; update_ui() }; | |
| const increment = (name,inc) => (e) => { state[name] += inc; update_ui() } | |
| // Update UI | |
| const update_ui = () => render(ui(state), document.body); | |
| // Templates | |
| const input = (name,state) => html`<input .value=${state[name]} @change=${bind(name)}></input>` | |
| const ui = (state) => html` | |
| <h3>Hello ${state.name}</h3> | |
| <ul> | |
| <li>Count :: ${state.count} | |
| <li>Value :: ${state.value} | |
| </ul> | |
| <button @click=${increment("count",10)}>++</button> | |
| <button @click=${increment("count",-10)}>--</button> | |
| <input .value=${state["name"]} @change=${bind("name")}></input> | |
| ${input("value",state)} | |
| `; | |
| window.setInterval(increment("count",1),500); | |
| update_ui(); | |
| </script> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment