From 6ff8f24f1098f437da6fe5e52fb27956057a6a3c Mon Sep 17 00:00:00 2001
From: ryan <ryannganga13325@gmail.com>
Date: Wed, 26 Feb 2025 14:46:46 +0300
Subject: [PATCH] feat(remove btn): add a remove calendar button

---
 public/script.js  | 16 ++++++++++++++--
 public/styles.css | 25 +++++++++++++++++++++++++
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/public/script.js b/public/script.js
index 94dce65..4124969 100644
--- a/public/script.js
+++ b/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}">
-                <label for="override-${calendarIndex}">Override</label>
+                <div class="checkbox-group">
+                  <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();
+            }
+        }
+    });
diff --git a/public/styles.css b/public/styles.css
index a84926b..cc5168a 100644
--- a/public/styles.css
+++ b/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;
   }
\ No newline at end of file