Skip to content

Instantly share code, notes, and snippets.

@tanishiking

tanishiking/index.html

Created December 22, 2016 14:37
Show Gist options
  • Save tanishiking/9cdc310da69d504a893220848b1753f5 to your computer and use it in GitHub Desktop.
Save tanishiking/9cdc310da69d504a893220848b1753f5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TypeScript test</title>
</head>
<body>
<div class="container">
<ul class="piyo-list">
<li><a href="" class="piyo-button">Add piyo</a></li>
</ul>
</div>
<script src="../js/app.js"></script>
</body>
</html>
Raw
index.ts
// src/ts/index.ts
import { Piyo } from "./piyo";
function init() {
const container = <HTMLElement>document.querySelector('.container');
new Piyo(container);
}
export function getPiyo(): string {
return 'piyo';
}
document.addEventListener('DOMContentLoaded', init);
Raw
piyo.ts
// src/ts/piyo.ts
export class Piyo {
private list: HTMLElement;
private button: HTMLElement;
constructor(container: HTMLElement) {
this.list = <HTMLElement>container.querySelector('.piyo-list')
this.button = <HTMLElement>container.querySelector('.piyo-button');
this.button.addEventListener('click', this.onButtonClicked.bind(this));
}
private onButtonClicked(event: Event): void {
event.preventDefault();
this.appendList(this.list, 'piyo');
}
private appendList(list: HTMLElement, text: string) {
const item = document.createElement('li');
item.innerHTML = text;
list.appendChild(item);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment