From dd5492493336955c66c8960d4e50d76297199fbb Mon Sep 17 00:00:00 2001
From: Colt Steele <colt@steele.com>
Date: Mon, 4 Mar 2019 23:00:28 -0800
Subject: [PATCH] Break code into separate scripts, no webpack

- Broke up app.js into 5 scripts
- We have to manually include each script in index.html
- We have to pay attention to the order they load in
---
 index.html                        |  6 ++++-
 src/app.js                        | 44 -------------------------------
 src/app/alert.service.js          | 22 ++++++++++++++++
 src/app/app.js                    | 19 +++++++++++++
 src/app/component.service.js      | 20 ++++++++++++++
 src/app/utils/inputs-are-valid.js |  3 +++
 src/app/utils/parse-inputs.js     |  3 +++
 7 files changed, 72 insertions(+), 45 deletions(-)
 delete mode 100644 src/app.js
 create mode 100644 src/app/alert.service.js
 create mode 100644 src/app/app.js
 create mode 100644 src/app/component.service.js
 create mode 100644 src/app/utils/inputs-are-valid.js
 create mode 100644 src/app/utils/parse-inputs.js

diff --git a/index.html b/index.html
index 4573b3a..6b41efc 100644
--- a/index.html
+++ b/index.html
@@ -39,5 +39,9 @@
     </div>
     <img src="./assets/webpack.svg" />
   </body>
-  <script src="./src/app.js"></script>
+  <script src="./src/app/alert.service.js"></script>
+  <script src="./src/app/component.service.js"></script>
+  <script src="./src/app/utils/inputs-are-valid.js"></script>
+  <script src="./src/app/utils/parse-inputs.js"></script>
+  <script src="./src/app/app.js"></script>
 </html>
diff --git a/src/app.js b/src/app.js
deleted file mode 100644
index 3772fcf..0000000
--- a/src/app.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const numberOneInput = document.getElementById("numberOne");
-const numberTwoInput = document.getElementById("numberTwo");
-const addValuesButton = document.getElementById("addValues");
-const resultDiv = document.getElementById("result");
-const errorBox = document.getElementById("error");
-
-const parseInputs = (...input) => {
-  return input.map(str => parseInt(str));
-};
-
-const inputsAreValid = (...input) => {
-  return input.every(num => typeof num === "number" && !isNaN(num));
-};
-
-const handleAdditionError = (inputs, numbers) => {
-  const fullMessage = inputs.reduce((message, str, index) => {
-    if (inputsAreValid(numbers[index])) {
-      return message + "";
-    } else {
-      return message + `${str} is not a number. `;
-    }
-  }, "Please enter two valid numbers! ");
-
-  errorBox.classList.remove("invisible");
-  errorBox.innerText = fullMessage;
-};
-
-const hideErrors = () => {
-  errorBox.classList.add("invisible");
-};
-
-hideErrors();
-addValuesButton.addEventListener("click", () => {
-  hideErrors();
-  const inputs = [numberOneInput.value, numberTwoInput.value];
-  const parsedInputs = parseInputs(...inputs);
-  if (inputsAreValid(...parsedInputs)) {
-    const [numA, numB] = parsedInputs;
-    resultDiv.innerText = numA + numB;
-  } else {
-    resultDiv.innerText = "";
-    handleAdditionError(inputs, parsedInputs);
-  }
-});
diff --git a/src/app/alert.service.js b/src/app/alert.service.js
new file mode 100644
index 0000000..12a8e08
--- /dev/null
+++ b/src/app/alert.service.js
@@ -0,0 +1,22 @@
+class AlertService {
+  constructor() {
+    this.errorBox = document.getElementById("error");
+  }
+
+  handleAdditionError(inputs, numbers) {
+    const fullMessage = inputs.reduce((message, str, index) => {
+      if (inputsAreValid(numbers[index])) {
+        return message + "";
+      } else {
+        return message + `${str} is not a number. `;
+      }
+    }, "Please enter two valid numbers! ");
+
+    this.errorBox.classList.remove("invisible");
+    this.errorBox.innerText = fullMessage;
+  }
+
+  hideErrors() {
+    this.errorBox.classList.add("invisible");
+  }
+}
diff --git a/src/app/app.js b/src/app/app.js
new file mode 100644
index 0000000..6980a4b
--- /dev/null
+++ b/src/app/app.js
@@ -0,0 +1,19 @@
+const alertService = new AlertService();
+const componentService = new ComponentService();
+const run = (alertService, componentService) => {
+  alertService.hideErrors();
+
+  componentService.onClick(() => {
+    alertService.hideErrors();
+    const inputs = componentService.getInputs();
+    const parsedInputs = parseInputs(...inputs);
+    if (inputsAreValid(...parsedInputs)) {
+      const [numA, numB] = parsedInputs;
+      componentService.setResult(numA + numB);
+    } else {
+      componentService.setResult("");
+      alertService.handleAdditionError(inputs, parsedInputs);
+    }
+  });
+};
+run(alertService, componentService);
diff --git a/src/app/component.service.js b/src/app/component.service.js
new file mode 100644
index 0000000..62e8512
--- /dev/null
+++ b/src/app/component.service.js
@@ -0,0 +1,20 @@
+class ComponentService {
+  constructor() {
+    this.numberOneInput = document.getElementById("numberOne");
+    this.numberTwoInput = document.getElementById("numberTwo");
+    this.addValuesButton = document.getElementById("addValues");
+    this.resultDiv = document.getElementById("result");
+  }
+
+  getInputs() {
+    return [this.numberOneInput.value, this.numberTwoInput.value];
+  }
+
+  setResult(str) {
+    this.resultDiv.innerText = str;
+  }
+
+  onClick(cb) {
+    this.addValuesButton.addEventListener("click", cb);
+  }
+}
diff --git a/src/app/utils/inputs-are-valid.js b/src/app/utils/inputs-are-valid.js
new file mode 100644
index 0000000..c5c83b2
--- /dev/null
+++ b/src/app/utils/inputs-are-valid.js
@@ -0,0 +1,3 @@
+const inputsAreValid = (...input) => {
+  return input.every(num => typeof num === "number" && !isNaN(num));
+};
diff --git a/src/app/utils/parse-inputs.js b/src/app/utils/parse-inputs.js
new file mode 100644
index 0000000..c22d4b2
--- /dev/null
+++ b/src/app/utils/parse-inputs.js
@@ -0,0 +1,3 @@
+const parseInputs = (...input) => {
+  return input.map(str => parseInt(str));
+};