hover and pointer for events

chingu-voyages · Sep 24, 2024 · ee940ed · ee940ed
1 parent a404fe7
commit ee940ed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -34,4 +34,16 @@
 
 .delete-button:hover {
     background-color: #d32f2f; /* Darker red on hover */
+}
+
+/* Style for the event button */
+.event-button {
+    margin-left: 10px; /* Space between the event name and 'X' button */
+    border: none;
+    padding: 2px 5px;
+    cursor: pointer;
+}
+
+.event-button:hover {
+    font-weight: bold; /* Bold on hover */
 }
diff --git a/assets/js/script.js b/assets/js/script.js
@@ -33,6 +33,7 @@ function createEventItem(event,index) {
     const eventItem = document.createElement("li");
     eventItem.textContent = event.name;
     eventItem.classList.add("event-item");
+    eventItem.classList.add("event-button");
 
     // Create a container for each event and its delete button
     const eventContainerItem = document.createElement("div");