diff --git a/dist/main.js b/dist/main.js
index e2b08a1..862681f 100644
--- a/dist/main.js
+++ b/dist/main.js
@@ -46,7 +46,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\***************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ makeWindow: () => (/* binding */ makeWindow)\n/* harmony export */ });\n/* harmony import */ var _zipValidation_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./zipValidation.js */ \"./src/zipValidation.js\");\n/* harmony import */ var _emailValidation_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./emailValidation.js */ \"./src/emailValidation.js\");\n/* harmony import */ var _inputValidation_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputValidation.js */ \"./src/inputValidation.js\");\n/* harmony import */ var _passwordValidation_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./passwordValidation.js */ \"./src/passwordValidation.js\");\n/* harmony import */ var _submissionValidation_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./submissionValidation.js */ \"./src/submissionValidation.js\");\n\n\n\n\n\n\nconst BODY = document.querySelector(\"main\");\n\n// close button functionality\nconst closeWindow = (headDiv) => {\n headDiv.parentElement.removeChild(headDiv);\n};\n\n// handy way of making new elements\nconst makeElement = (passedClass, passedType = \"div\") => {\n const newElement = document.createElement(passedType);\n newElement.setAttribute(\"class\", passedClass);\n return newElement;\n};\n\nconst thumbsUp = () => {\n // remove input fields\n for (let i = 0; i < 5; i++) {\n formWindow.removeChild(document.getElementById(`input-${i + 1}`));\n }\n // remove submit button\n formWindow.removeChild(formWindow.lastChild);\n // add thumbs up\n const thumbsUpGIF = document.createElement(\"img\");\n thumbsUpGIF.src = \"/src/thumbsup.gif\";\n formWindow.appendChild(thumbsUpGIF);\n};\n\nconst makeWindow = () => {\n // *make window itself*\n // 1. window body\n const formWindow = makeElement(\"card-body\", \"form\");\n formWindow.id = \"formWindow\";\n BODY.appendChild(makeElement(\"card\")).appendChild(formWindow);\n\n // 2. close button div\n const closeButton = makeElement(\"mb-3 d-flex\");\n formWindow.appendChild(closeButton);\n\n // the close button is SVG\n // 3. container for SVG - 24x24\n const closeButtonSVGContainer = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"svg\"\n );\n closeButtonSVGContainer.style = \"width: 24px; height: 24px\";\n closeButtonSVGContainer.setAttribute(\"viewbox\", \"0 0 24 24\");\n closeButtonSVGContainer.id = \"closeButton\";\n closeButton.appendChild(closeButtonSVGContainer);\n\n // 4. the actual SVG path\n const closeButtonSVGPath = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"path\"\n );\n closeButtonSVGPath.setAttribute(\n \"d\",\n \"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n );\n closeButtonSVGPath.fill = \"#6c757d\";\n closeButtonSVGContainer.appendChild(closeButtonSVGPath);\n // add event listeners to close the window if button is clicked\n closeButtonSVGContainer.onclick = () => closeWindow(formWindow.parentElement);\n\n // *make input fields*\n // generate container divs\n for (let i = 0; i < 5; i++) {\n const inputContainer = makeElement(\"mb-3\");\n inputContainer.id = `input-${i + 1}`;\n formWindow.appendChild(inputContainer);\n }\n\n const originalValues = [];\n\n // 5. email field\n const userEmail = makeElement(\"form-control\", \"input\");\n userEmail.type = \"text\";\n userEmail.value = \"Email address\";\n originalValues.push(userEmail.value);\n document.getElementById(\"input-1\").appendChild(userEmail);\n\n // 6. country field\n const userCountry = makeElement(\"form-control\", \"input\");\n userCountry.type = \"text\";\n userCountry.value = \"Country\";\n originalValues.push(userCountry.value);\n document.getElementById(\"input-2\").appendChild(userCountry);\n\n // 7. zip code field\n const userZip = makeElement(\"form-control\", \"input\");\n userZip.type = \"text\";\n userZip.value = \"Zip code\";\n originalValues.push(userZip.value);\n document.getElementById(\"input-3\").appendChild(userZip);\n // only allow numeric input\n userZip.oninput = (e) => {\n let numericValue = e.target.value.replace(new RegExp(/[^\\d]/, \"gi\"), \"\");\n numericValue = numericValue.substring(0, 5);\n e.target.value = numericValue;\n };\n\n // 8. password field\n const userPass = makeElement(\"form-control\", \"input\");\n userPass.type = \"text\";\n userPass.value = \"Password\";\n originalValues.push(userPass.value);\n document.getElementById(\"input-4\").appendChild(userPass);\n\n // 9. password confirmation field\n const userPassConfirm = makeElement(\"form-control\", \"input\");\n userPassConfirm.type = \"text\";\n userPassConfirm.value = \"Confirm password\";\n originalValues.push(userPassConfirm.value);\n document.getElementById(\"input-5\").appendChild(userPassConfirm);\n // blank out the input fields when focused and change back when not focused\n document.querySelectorAll(\".form-control\").forEach((inputField) => {\n // keep original value for validation purposes\n const originalValue = inputField.value;\n let oldValue = \"\";\n inputField.onfocus = () => {\n // erases characters from input field when focused\n oldValue = inputField.value;\n inputField.value = \"\";\n // change password fields to hide password characters\n if (inputField === userPass || inputField === userPassConfirm) {\n inputField.type = \"password\";\n }\n };\n inputField.onblur = (e) => {\n // change back input field value to the old value if unmodified\n if (inputField.value === \"\") {\n inputField.value = oldValue;\n }\n // email validation\n if (inputField === userEmail) {\n _emailValidation_js__WEBPACK_IMPORTED_MODULE_1__.emailValidation.call(e.target);\n return;\n }\n // zip validation\n if (inputField === userZip) {\n _zipValidation_js__WEBPACK_IMPORTED_MODULE_0__.zipValidation.call(e.target);\n }\n // general input field validation\n _inputValidation_js__WEBPACK_IMPORTED_MODULE_2__.inputValidation.call(e.target, originalValue);\n\n // password validation\n if (inputField === userPassConfirm) {\n _passwordValidation_js__WEBPACK_IMPORTED_MODULE_3__.passwordValidation.call(e.target, userPass.value);\n }\n };\n });\n\n // 10. submit button\n const submitButton = makeElement(\"btn btn-primary\", \"button\");\n submitButton.type = \"submit\";\n submitButton.textContent = \"Submit\";\n formWindow.appendChild(submitButton);\n // prevent default\n submitButton.onclick = (event) => {\n event.preventDefault();\n if (\n (0,_submissionValidation_js__WEBPACK_IMPORTED_MODULE_4__.submissionValid)(\n document.querySelectorAll(\".form-control\"),\n originalValues\n )\n ) {\n // give em a thumbs up\n thumbsUp();\n return;\n }\n // or tell them to fix it\n alert(\"Please properly fill out all fields\");\n };\n};\n\n\n//# sourceURL=webpack://my-webpack-project/./src/makeWindow.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ makeWindow: () => (/* binding */ makeWindow)\n/* harmony export */ });\n/* harmony import */ var _zipValidation_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./zipValidation.js */ \"./src/zipValidation.js\");\n/* harmony import */ var _emailValidation_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./emailValidation.js */ \"./src/emailValidation.js\");\n/* harmony import */ var _inputValidation_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./inputValidation.js */ \"./src/inputValidation.js\");\n/* harmony import */ var _passwordValidation_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./passwordValidation.js */ \"./src/passwordValidation.js\");\n/* harmony import */ var _submissionValidation_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./submissionValidation.js */ \"./src/submissionValidation.js\");\n\n\n\n\n\n\nconst BODY = document.querySelector(\"main\");\n\n// close button functionality\nconst closeWindow = (headDiv) => {\n headDiv.parentElement.removeChild(headDiv);\n};\n\n// handy way of making new elements\nconst makeElement = (passedClass, passedType = \"div\") => {\n const newElement = document.createElement(passedType);\n newElement.setAttribute(\"class\", passedClass);\n return newElement;\n};\n\nconst thumbsUp = () => {\n // remove input fields\n for (let i = 0; i < 5; i++) {\n formWindow.removeChild(document.getElementById(`input-${i + 1}`));\n }\n // remove submit button\n formWindow.removeChild(formWindow.lastChild);\n // add thumbs up\n const thumbsUpGIF = document.createElement(\"img\");\n thumbsUpGIF.src = \"./src/thumbsup.gif\";\n formWindow.appendChild(thumbsUpGIF);\n};\n\nconst makeWindow = () => {\n // *make window itself*\n // 1. window body\n const formWindow = makeElement(\"card-body\", \"form\");\n formWindow.id = \"formWindow\";\n BODY.appendChild(makeElement(\"card\")).appendChild(formWindow);\n\n // 2. close button div\n const closeButton = makeElement(\"mb-3 d-flex\");\n formWindow.appendChild(closeButton);\n\n // the close button is SVG\n // 3. container for SVG - 24x24\n const closeButtonSVGContainer = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"svg\"\n );\n closeButtonSVGContainer.style = \"width: 24px; height: 24px\";\n closeButtonSVGContainer.setAttribute(\"viewbox\", \"0 0 24 24\");\n closeButtonSVGContainer.id = \"closeButton\";\n closeButton.appendChild(closeButtonSVGContainer);\n\n // 4. the actual SVG path\n const closeButtonSVGPath = document.createElementNS(\n \"http://www.w3.org/2000/svg\",\n \"path\"\n );\n closeButtonSVGPath.setAttribute(\n \"d\",\n \"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n );\n closeButtonSVGPath.fill = \"#6c757d\";\n closeButtonSVGContainer.appendChild(closeButtonSVGPath);\n // add event listeners to close the window if button is clicked\n closeButtonSVGContainer.onclick = () => closeWindow(formWindow.parentElement);\n\n // *make input fields*\n // generate container divs\n for (let i = 0; i < 5; i++) {\n const inputContainer = makeElement(\"mb-3\");\n inputContainer.id = `input-${i + 1}`;\n formWindow.appendChild(inputContainer);\n }\n\n const originalValues = [];\n\n // 5. email field\n const userEmail = makeElement(\"form-control\", \"input\");\n userEmail.type = \"text\";\n userEmail.value = \"Email address\";\n originalValues.push(userEmail.value);\n document.getElementById(\"input-1\").appendChild(userEmail);\n\n // 6. country field\n const userCountry = makeElement(\"form-control\", \"input\");\n userCountry.type = \"text\";\n userCountry.value = \"Country\";\n originalValues.push(userCountry.value);\n document.getElementById(\"input-2\").appendChild(userCountry);\n\n // 7. zip code field\n const userZip = makeElement(\"form-control\", \"input\");\n userZip.type = \"text\";\n userZip.value = \"Zip code\";\n originalValues.push(userZip.value);\n document.getElementById(\"input-3\").appendChild(userZip);\n // only allow numeric input\n userZip.oninput = (e) => {\n let numericValue = e.target.value.replace(new RegExp(/[^\\d]/, \"gi\"), \"\");\n numericValue = numericValue.substring(0, 5);\n e.target.value = numericValue;\n };\n\n // 8. password field\n const userPass = makeElement(\"form-control\", \"input\");\n userPass.type = \"text\";\n userPass.value = \"Password\";\n originalValues.push(userPass.value);\n document.getElementById(\"input-4\").appendChild(userPass);\n\n // 9. password confirmation field\n const userPassConfirm = makeElement(\"form-control\", \"input\");\n userPassConfirm.type = \"text\";\n userPassConfirm.value = \"Confirm password\";\n originalValues.push(userPassConfirm.value);\n document.getElementById(\"input-5\").appendChild(userPassConfirm);\n // blank out the input fields when focused and change back when not focused\n document.querySelectorAll(\".form-control\").forEach((inputField) => {\n // keep original value for validation purposes\n const originalValue = inputField.value;\n let oldValue = \"\";\n inputField.onfocus = () => {\n // erases characters from input field when focused\n oldValue = inputField.value;\n inputField.value = \"\";\n // change password fields to hide password characters\n if (inputField === userPass || inputField === userPassConfirm) {\n inputField.type = \"password\";\n }\n };\n inputField.onblur = (e) => {\n // change back input field value to the old value if unmodified\n if (inputField.value === \"\") {\n inputField.value = oldValue;\n }\n // email validation\n if (inputField === userEmail) {\n _emailValidation_js__WEBPACK_IMPORTED_MODULE_1__.emailValidation.call(e.target);\n return;\n }\n // zip validation\n if (inputField === userZip) {\n _zipValidation_js__WEBPACK_IMPORTED_MODULE_0__.zipValidation.call(e.target);\n }\n // general input field validation\n _inputValidation_js__WEBPACK_IMPORTED_MODULE_2__.inputValidation.call(e.target, originalValue);\n\n // password validation\n if (inputField === userPassConfirm) {\n _passwordValidation_js__WEBPACK_IMPORTED_MODULE_3__.passwordValidation.call(e.target, userPass.value);\n }\n };\n });\n\n // 10. submit button\n const submitButton = makeElement(\"btn btn-primary\", \"button\");\n submitButton.type = \"submit\";\n submitButton.textContent = \"Submit\";\n formWindow.appendChild(submitButton);\n // prevent default\n submitButton.onclick = (event) => {\n event.preventDefault();\n if (\n (0,_submissionValidation_js__WEBPACK_IMPORTED_MODULE_4__.submissionValid)(\n document.querySelectorAll(\".form-control\"),\n originalValues\n )\n ) {\n // give em a thumbs up\n thumbsUp();\n return;\n }\n // or tell them to fix it\n alert(\"Please properly fill out all fields\");\n };\n};\n\n\n//# sourceURL=webpack://my-webpack-project/./src/makeWindow.js?");
/***/ }),
diff --git a/index.html b/index.html
index 0d5511b..17782c6 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,36 @@
-
-
-
-
-
-
-
-
-Validation Form
-
-
+
+
+
+
+
+
+
+
+ Validation Form
+
+
-
-
-
-
+
+
+
+
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+