make delete tag work

ComputerScienceHouse · Sep 15, 2024 · 74e0511 · 74e0511
1 parent 00c4445
commit 74e0511
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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", '<span class="skill-tag">' + txt + '</span>');
+        if (txt) input.insertAdjacentHTML("beforebegin", '<span class="skill-tag" id=f"ski">' + txt + '</span>');
+        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
@@ -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);
 }