Code updates.

.gitignore

@@ -62,3 +62,9 @@ typings/
 
 # Cloud 9
 .c9
+
+# JS build output
+dist/main.js
+
+# package lock file
+package-lock.json

README.md

@@ -14,9 +14,14 @@ One of your teammates has already finished the NameValidator. Look at it for gui
 
 ## Instruction
 
-1. Clone the [web-150-finale](https://ide.c9.io/halfnibble_1/web-150-finale) Cloud9 workspace. You need at least one clone per team.
+1. Clone the [web-150-finale](https://github.com/SeattleCentral/web150_finale) git repo and change into the dir.
+
+```
+git clone https://github.com/SeattleCentral/web150_finale
+cd web150_finale/
+```
 2. Run `npm install` to make sure you have all the required dependencies.
-3. Start Gulp with `gulp`.
+3. Start the dev server with `npm run dev`.
 4. Assign a validator function constructor to each member of your team. There are 5 validators total you may assign, 1 per team member
     - PhoneValidator
     - EmailValidator

index.html → dist/index.html

@@ -164,6 +164,6 @@ <h6 class="my-0">Promo code</h6>
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
-    <script type="text/javascript" src="js/build/app.js"></script>
+    <script type="text/javascript" src="main.js"></script>
 </body>
 </html>

js/validators/name.js

@@ -4,38 +4,38 @@
  * Date Submitted: 2018-08-15
  */
 
-var NameValidator = function(fieldId) {
-    this.id = fieldId;
-    this.element = document.getElementById(fieldId);
-    console.log(this.element.parentElement);
-    this.errorElement = this.element.parentElement
-                            .getElementsByClassName('invalid-feedback')[0];
-    console.log(this.errorElement);
-    this.setup();
-}
+class NameValidator {
 
-NameValidator.prototype.setup = function() {
-    this.element.addEventListener('keyup', (event) => {
-        if (this.valid()) {
-            this.hideErrorMessage();
-        } else {
-            this.showErrorMessage();
-        }
-    }, false);
-}
+    constructor(fieldId) {
+        this.id = fieldId;
+        this.element = document.getElementById(fieldId);
+        this.errorElement = this.element.parentElement
+                                .getElementsByClassName('invalid-feedback')[0];
+        this.setup();
+    }
 
-NameValidator.prototype.valid = function() {
-    let value = this.element.value;
-    return /^\D{2,}/.test(value);
-}
+    setup() {
+        this.element.addEventListener('keyup', (event) => {
+            if (this.valid()) {
+                this.hideErrorMessage();
+            } else {
+                this.showErrorMessage();
+            }
+        }, false);
+    }
 
-NameValidator.prototype.hideErrorMessage = function() {
-    this.errorElement.style.display = 'none';
-}
+    valid() {
+        let value = this.element.value;
+        return /^\D{2,}/.test(value);
+    }
+
+    hideErrorMessage() {
+        this.errorElement.style.display = 'none';
+    }
 
-NameValidator.prototype.showErrorMessage = function() {
-    this.errorElement.style.display = 'block';
-    console.log(this.errorElement); 
+    showErrorMessage() {
+        this.errorElement.style.display = 'block';
+    }
 }
 
 export { NameValidator }

package.json

@@ -1,13 +1,16 @@
 {
+  "name": "registration_form",
+  "version": "1.0.0",
+  "description": "Registration Form",
+  "scripts": {
+    "test": "webpack --mode development",
+    "build": "webpack --mode production",
+    "dev": "webpack-dev-server"
+  },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-preset-es2015": "^6.24.1",
-    "gulp": "^3.9.1",
-    "gulp-series": "^1.0.2",
-    "gulp-watch": "^5.0.1",
-    "rollup-plugin-babel": "^3.0.7",
-    "rollup-stream": "^1.24.1",
-    "vinyl-source-stream": "^2.0.0"
+    "webpack": "^4.37.0",
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
     "express": "^4.16.3"

webpack.config.js

@@ -0,0 +1,19 @@
+const path = require("path")
+
+module.exports = {
+    entry: './js/app.js',
+    output: {
+        filename: 'main.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    devServer: {
+        contentBase: path.resolve(__dirname, 'dist'),
+        port: 8080,
+        host: '0.0.0.0',
+        hot: true,
+        allowedHosts: [
+            '.amazonaws.com',
+            'localhost'
+        ]
+    }
+}