Added event details and volunteer registration # 150 #151
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Thank you for opening a pull request @KavitaMali. We'll will review it as soon as possible 🙌❤️
There was a problem hiding this comment.
Hey @KavitaMali Thanks for the contribution. Please attach a video/screenshot of the changes you made and request a review.
|
Hi @Virtual4087, I hope you're doing well! I've submitted a pull request that I believe aligns with the goals of the project. I would really appreciate it if you could take some time to review it. Please let me know if there's anything I should change or improve. Change screenshots for Tree2Hope.docx Thank you for your time and consideration! Regards, |
|
Looks good @KavitaMali but you didn't need to do all this. You could've just attached a few screenshots of the resulting webpage in the comment itself. I can browse through the code myself so you don't need to attach the code screenshots. Just letting you know so it's easier for you in the future. Anyways thanks for the help and feel free to raise new issues. |
|
Hi @Virtual4087 , Thank you for the feedback! I appreciate your understanding and will definitely keep that in mind for future submissions. I'll make sure to attach only the necessary screenshots moving forward to streamline the process. Glad I could help, and I'll definitely keep an eye out for any new issues to contribute to! Thank again!! Regards, |
A structured layout is created to display both upcoming and past environmental events.
The events are categorized into main event, upcoming events, and past events. These events are displayed using dynamically created HTML elements based on the event data stored in a JavaScript array. The main event is highlighted at the top of the page, showing the event name, date, and a button to set a reminder.
Each event (whether future or past) is displayed in its own "event card." The card includes:
The event date (in a formatted month and day layout).
Event details such as location, description, and time.
A button that allows users to register as volunteers for the event.
These event cards are dynamically rendered based on whether the event is future or past, using JavaScript functions.
Buttons are provided for various interactions:
"Volunteer with Us" button that directs users to a volunteer registration page or shows an alert that the registration is coming soon.
"Set Reminder" button that triggers an alert notifying the user that a reminder has been set for the main event.
Back button functionality to allow users to return to the previous page.
The layout adjusts for mobile devices, with a media query ensuring the event cards stack vertically when viewed on smaller screens.
Flexible design elements like buttons, font sizes, and padding ensure the page is user-friendly across devices.
JavaScript is used extensively to manage dynamic rendering of event details, handling form submissions, and interacting with the user (e.g., setting reminders and registering volunteers).
The displayEvents() function is responsible for populating the events on the page based on the array of event objects.
The Volunteer() function manages redirection or alert prompts based on the event selected.
A registration form is created for volunteers interested in environmental events such as tree plantation and conservation drives.
The form collects the following details from the user:
Full Name
Email Address
Phone Number
Event Name (users can select from a list of upcoming events)
Preferred Volunteer Role (e.g., Plantation, Awareness Campaign, Logistics Support)
Additional Information (optional)
The form is styled using CSS for a clean, modern look with appropriate spacing and alignment.
Upon form submission, a JavaScript function is triggered that prevents actual form submission, and instead, displays a pop-up alert notifying the user that they have been registered successfully and that an email has been sent.