css fixes and js fixes to tags

Author: Mobmaker55

frontend/javascript/modules/majorProjectForm.js

@@ -2,49 +2,59 @@ import FetchUtil from "../utils/fetchUtil";
 
 export default class MajorProjectForm {
 
-  tags_written = false;
-
-  constructor(form) {
-    this.form = form;
-    this.endpoint = '/major_project/submit';
-    this.render();
-  }
-
-  render() {
-    this.form.querySelector('input[type=submit]')
-      .addEventListener('click', e => this._submitForm(e));
-    this.form.querySelector('input[id=skill-input]')
-        .addEventListener('focusout', e => this.onWriteSkill(e));
-  }
-
-  onWriteSkill(e) {
-    let input = document.getElementById("skill-input")
-    if (!this.tags_written) {
-      this.tags_written = true
-      document.getElementsByClassName("placeholder").item(0).remove()
+
+    constructor(form) {
+        this.form = form;
+        this.endpoint = '/major_project/submit';
+        this.tags_written = false;
+        this.tag_keys = ["Enter", "Comma", "Tab"];
+        this.render();
+    }
+
+    render() {
+        this.form.querySelector('input[type=submit]')
+            .addEventListener('click', e => this._submitForm(e));
+        this.form.querySelector('input[id=skill-input]')
+            .addEventListener('focusout', e => this.onWriteSkill(e));
+        this.form.querySelector('input[id=skill-input]')
+            .addEventListener('keyup', e => this.onKeyPress(e));
+    }
+
+    onKeyPress(e) {
+        if (this.tag_keys.includes(e.code)) {
+            e.preventDefault();
+            this.onWriteSkill(e);
+        }
     }
+
+    onWriteSkill(e) {
+        let input = document.getElementById("skill-input")
+        if (!this.tags_written) {
+            this.tags_written = true
+            document.getElementsByClassName("placeholder").item(0).remove()
+        }
         let txt = input.value.replace(/[^a-zA-Z0-9\+\-\.\# ]/g, ''); // allowed characters list
-    if (txt) input.insertAdjacentHTML("beforebegin", '<span class="skill-tag">' + txt + '</span>');
-    input.value = "";
-    input.focus();
-
-  }
-
-  _submitForm(e) {
-    e.preventDefault();
-
-    let payload = {
-      projectName: this.form.querySelector('input[name=name]').value,
-      projectTldr: this.form.querySelector('input[name=tldr]').value,
-      projectTimeSpent: this.form.querySelector('textarea[name=time-commitment]').value,
-      projectDescription:
-        this.form.querySelector('textarea[name=description]').value
-    };
-
-    FetchUtil.postWithWarning(this.endpoint, payload, {
-      warningText: "You will not be able to edit your " +
-        "project once it has been submitted.",
-      successText: "Your project has been submitted."
-    });
-  }
+        if (txt) input.insertAdjacentHTML("beforebegin", '<span class="skill-tag">' + txt + '</span>');
+        input.value = "";
+        input.focus();
+
+    }
+
+    _submitForm(e) {
+        e.preventDefault();
+
+        let payload = {
+            projectName: this.form.querySelector('input[name=name]').value,
+            projectTldr: this.form.querySelector('input[name=tldr]').value,
+            projectTimeSpent: this.form.querySelector('textarea[name=time-commitment]').value,
+            projectDescription:
+            this.form.querySelector('textarea[name=description]').value
+        };
+
+        FetchUtil.postWithWarning(this.endpoint, payload, {
+            warningText: "You will not be able to edit your " +
+                "project once it has been submitted.",
+            successText: "Your project has been submitted."
+        });
+    }
 }

frontend/stylesheets/pages/_major-project.scss

@@ -13,25 +13,29 @@
 }
 
 .form-skilltags {
-  display: block;
+  box-shadow: inset 0 -1px 0 #ddd;
+  border: none;
+  padding: 0;
+}
+
+.placeholder {
+  color: #bbb;
+  font-size: 16px;
+}
+
+.skill-tag {
+    display: block;
   float: left;
   background: #d979e3;
   padding: 5px 10px;
-  box-shadow: inset 0 -1px 0 #ddd;
-  border: none;
 }
 
-.form-skilltags:after {
+.skill-tag:after {
   position: absolute;
   content: "×";
   border: 1px solid;
   border-radius: 10px;
   padding: 0 4px;
   margin: 3px 0 10px 7px;
   font-size: 10px;
-}
-
-.placeholder {
-  color: #bbb;
-  font-size: 16px;
 }