diff --git a/frontend/javascript/modules/majorProjectForm.js b/frontend/javascript/modules/majorProjectForm.js
index 28c545a..93752a0 100644
--- a/frontend/javascript/modules/majorProjectForm.js
+++ b/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", '' + txt + '');
- 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", '' + txt + '');
+ 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."
+ });
+ }
}
diff --git a/frontend/stylesheets/pages/_major-project.scss b/frontend/stylesheets/pages/_major-project.scss
index 4b6e098..7bb8992 100644
--- a/frontend/stylesheets/pages/_major-project.scss
+++ b/frontend/stylesheets/pages/_major-project.scss
@@ -13,15 +13,24 @@
}
.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;
@@ -29,9 +38,4 @@
padding: 0 4px;
margin: 3px 0 10px 7px;
font-size: 10px;
-}
-
-.placeholder {
- color: #bbb;
- font-size: 16px;
}
\ No newline at end of file