add a color choice when making an event.

index.html

@@ -140,7 +140,32 @@
                         <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                         <textarea id="event-description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"></textarea>
                     </div>
-                    <div class="flex space-x-3">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Color</label>
+                        <div class="flex space-x-2">
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="event-color" value="indigo" checked class="hidden peer">
+                                <span class="w-8 h-8 rounded-full bg-indigo-500 peer-checked:ring-2 peer-checked:ring-indigo-700 cursor-pointer"></span>
+                            </label>
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="event-color" value="red" class="hidden peer">
+                                <span class="w-8 h-8 rounded-full bg-red-500 peer-checked:ring-2 peer-checked:ring-red-700 cursor-pointer"></span>
+                            </label>
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="event-color" value="green" class="hidden peer">
+                                <span class="w-8 h-8 rounded-full bg-green-500 peer-checked:ring-2 peer-checked:ring-green-700 cursor-pointer"></span>
+                            </label>
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="event-color" value="yellow" class="hidden peer">
+                                <span class="w-8 h-8 rounded-full bg-yellow-500 peer-checked:ring-2 peer-checked:ring-yellow-700 cursor-pointer"></span>
+                            </label>
+                            <label class="inline-flex items-center">
+                                <input type="radio" name="event-color" value="purple" class="hidden peer">
+                                <span class="w-8 h-8 rounded-full bg-purple-500 peer-checked:ring-2 peer-checked:ring-purple-700 cursor-pointer"></span>
+                            </label>
+                        </div>
+                    </div>
+<div class="flex space-x-3">
                         <button type="submit" class="flex-1 bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition-colors">
                             Save
                         </button>
@@ -247,8 +272,11 @@ updateEventsList();
                     eventElement.innerHTML = `
                         <div class="flex justify-between items-start">
                             <div>
-                                <h4 class="font-semibold text-gray-800">${event.title}</h4>
-                                <p class="text-sm text-gray-600">${eventDate.toLocaleDateString()} ${event.time ? 'at ' + event.time : ''}</p>
+                                <h4 class="font-semibold text-gray-800 flex items-center">
+                                    <span class="w-3 h-3 rounded-full mr-2 bg-${event.color}-500"></span>
+                                    ${event.title}
+                                </h4>
+<p class="text-sm text-gray-600">${eventDate.toLocaleDateString()} ${event.time ? 'at ' + event.time : ''}</p>
                                 ${event.description ? `<p class="text-sm text-gray-500 mt-1">${event.description}</p>` : ''}
                             </div>
                             <button class="text-red-500 hover:text-red-700 delete-event" data-id="${event.id}">
@@ -298,13 +326,14 @@ document.getElementById('close-modal').addEventListener('click', () => {
                 e.preventDefault();
                 
                 const eventId = document.getElementById('event-id').value;
-                const eventData = {
+                    const eventData = {
                     id: eventId || Date.now().toString(),
                     title: document.getElementById('event-title').value,
                     date: document.getElementById('event-date').value,
                     time: document.getElementById('event-time').value,
-                    description: document.getElementById('event-description').value
-                };
+                    description: document.getElementById('event-description').value,
+                    color: document.querySelector('input[name="event-color"]:checked').value
+};
                 
                 if (eventId) {
                     // Update existing event
@@ -346,7 +375,8 @@ document.getElementById('close-modal').addEventListener('click', () => {
                         document.getElementById('event-date').value = event.date;
                         document.getElementById('event-time').value = event.time || '';
                         document.getElementById('event-description').value = event.description || '';
-                        document.getElementById('delete-event').classList.remove('hidden');
+                        document.querySelector(`input[name="event-color"][value="${event.color || 'indigo'}"]`).checked = true;
+document.getElementById('delete-event').classList.remove('hidden');
                         document.getElementById('event-modal').classList.remove('hidden');
                     }
                 }

style.css

@@ -29,7 +29,10 @@ p {
 #events-container [data-id] {
     transition: background-color 0.2s ease;
 }
-
 #events-container [data-id]:hover {
     background-color: rgba(243, 244, 246, 0.5);
 }
+
+input[type="radio"]:checked + span {
+    box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
+}