From 0a413efa2f7784f176d1ee533d9b404b423713a4 Mon Sep 17 00:00:00 2001
From: Anjana Vakil <contact@anjana.dev>
Date: Wed, 27 Aug 2025 08:49:51 -0500
Subject: exercise

---
 frontend/src/components/Events.js | 13 ++++++-------
 frontend/src/components/Forms.js  | 17 ++++++++---------
 frontend/src/components/Header.js | 18 +++++++++---------
 3 files changed, 23 insertions(+), 25 deletions(-)

(limited to 'frontend/src/components')

diff --git a/frontend/src/components/Events.js b/frontend/src/components/Events.js
index bca948a..a84d291 100644
--- a/frontend/src/components/Events.js
+++ b/frontend/src/components/Events.js
@@ -1,6 +1,6 @@
 import { Calendar } from './Icons.js';
 
-const API_URL = '/api';
+const API_URL = import.meta.env.VITE_API_URL;
 
 const loadEventsData = async () => {
   try {
@@ -30,11 +30,11 @@ export const EventModal = (event) => {
             action="${API_URL}/events/${event.id}/rsvp"
             method="POST"
         >
-          <label for="rsvp-name">Name:
-            <input type="text" class="rsvp-name" name="name" required />
+          <label for="rsvp-name-${event.id}">Name:
+            <input type="text" id="rsvp-name-${event.id}" class="rsvp-name" name="name" required />
           </label>
-          <label for="rsvp-email">Email:
-          <input type="email" class="rsvp-email" name="email" required />
+          <label for="rsvp-email-${event.id}">Email:
+            <input type="email" id="rsvp-email-${event.id}" class="rsvp-email" name="email" required />
           </label>
         
         </form>
@@ -69,8 +69,7 @@ export const EventCard = (e) => {
     </main>
     <footer>
         <span>
-            ${e.rsvps.length} 
-            ${isPast ? 'went' : 'going'}
+            ${e.rsvps?.length || 0} ${isPast ? 'went' : 'going'}
         </span>
         ${!isPast ? `
             <button role="button" data-target="modal-event-${e.id}" class="toggle-modal"
diff --git a/frontend/src/components/Forms.js b/frontend/src/components/Forms.js
index 9a0c087..8e9160f 100644
--- a/frontend/src/components/Forms.js
+++ b/frontend/src/components/Forms.js
@@ -46,15 +46,14 @@ export const setupForm = (form) => {
     });
 
     if (btn) {
-        const inputs = form.querySelectorAll('input.rsvp-email');
-        for (let input of inputs) {
-            input.addEventListener('input', () => {
-                if (!btn.textContent.startsWith('Submit')) {
-                    btn.removeAttribute('disabled');
-                    btn.textContent = 'Submit RSVP';
-                }
-            });
-        }
+        const emailInput = form.querySelector('input.rsvp-email');
+        emailInput.addEventListener('input', () => {
+            if (btn.textContent !== 'Submit RSVP') {
+                btn.removeAttribute('disabled');
+                btn.textContent = 'Submit RSVP';
+            }
+        });
+
     }
 };
 
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
index cd50ba6..f28f8e5 100644
--- a/frontend/src/components/Header.js
+++ b/frontend/src/components/Header.js
@@ -14,16 +14,16 @@ const Header = `
 </header>
 `;
 
-export function setupThemeToggle() {
-    const toggleDarkMode = () => {
-        const doc = document.documentElement;
-        const currentTheme = doc.getAttribute('data-theme');
-        if (currentTheme === 'dark') {
-            doc.setAttribute('data-theme', 'lite');
-        } else if (currentTheme === 'light') {
-            doc.setAttribute('data-theme', 'dark');
-        }
+const toggleDarkMode = () => {
+    const doc = document.documentElement;
+    const currentTheme = doc.getAttribute('data-theme');
+    if (currentTheme === 'dark') {
+        doc.setAttribute('data-theme', 'lite');
+    } else if (currentTheme === 'light') {
+        doc.setAttribute('data-theme', 'dark');
     }
+}
+export function setupThemeToggle() {
     const themeToggle = document.getElementById(themeToggleId);
     themeToggle.addEventListener('click', toggleDarkMode);
 
-- 
cgit v1.3