final version

.babelrc

@@ -0,0 +1,11 @@
+{
+  "plugins": ["@babel/syntax-dynamic-import"],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ]
+  ]
+}

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+    "extends": [
+        "eslint-config-prettier",
+        "prettier"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    }
+}

.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

.prettierrc.json

@@ -0,0 +1 @@
+{}

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

index.html

@@ -21,7 +21,7 @@
             <main class="col-sm-6 py-3"></main>
         </center>
     </div>
-<script type="module" src="/src/index.js"></script>
+<script type="module" src="/dist/main.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
 </body>

package.json

@@ -1,19 +1,30 @@
 {
-  "name": "js-validationform",
+  "name": "my-webpack-project",
   "version": "1.0.0",
-  "description": "",
+  "description": "My webpack project",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack --mode=development",
+    "watch": "webpack --watch"
   },
   "repository": {
     "type": "git",
     "url": "ssh://_gitea@git.alexanderk.net:3022/ak/js-validationform.git"
   },
   "keywords": [],
-  "author": "",
+  "author": "ak",
-  "license": "ISC",
+  "license": "AGPL-3.0-or-later",
   "devDependencies": {
+    "@babel/core": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "@webpack-cli/generators": "^3.0.7",
+    "babel-loader": "^9.1.2",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.43.0",
+    "eslint-config-prettier": "^8.8.0",
+    "mini-css-extract-plugin": "^2.7.6",
+    "style-loader": "^3.3.1",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.4"
   }

src/emailValidation.js

@@ -1,10 +1,10 @@
 // email field validation
