Create a "click counter button" in my vanilla TypeScript app

Read this commit's story on Medium:
- https://link.medium.com/x3cuKM1rPdb

src/activities/click-to-count/click-to-count.mount.ts

@@ -0,0 +1,10 @@
+import { MountActivityFn } from '../activities.types';
+import { clickToCountActivity } from './click-to-count';
+
+export const mountClickToCount: MountActivityFn = function (mountPoint) {
+  const clickToCount = clickToCountActivity();
+
+  mountPoint.appendChild(clickToCount);
+
+  return mountPoint;
+};

src/activities/click-to-count/click-to-count.test.ts

@@ -0,0 +1,21 @@
+import { clickToCountActivity } from './click-to-count';
+
+describe('clickToCountActivity', () => {
+  it('Should render a button', () => {
+    const clickToCount = clickToCountActivity();
+
+    expect(clickToCount.nodeName).toEqual('BUTTON');
+  });
+
+  it('Should display a properly incrementing count', () => {
+    const clickToCount = clickToCountActivity();
+    expect(clickToCount.textContent).toContain('0');
+    clickToCount.click();
+    expect(clickToCount.textContent).toContain('1');
+    clickToCount.click();
+    expect(clickToCount.textContent).toContain('2');
+    clickToCount.click();
+    clickToCount.click();
+    expect(clickToCount.textContent).toContain('4');
+  });
+});

src/activities/click-to-count/click-to-count.ts

@@ -0,0 +1,18 @@
+export function clickToCountActivity(): HTMLButtonElement {
+  let count = 0;
+
+  const clickToCount = document.createElement('button');
+  clickToCount.addEventListener('click', handleClick);
+  updateButtonText();
+
+  function handleClick() {
+    count += 1;
+    updateButtonText();
+  }
+
+  function updateButtonText() {
+    clickToCount.textContent = `I've been clicked ${count} times`;
+  }
+
+  return clickToCount;
+}

src/activities/click-to-count/index.ts

@@ -0,0 +1 @@
+export { mountClickToCount } from './click-to-count.mount';

src/activities/read-about-simon/mount.ts

@@ -1,4 +1,5 @@
 import { MountActivityFn } from '../activities.types';
+
 import template from './template.html';
 
 export const mountReadAboutSimon: MountActivityFn = function (

src/activities/read-about-site/mount.ts

@@ -1,4 +1,5 @@
 import { MountActivityFn } from '../activities.types';
+
 import template from './template.html';
 
 export const mountReadAboutSite: MountActivityFn = function (

src/activities/read-home/mount.ts

@@ -1,10 +1,14 @@
 import { MountActivityFn } from '../activities.types';
+import { mountClickToCount } from '../click-to-count';
+
 import template from './template.html';
 
 export const mountReadHome: MountActivityFn = function (
   mountPoint: HTMLElement
 ) {
   mountPoint.innerHTML = template;
 
+  mountClickToCount(mountPoint);
+
   return mountPoint;
 };

src/activities/read-technology-used/mount.ts

@@ -1,9 +1,14 @@
 import { MountActivityFn } from '../activities.types';
+import { mountClickToCount } from '../click-to-count';
+
 import template from './template.html';
 
 export const mountReadTechnologyUsed: MountActivityFn = function (
   mountPoint: HTMLElement
 ) {
   mountPoint.innerHTML = template;
+
+  mountClickToCount(mountPoint);
+
   return mountPoint;
 };