changed table to a list

assets/css/styles.css

@@ -7,3 +7,8 @@ body {
     height: 100vh;
 }
 
+/* Remove the bullet points on the list of events */
+#events-list {
+    list-style-type: none;
+}
+

assets/js/script.js

@@ -11,29 +11,16 @@ const eventContainer = document.getElementById("eventContainer");
 function renderEvents() {
     eventContainer.innerHTML = "";
 
-    const eventTable = document.createElement("table");
-
-    // Add table headers
-    const headerRow = document.createElement("tr");
-    const headerName = document.createElement("th");
-    headerName.textContent = "Event Name";
-
-    headerRow.appendChild(headerName);
-    eventTable.appendChild(headerRow);
-
-    // Loop through events and create rows
+    // loop through the events and create a list
+    const row = document.getElementById("events-list");
+    row.innerHTML = "";
+    // Loop through the events and create a list
     events.forEach(event => {
-        const row = document.createElement("tr");
-
-        const nameCell = document.createElement("td");
-        nameCell.textContent = event.name;
-
-        row.appendChild(nameCell);
-        eventTable.appendChild(row);
+        const eventItem = document.createElement("li");
+        eventItem.textContent = event.name;
+        row.appendChild(eventItem);
     });
 
-    // Append the table to the container
-    eventContainer.appendChild(eventTable);
 }
 // Render the events table on refresh
 renderEvents();

index.html

@@ -17,7 +17,9 @@ <h3 class="testing-testing">Testing out branching!</h3> <!--feel free to delete
 
     <section id="events">
         <h2>User Events</h2>
-
+        <div id="list_of_events">
+            <ul id="events-list"></ul>
+        </div>
         <button id="addEvent">+</button>
         <div id="eventContainer"></div>
     </section>