From c0404bd10b4451525b8c9c773642d55e13ecd96a Mon Sep 17 00:00:00 2001
From: Simon Lutterbie <simon@ltrbe.com>
Date: Fri, 12 Feb 2021 16:05:27 -0800
Subject: [PATCH] Create a "click counter button" in my vanilla TypeScript app

Read this commit's story on Medium:
- https://link.medium.com/x3cuKM1rPdb
---
 .../click-to-count/click-to-count.mount.ts    | 10 +++++++++
 .../click-to-count/click-to-count.test.ts     | 21 +++++++++++++++++++
 .../click-to-count/click-to-count.ts          | 18 ++++++++++++++++
 src/activities/click-to-count/index.ts        |  1 +
 src/activities/read-about-simon/mount.ts      |  1 +
 src/activities/read-about-site/mount.ts       |  1 +
 src/activities/read-home/mount.ts             |  4 ++++
 src/activities/read-technology-used/mount.ts  |  5 +++++
 8 files changed, 61 insertions(+)
 create mode 100644 src/activities/click-to-count/click-to-count.mount.ts
 create mode 100644 src/activities/click-to-count/click-to-count.test.ts
 create mode 100644 src/activities/click-to-count/click-to-count.ts
 create mode 100644 src/activities/click-to-count/index.ts

diff --git a/src/activities/click-to-count/click-to-count.mount.ts b/src/activities/click-to-count/click-to-count.mount.ts
new file mode 100644
index 0000000..cd5fd3d
--- /dev/null
+++ b/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;
+};
diff --git a/src/activities/click-to-count/click-to-count.test.ts b/src/activities/click-to-count/click-to-count.test.ts
new file mode 100644
index 0000000..07455bb
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/src/activities/click-to-count/click-to-count.ts b/src/activities/click-to-count/click-to-count.ts
new file mode 100644
index 0000000..65b026d
--- /dev/null
+++ b/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;
+}
diff --git a/src/activities/click-to-count/index.ts b/src/activities/click-to-count/index.ts
new file mode 100644
index 0000000..a810cb9
--- /dev/null
+++ b/src/activities/click-to-count/index.ts
@@ -0,0 +1 @@
+export { mountClickToCount } from './click-to-count.mount';
diff --git a/src/activities/read-about-simon/mount.ts b/src/activities/read-about-simon/mount.ts
index 8b45b61..8a87c88 100644
--- a/src/activities/read-about-simon/mount.ts
+++ b/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 (
diff --git a/src/activities/read-about-site/mount.ts b/src/activities/read-about-site/mount.ts
index b7d1aa6..7b7b7c6 100644
--- a/src/activities/read-about-site/mount.ts
+++ b/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 (
diff --git a/src/activities/read-home/mount.ts b/src/activities/read-home/mount.ts
index 830d62b..3b860df 100644
--- a/src/activities/read-home/mount.ts
+++ b/src/activities/read-home/mount.ts
@@ -1,4 +1,6 @@
 import { MountActivityFn } from '../activities.types';
+import { mountClickToCount } from '../click-to-count';
+
 import template from './template.html';
 
 export const mountReadHome: MountActivityFn = function (
@@ -6,5 +8,7 @@ export const mountReadHome: MountActivityFn = function (
 ) {
   mountPoint.innerHTML = template;
 
+  mountClickToCount(mountPoint);
+
   return mountPoint;
 };
diff --git a/src/activities/read-technology-used/mount.ts b/src/activities/read-technology-used/mount.ts
index 93995f5..e3f9b74 100644
--- a/src/activities/read-technology-used/mount.ts
+++ b/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;
 };