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

@@ -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>

src/app.js

@@ -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);
-  }
-});

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");
+  }
+}

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);

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);
+  }
+}

src/app/utils/inputs-are-valid.js

@@ -0,0 +1,3 @@
+const inputsAreValid = (...input) => {
+  return input.every(num => typeof num === "number" && !isNaN(num));
+};

src/app/utils/parse-inputs.js

@@ -0,0 +1,3 @@
+const parseInputs = (...input) => {
+  return input.map(str => parseInt(str));
+};