-export function emailValidation () {
+export function emailValidation() {
   // finds "@"" and "." in inputted email address
-    const findAt = new RegExp(/[@]/, 'gi');
+  const findAt = new RegExp(/[@]/, "gi");
-    const findDot = new RegExp(/[\.]/, 'gi');
+  const findDot = new RegExp(/[\.]/, "gi");
   if (findAt.test(this.value) && findDot.test(this.value)) {
-        this.setCustomValidity('');
+    this.setCustomValidity("");
     this.reportValidity();
     return;
   }

src/index.js

@@ -1,5 +1,5 @@
 import { makeWindow } from "./makeWindow.js";
 
-const NEWBUTTON = document.getElementById('newButton');
+const NEWBUTTON = document.getElementById("newButton");
 
 NEWBUTTON.onclick = () => makeWindow();

src/inputValidation.js

@@ -1,11 +1,11 @@
 // input validation for input fields without specific requirements
-export function inputValidation (originalValue) {
+export function inputValidation(originalValue) {
   // if the user has not entered a value different from the original, highlight and pop up message
-    if (this.value === originalValue || this.value === '') {
+  if (this.value === originalValue || this.value === "") {
     this.setCustomValidity("Please fill out this field");
     this.reportValidity();
     return;
   }
-    this.setCustomValidity('');
+  this.setCustomValidity("");
   this.reportValidity();
 }

src/makeWindow.js

@@ -1,22 +1,22 @@
-import { zipValidation } from "./zipValidation.js"
+import { zipValidation } from "./zipValidation.js";
 import { emailValidation } from "./emailValidation.js";
 import { inputValidation } from "./inputValidation.js";
 import { passwordValidation } from "./passwordValidation.js";
 import { submissionValid } from "./submissionValidation.js";
 
-const BODY = document.querySelector('main');
+const BODY = document.querySelector("main");
 
 // close button functionality
 const closeWindow = (headDiv) => {
   headDiv.parentElement.removeChild(headDiv);
-}
+};
 
 // handy way of making new elements
-const makeElement = (passedClass, passedType = 'div') => {
+const makeElement = (passedClass, passedType = "div") => {
   const newElement = document.createElement(passedType);
-    newElement.setAttribute('class', passedClass);
+  newElement.setAttribute("class", passedClass);
   return newElement;
-}
+};
 
 const thumbsUp = () => {
   // remove input fields
@@ -26,33 +26,42 @@ const thumbsUp = () => {
   // remove submit button
   formWindow.removeChild(formWindow.lastChild);
   // add thumbs up
-    const thumbsUpGIF = document.createElement('img');
+  const thumbsUpGIF = document.createElement("img");
   thumbsUpGIF.src = "/src/thumbsup.gif";
   formWindow.appendChild(thumbsUpGIF);
-}
+};
 
 export const makeWindow = () => {
   // *make window itself*
   // 1. window body
-    const formWindow = makeElement('card-body', 'form');
+  const formWindow = makeElement("card-body", "form");
-    formWindow.id = 'formWindow';
+  formWindow.id = "formWindow";
-    BODY.appendChild(makeElement('card')).appendChild(formWindow);
+  BODY.appendChild(makeElement("card")).appendChild(formWindow);
 
   // 2. close button div
-    const closeButton = makeElement('mb-3 d-flex');
+  const closeButton = makeElement("mb-3 d-flex");
   formWindow.appendChild(closeButton);
 
   // the close button is SVG
   // 3. container for SVG - 24x24
-    const closeButtonSVGContainer = document.createElementNS("http://www.w3.org/2000/svg","svg");
+  const closeButtonSVGContainer = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "svg"
+  );
   closeButtonSVGContainer.style = "width: 24px; height: 24px";
-    closeButtonSVGContainer.setAttribute('viewbox', '0 0 24 24');
+  closeButtonSVGContainer.setAttribute("viewbox", "0 0 24 24");
-    closeButtonSVGContainer.id = 'closeButton';
+  closeButtonSVGContainer.id = "closeButton";
   closeButton.appendChild(closeButtonSVGContainer);
 
   // 4. the actual SVG path
-    const closeButtonSVGPath = document.createElementNS("http://www.w3.org/2000/svg","path");
+  const closeButtonSVGPath = document.createElementNS(
-    closeButtonSVGPath.setAttribute('d', "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");
+    "http://www.w3.org/2000/svg",
+    "path"
+  );
+  closeButtonSVGPath.setAttribute(
+    "d",
+    "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"
+  );
   closeButtonSVGPath.fill = "#6c757d";
   closeButtonSVGContainer.appendChild(closeButtonSVGPath);
   // add event listeners to close the window if button is clicked
@@ -61,7 +70,7 @@ export const makeWindow = () => {
   // *make input fields*
   // generate container divs
   for (let i = 0; i < 5; i++) {
-        const inputContainer = makeElement('mb-3');
+    const inputContainer = makeElement("mb-3");
     inputContainer.id = `input-${i + 1}`;
     formWindow.appendChild(inputContainer);
   }
@@ -69,62 +78,62 @@ export const makeWindow = () => {
   const originalValues = [];
 
   // 5. email field
-    const userEmail = makeElement('form-control', 'input');
+  const userEmail = makeElement("form-control", "input");
-    userEmail.type = 'text';
+  userEmail.type = "text";
-    userEmail.value = 'Email address';
+  userEmail.value = "Email address";
   originalValues.push(userEmail.value);
-    document.getElementById('input-1').appendChild(userEmail);
+  document.getElementById("input-1").appendChild(userEmail);
 
   // 6. country field
-    const userCountry = makeElement('form-control', 'input');
+  const userCountry = makeElement("form-control", "input");
-    userCountry.type = 'text';
+  userCountry.type = "text";
-    userCountry.value = 'Country';
+  userCountry.value = "Country";
   originalValues.push(userCountry.value);
-    document.getElementById('input-2').appendChild(userCountry);
+  document.getElementById("input-2").appendChild(userCountry);
 
   // 7. zip code field
-    const userZip = makeElement('form-control', 'input');
+  const userZip = makeElement("form-control", "input");
-    userZip.type = 'text';
+  userZip.type = "text";
-    userZip.value = 'Zip code';
+  userZip.value = "Zip code";
   originalValues.push(userZip.value);
-    document.getElementById('input-3').appendChild(userZip);
+  document.getElementById("input-3").appendChild(userZip);
   // only allow numeric input
   userZip.oninput = (e) => {
-        let numericValue = e.target.value.replace(new RegExp(/[^\d]/,'gi'), "");
+    let numericValue = e.target.value.replace(new RegExp(/[^\d]/, "gi"), "");
-        numericValue = numericValue.substring(0,5);
+    numericValue = numericValue.substring(0, 5);
     e.target.value = numericValue;
-    }
+  };
 
   // 8. password field
-    const userPass = makeElement('form-control', 'input');
+  const userPass = makeElement("form-control", "input");
-    userPass.type = 'text';
+  userPass.type = "text";
-    userPass.value = 'Password';
+  userPass.value = "Password";
   originalValues.push(userPass.value);
-    document.getElementById('input-4').appendChild(userPass);
+  document.getElementById("input-4").appendChild(userPass);
 
   // 9. password confirmation field
-    const userPassConfirm = makeElement('form-control', 'input');
+  const userPassConfirm = makeElement("form-control", "input");
-    userPassConfirm.type = 'text';
+  userPassConfirm.type = "text";
-    userPassConfirm.value = 'Confirm password';
+  userPassConfirm.value = "Confirm password";
   originalValues.push(userPassConfirm.value);
-    document.getElementById('input-5').appendChild(userPassConfirm);
+  document.getElementById("input-5").appendChild(userPassConfirm);
   // blank out the input fields when focused and change back when not focused
-    document.querySelectorAll('.form-control').forEach(inputField => {
+  document.querySelectorAll(".form-control").forEach((inputField) => {
     // keep original value for validation purposes
     const originalValue = inputField.value;
-        let oldValue = '';
+    let oldValue = "";
     inputField.onfocus = () => {
       // erases characters from input field when focused
       oldValue = inputField.value;
-            inputField.value = '';
+      inputField.value = "";
       // change password fields to hide password characters
       if (inputField === userPass || inputField === userPassConfirm) {
-                inputField.type = 'password';
+        inputField.type = "password";
-            }
       }
+    };
     inputField.onblur = (e) => {
       // change back input field value to the old value if unmodified
-            if (inputField.value === '') {
+      if (inputField.value === "") {
         inputField.value = oldValue;
       }
       // email validation
@@ -143,18 +152,23 @@ export const makeWindow = () => {
       if (inputField === userPassConfirm) {
         passwordValidation.call(e.target, userPass.value);
       }
-        }
+    };
   });
 
   // 10. submit button
-    const submitButton = makeElement('btn btn-primary', 'button');
+  const submitButton = makeElement("btn btn-primary", "button");
-    submitButton.type = 'submit';
+  submitButton.type = "submit";
   submitButton.textContent = "Submit";
   formWindow.appendChild(submitButton);
   // prevent default
   submitButton.onclick = (event) => {
     event.preventDefault();
-        if (submissionValid(document.querySelectorAll('.form-control'), originalValues)) {
+    if (
+      submissionValid(
+        document.querySelectorAll(".form-control"),
+        originalValues
+      )
+    ) {
       // give em a thumbs up
       thumbsUp();
       return;
@@ -162,4 +176,4 @@ export const makeWindow = () => {
     // or tell them to fix it
     alert("Please properly fill out all fields");
   };
-}
+};

src/passwordValidation.js

@@ -1,8 +1,8 @@
 // password validation
-export function passwordValidation (origPassword) {
+export function passwordValidation(origPassword) {
   // check if passwords match
   if (this.value === origPassword) {
-        this.setCustomValidity('');
+    this.setCustomValidity("");
     this.reportValidity();
     return;
   }

src/submissionValidation.js

@@ -3,15 +3,17 @@ export const submissionValid = (inputFields, originalValues) => {
   // checks each field for validity
   let bool = true;
   let arrNum = 0;
-    inputFields.forEach(inputField => {
+  inputFields.forEach((inputField) => {
     // if the field is previously invalid, unchanged or blank declare validity to be false
-        if (!(inputField.validity.valid) || 
+    if (
+      !inputField.validity.valid ||
       inputField.value === originalValues[arrNum] ||
-            inputField === '') {
+      inputField === ""
+    ) {
       bool = false;
     }
     arrNum++;
   });
   // returns final validity
   return bool;
-}
+};

src/zipValidation.js

@@ -1,12 +1,12 @@
 // zip field validation
-const LENGTH = 5
+const LENGTH = 5;
-export function zipValidation () {
+export function zipValidation() {
   // if zip code is under 5 digits, highlight field and pop up message
   if (this.value.length < LENGTH) {
     this.setCustomValidity("Please enter a valid zip code");
     this.reportValidity();
     return;
   }
-    this.setCustomValidity('');
+  this.setCustomValidity("");
   this.reportValidity();
 }