Last active
October 9, 2020 18:19
-
-
Save derekmc/94d42e9be7991fbd496b6fabcc8d8d03 to your computer and use it in GitHub Desktop.
Output a boilerplate/template for a basic htmlapp.
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
| #!/usr/bin/env sh | |
| cat << 'EOF' | |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title> Demo HTML App </title> | |
| <style> | |
| * { | |
| font-family: sans-serif; | |
| user-select: none; | |
| } | |
| body{ | |
| margin: 1em; | |
| } | |
| #notify_span{ | |
| margin: 1em; | |
| border: 1px solid black; | |
| padding: 1em 3em; | |
| } | |
| </style> | |
| <!-- Utility Functions --> | |
| <!-- These functions do general purpose things that aren't specific to this project or codebase --> | |
| <script> | |
| function copy(x){ | |
| return x? JSON.parse(JSON.stringify(x)) : x; | |
| } | |
| </script> | |
| <script> | |
| window.addEventListener("load", Init); | |
| let State, NotifySpan; // Names that start with uppercase are globals or functions that modify globals. | |
| const INITSTATE = { | |
| count: 0, | |
| } | |
| function Init(){ | |
| State = copy(INITSTATE); | |
| NotifySpan = document.getElementById("notify_span"); | |
| Events(); | |
| Notify("Init() completed."); | |
| } | |
| function Notify(msg){ | |
| console.log("Notification: " + msg); | |
| NotifySpan.innerHTML = ""; | |
| NotifySpan.appendChild(document.createTextNode(msg)); | |
| } | |
| function Events(){ | |
| window.addEventListener("click", (e)=>click(State, e)); | |
| window.addEventListener("keydown", (e)=> keyDown(State, e)); | |
| function click(state, e){ | |
| let x = e.clientX; | |
| let y = e.clientY; | |
| ++state.count; | |
| Notify(`Click #${State.count}: (${x}, ${y})`); | |
| } | |
| function keyDown(state, e){ | |
| let keycode = e.keyCode; | |
| Notify(`Key Down: ${keycode}`); | |
| state.lastkey = keycode; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1> Demo HTML App </h1> | |
| <div> | |
| <span id='notify_span'></span> | |
| </div> | |
| </body> | |
| </html> | |
| EOF |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment