top of page
imagvytghvbfe.png

CODE EXPLANATION

A simple description to explain how our features work with code.

Silky White Fabric
image.png
  • It allows users to add a new event or update an existing event.

  • How it works: When the button is clicked, it triggers the handleEventSubmit function. The button text changes based on whether a new event is being added (Add Event) or an event is being edited (Updated Event).

image_edited.jpg

1. Add Event

feature-add.gif
image.png
  • It allows users to edit an existing event.

  • How it works: When the edit icon is clicked, it triggers the handleEditEvent function, passing the event to be edited as an argument.

2. Edit Event

edit.gif
image_edited.jpg
image.png
  • It allows users to delete an existing event.

  • How it works: when the delete icon is clicked, it triggers the handleDeleteEvent function, passing the event ID as an argument. This function typically removes the event from the list.

image_edited.jpg

3. Delete Event

delete.gif
  • It will display the date, time, and description of each event.

  • How it works: The date is formatted using the monthsOfYear array to show the month name, day, and year. The time is displayed in a separate div. Each event has 2 buttons, edit button that will triggers the handleEditEvent function when clicked and delete button that will triggers the handleDeleteEvent function when clicked.

4. Display Event

image.png
image_edited.jpg
  • This feature is edited in .css. There is a vertical scroll bar with the event list if the content exceeds the specified height, it will enables vertical scrooling.

5. Scroll Bar

scroll-event.gif
imagvytghvbfe.png
bottom of page