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