Add ability to remove sets.

views/css/session.css

@@ -25,6 +25,21 @@
     border: 1px solid var(--accent);
     border-radius: 25px;
     margin: 15px 0;
+    position: relative;
+}
+
+.weightSetDelete{
+    background: linear-gradient(to right, var(--accent), var(--primary));
+    border: none;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    font-size: 22px;
+    border-radius: 50%;
+    height: 35px;
+    width: 35px;
+    cursor: pointer;
+    color: var(--dark);
 }
 
 .weightSet h3{

views/index.html

@@ -144,6 +144,7 @@
 
         <template id="weightSet">
             <div class="weightSet">
+                <button class="weightSetDelete">X</button>
                 <h3></h3>
                 <label>Weight
                     <input class="weightSetWeight" type="number" step="1">

views/js/pages/session.js

@@ -113,17 +113,32 @@ export default {
         const setElem = template.cloneNode(true);
         setElem.querySelector("h3").textContent = `Set #${num}`;
 
+        const deleteBtn = setElem.querySelector(".weightSetDelete");
+        deleteBtn.addEventListener("click", (event)=>{
+            this.deleteSet(num, event.target.parentElement);
+        });
+
         const weightInput = setElem.querySelector(".weightSetWeight");
-        weightInput.value = set.weight;
+        if(set.weight > 0) weightInput.value = set.weight;
         weightInput.addEventListener("input", ()=>{set.weight = weightInput.value});
 
         const repInput = setElem.querySelector(".weightSetReps");
-        repInput.value = set.reps;
+        if(set.reps > 0) repInput.value = set.reps;
         repInput.addEventListener("input", ()=>{set.reps = repInput.value});
 
         return setElem;
     },
 
+    deleteSet: function(num, setElem){
+        this.currentSession.exercises[this.exerciseIndex].sets.splice(num-1, 1);
+        const container = setElem.parentElement;
+        container.removeChild(setElem);
+
+        for(let i = 0; i < container.children.length; i++){
+            container.children[i].querySelector("h3").textContent = `Set #${i+1}`;
+        }
+    },
+
     getPastSets: function(id){
         const note = document.getElementById("previousSession");