commit b96a9dbce0d4abbf156612ccb23e4be74d6fd313 Author: Colt Steele Date: Mon Mar 4 22:51:35 2019 -0800 Initial app code, no webpack - Pre-webpack version of our simple app - One app.js file with all the code - Bootstrap included via CDS, no SASS or customization - Single SVG included in assets folder diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e69de29 diff --git a/assets/webpack.svg b/assets/webpack.svg new file mode 100644 index 0000000..2f813e2 --- /dev/null +++ b/assets/webpack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4573b3a --- /dev/null +++ b/index.html @@ -0,0 +1,43 @@ + + + + + + + + Webpack Demo + + +

+ Welcome! +

+ +
+
+
+ +
+ + +
+ +
+
+
+ +
+
+
+
The result is:
+
+ + + + diff --git a/src/app.js b/src/app.js new file mode 100644 index 0000000..3772fcf --- /dev/null +++ b/src/app.js @@ -0,0 +1,44 @@ +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); + } +});