add delete step button

README.md

@@ -17,7 +17,7 @@ Similar to tango.us/dubble.so/folge.me/magichow.co but all local - no data leave
 - [x] Viewer for Guide JSON
     - [x] PDF export
     - [ ] automatic file loading (url parameter/etc)
-    - [ ] removing of steps
+    - [x] removing of steps
     - [ ] reordering steps
     - [ ] add marker on step image (#4)
 - [x] Editor for Guide

editor/editor.css

@@ -175,6 +175,29 @@ body.viewer .editor {
     color: var(--primary);
 }
 
+/* Step controls */
+.stepControls button{
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: center;
+    align-items: center;
+    width: 40%;
+    height: auto;
+    padding: 10px 20px;
+    background: var(--primary);
+    color: var(--white);
+    font-size: 1rem;
+    border-radius: 20px;
+    border: 2px solid var(--primary);
+    transition: var(--transition);
+}
+
+.stepControls button:hover{
+    background: var(--white);
+    color: var(--primary);
+    border-color: var(--primary);
+}
+
 /* Print View */
 @media print{
     .stepsContainer{

editor/editor.js

@@ -116,6 +116,7 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
 
     // create container for text & image
     const textContainer = document.createElement("div");
+    const stepControls = document.createElement("div");
     const imgContainer = document.createElement("div");
 
     // create title
@@ -135,6 +136,23 @@ function createStepElement(label, description, imgSrc, triggerAction, triggerEle
     image.src = imgSrc;
     imgContainer.appendChild(image);
 
+    // create stepcontrol + delete button
+    const delBtn = document.createElement("button");
+    const delBtnIcon = document.createElement("span");
+    delBtn.textContent = "Delete step";
+    delBtnIcon.className = "material-symbols-outlined";
+    delBtnIcon.textContent = "delete";
+    delBtn.appendChild(delBtnIcon);
+
+    delBtn.addEventListener('click', function(){
+        // remove step
+        event.target.parentNode.parentNode.parentNode.remove();
+    });
+    
+    stepControls.classList = "stepControls editor";
+    stepControls.appendChild(delBtn);
+    textContainer.appendChild(stepControls);
+
     // append to main container
     container.appendChild(textContainer);
     container.appendChild(imgContainer);