diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..f2c9da3
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,11 @@
+{
+ "plugins": ["@babel/syntax-dynamic-import"],
+ "presets": [
+ [
+ "@babel/preset-env",
+ {
+ "modules": false
+ }
+ ]
+ ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..932eee5
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,10 @@
+module.exports = {
+ "extends": [
+ "eslint-config-prettier",
+ "prettier"
+ ],
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "sourceType": "module"
+ }
+}
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..c997d7e
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,12 @@
+node_modules/
+dist/
+src/style.css
+src/thumbsup.gif
+.babelrc
+.eslintrc.js
+.prettierignore
+.prettierrc.json
+index.html
+package-lock.json
+package.json
+README.md
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1 @@
+{}
diff --git a/README.md b/README.md
index 3cfa379..fa32788 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,15 @@
-# js-validationform
+# 🚀 Welcome to your new awesome project!
+This project has been created using **webpack-cli**, you can now run
+
+```
+npm run build
+```
+
+or
+
+```
+yarn build
+```
+
+to bundle your application
diff --git a/dist/main.js b/dist/main.js
new file mode 100644
index 0000000..e2b08a1
--- /dev/null
+++ b/dist/main.js
@@ -0,0 +1,146 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ({
+
+/***/ "./src/emailValidation.js":
+/*!********************************!*\
+ !*** ./src/emailValidation.js ***!
+ \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ emailValidation: () => (/* binding */ emailValidation)\n/* harmony export */ });\n// email field validation\nfunction emailValidation() {\n // finds \"@\"\" and \".\" in inputted email address\n const findAt = new RegExp(/[@]/, \"gi\");\n const findDot = new RegExp(/[\\.]/, \"gi\");\n if (findAt.test(this.value) && findDot.test(this.value)) {\n this.setCustomValidity(\"\");\n this.reportValidity();\n return;\n }\n // otherwise highlights field and pops up message\n this.setCustomValidity(\"Please insert a valid e-mail address\");\n this.reportValidity();\n}\n\n\n//# sourceURL=webpack://my-webpack-project/./src/emailValidation.js?");
+
+/***/ }),
+
+/***/ "./src/index.js":
+/*!**********************!*\
+ !*** ./src/index.js ***!
+ \**********************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _makeWindow_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./makeWindow.js */ \"./src/makeWindow.js\");\n\n\nconst NEWBUTTON = document.getElementById(\"newButton\");\n\nNEWBUTTON.onclick = () => (0,_makeWindow_js__WEBPACK_IMPORTED_MODULE_0__.makeWindow)();\n\n\n//# sourceURL=webpack://my-webpack-project/./src/index.js?");
+
+/***/ }),
+
+/***/ "./src/inputValidation.js":
+/*!********************************!*\
+ !*** ./src/inputValidation.js ***!
+ \********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ inputValidation: () => (/* binding */ inputValidation)\n/* harmony export */ });\n// input validation for input fields without specific requirements\nfunction inputValidation(originalValue) {\n // if the user has not entered a value different from the original, highlight and pop up message\n if (this.value === originalValue || this.value === \"\") {\n this.setCustomValidity(\"Please fill out this field\");\n this.reportValidity();\n return;\n }\n this.setCustomValidity(\"\");\n this.reportValidity();\n}\n\n\n//# sourceURL=webpack://my-webpack-project/./src/inputValidation.js?");
+
+/***/ }),
+
+/***/ "./src/makeWindow.js":
+/*!***************************!*\
+ !*** ./src/makeWindow.js ***!
+ \***************************/
+/***/ ((__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?");
+
+/***/ }),
+
+/***/ "./src/passwordValidation.js":
+/*!***********************************!*\
+ !*** ./src/passwordValidation.js ***!
+ \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ passwordValidation: () => (/* binding */ passwordValidation)\n/* harmony export */ });\n// password validation\nfunction passwordValidation(origPassword) {\n // check if passwords match\n if (this.value === origPassword) {\n this.setCustomValidity(\"\");\n this.reportValidity();\n return;\n }\n // otherwise highlight and pop up message\n this.setCustomValidity(\"Please ensure passwords match\");\n this.reportValidity();\n}\n\n\n//# sourceURL=webpack://my-webpack-project/./src/passwordValidation.js?");
+
+/***/ }),
+
+/***/ "./src/submissionValidation.js":
+/*!*************************************!*\
+ !*** ./src/submissionValidation.js ***!
+ \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ submissionValid: () => (/* binding */ submissionValid)\n/* harmony export */ });\n// submit button validation\nconst submissionValid = (inputFields, originalValues) => {\n // checks each field for validity\n let bool = true;\n let arrNum = 0;\n inputFields.forEach((inputField) => {\n // if the field is previously invalid, unchanged or blank declare validity to be false\n if (\n !inputField.validity.valid ||\n inputField.value === originalValues[arrNum] ||\n inputField === \"\"\n ) {\n bool = false;\n }\n arrNum++;\n });\n // returns final validity\n return bool;\n};\n\n\n//# sourceURL=webpack://my-webpack-project/./src/submissionValidation.js?");
+
+/***/ }),
+
+/***/ "./src/zipValidation.js":
+/*!******************************!*\
+ !*** ./src/zipValidation.js ***!
+ \******************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ zipValidation: () => (/* binding */ zipValidation)\n/* harmony export */ });\n// zip field validation\nconst LENGTH = 5;\nfunction zipValidation() {\n // if zip code is under 5 digits, highlight field and pop up message\n if (this.value.length < LENGTH) {\n this.setCustomValidity(\"Please enter a valid zip code\");\n this.reportValidity();\n return;\n }\n this.setCustomValidity(\"\");\n this.reportValidity();\n}\n\n\n//# sourceURL=webpack://my-webpack-project/./src/zipValidation.js?");
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ // Check if module is in cache
+/******/ var cachedModule = __webpack_module_cache__[moduleId];
+/******/ if (cachedModule !== undefined) {
+/******/ return cachedModule.exports;
+/******/ }
+/******/ // Create a new module (and put it into the cache)
+/******/ var module = __webpack_module_cache__[moduleId] = {
+/******/ // no module.id needed
+/******/ // no module.loaded needed
+/******/ exports: {}
+/******/ };
+/******/
+/******/ // Execute the module function
+/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/
+/******/ // Return the exports of the module
+/******/ return module.exports;
+/******/ }
+/******/
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ // define getter functions for harmony exports
+/******/ __webpack_require__.d = (exports, definition) => {
+/******/ for(var key in definition) {
+/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ }
+/******/ }
+/******/ };
+/******/ })();
+/******/
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/
+/******/ /* webpack/runtime/make namespace object */
+/******/ (() => {
+/******/ // define __esModule on exports
+/******/ __webpack_require__.r = (exports) => {
+/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ }
+/******/ Object.defineProperty(exports, '__esModule', { value: true });
+/******/ };
+/******/ })();
+/******/
+/************************************************************************/
+/******/
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module can't be inlined because the eval devtool is used.
+/******/ var __webpack_exports__ = __webpack_require__("./src/index.js");
+/******/
+/******/ })()
+;
\ No newline at end of file
diff --git a/index.html b/index.html
index 3634079..0d5511b 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
-
+