Event Creator

Event Creator

Event List

body { font-family: sans-serif; margin: 20px; } .container { display: flex; } .panel { padding: 20px; border: 1px solid #ccc; margin-right: 20px; width: 50%; } .panel h2 { margin-top: 0; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input[type="text"], .form-group input[type="number"], .form-group input[type="time"], .form-group textarea { width: calc(100% - 12px); padding: 6px; border: 1px solid #ddd; border-radius: 4px; } .form-group textarea { height: 80px; } .days-checkboxes label, .radio-buttons label { display: block; margin-bottom: 5px; } .days-checkboxes input[type="checkbox"], .radio-buttons input[type="radio"] { margin-right: 5px; } button[type="submit"] { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } button[type="submit"]:hover { background-color: #45a049; } #event-list li { border-bottom: 1px dashed #ccc; padding: 10px 0; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } #event-list li:last-child { border-bottom: none; } .event-actions button { padding: 5px 10px; margin-left: 5px; cursor: pointer; } .event-actions button.edit { background-color: #007bff; color: white; border: none; border-radius: 4px; } .event-actions button.delete { background-color: #dc3545; color: white; border: none; border-radius: 4px; } document.addEventListener('DOMContentLoaded', () => { const eventForm = document.getElementById('event-form'); const eventList = document.getElementById('event-list'); let events = []; function displayEvents() { eventList.innerHTML = ''; events.forEach((event, index) => { const eventItem = document.createElement('li'); const daysDisplay = event.days.join(', ') || 'Not specified'; eventItem.innerHTML = `

${event.title}

${event.description || 'No description'}

Capacity: ${event.capacity} per slot

Duration: ${event.duration} minutes

Days: ${daysDisplay}

Time: ${event.startTime} - ${event.endTime}

Interval: ${event.slotInterval} minutes

`; eventList.appendChild(eventItem); }); // Add event listeners to the newly created buttons eventList.querySelectorAll('.delete').forEach(button => { button.addEventListener('click', deleteEvent); }); } function deleteEvent(event) { const indexToDelete = event.target.dataset.index; events.splice(indexToDelete, 1); displayEvents(); } eventForm.addEventListener('submit', function(e) { e.preventDefault(); const title = document.getElementById('event-title').value; const description = document.getElementById('description').value; const capacity = document.getElementById('capacity').value; const duration = document.getElementById('duration').value; const days = Array.from(document.querySelectorAll('input[name="days"]:checked')).map(checkbox => checkbox.value); const startTime = document.getElementById('start-time').value; const endTime = document.getElementById('end-time').value; const slotInterval = document.querySelector('input[name="slot-interval"]:checked').value; const event = { title: title, description: description, capacity: capacity, duration: duration, days: days, startTime: startTime, endTime: endTime, slotInterval: slotInterval }; events.push(event); displayEvents(); eventForm.reset(); // Clear form after submit - optional }); // Initial display of events (if any are loaded from storage, etc.) displayEvents(); }); ``` ```