/*
 * 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");
/******/ 	
/******/ })()
;