diff --git a/frontend/javascript/modules/majorProjectForm.js b/frontend/javascript/modules/majorProjectForm.js
index b0b105f..76c37a7 100644
--- a/frontend/javascript/modules/majorProjectForm.js
+++ b/frontend/javascript/modules/majorProjectForm.js
@@ -35,12 +35,18 @@ export default class MajorProjectForm {
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 + '');
+ if (txt) input.insertAdjacentHTML("beforebegin", '' + txt + '');
+ let skills = document.getElementsByClassName("skill-tag")
+ skills[skills.length - 1].addEventListener('click', e => this.onRemoveTag(e));
input.value = "";
input.focus();
}
+ onRemoveTag(e) {
+ e.target.remove();
+ }
+
_submitForm(e) {
e.preventDefault();
diff --git a/frontend/stylesheets/pages/_major-project.scss b/frontend/stylesheets/pages/_major-project.scss
index c1d0629..ca0667c 100644
--- a/frontend/stylesheets/pages/_major-project.scss
+++ b/frontend/stylesheets/pages/_major-project.scss
@@ -37,6 +37,7 @@
margin: 2px 3px;
color: #444;
border-radius: 5px;
+ transition: .5s all;
}
.skill-tag:after {
@@ -47,4 +48,8 @@
padding: 0 4px;
margin: 3px 0 10px 7px;
font-size: 10px;
+}
+
+.skill-tag:hover {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
\ No newline at end of file