feat(remove btn): add a remove calendar button

public/script.js

@@ -18,8 +18,11 @@ function isValidUrl(url) {
             newCalendar.innerHTML = `
                 <input type="text" id="prefix-${calendarIndex}" placeholder="Event prefix">
                 <input type="url" id="url-${calendarIndex}" placeholder="https://example.com/calendar.ics">
-                <input type="checkbox" id="override-${calendarIndex}">
+                <div class="checkbox-group">
-                <label for="override-${calendarIndex}">Override</label>
+                  <input type="checkbox" id="override-${calendarIndex}">
+                  <label for="override-${calendarIndex}">Override</label>
+                </div>
+                <button type="button" class="remove-btn" title="Remove calendar"></button>
             `;
             calendars.appendChild(newCalendar);
             calendarIndex++;
@@ -75,3 +78,12 @@ function isValidUrl(url) {
             });
         }
     });
+
+    document.addEventListener('click', (event) => {
+        if (event.target.classList.contains('remove-btn')) {
+            const calendarEntry = event.target.closest('.calendar-entry');
+            if (calendarEntry) {
+                calendarEntry.remove();
+            }
+        }
+    });

public/styles.css

@@ -131,4 +131,29 @@
     input[type="text"] {
       width: 100%;
     }
+  }
+
+  .remove-btn {
+    background: #fef2f2;
+    color: #dc2626;
+    border: none;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+  
+  .remove-btn:hover {
+    background: #fee2e2;
+    transform: scale(1.1);
+  }
+  
+  .remove-btn::before {
+    content: '×';
+    font-size: 1.4rem;
+    line-height: 1;
   }