# **PROJECT 001 - Web App UI**
**Codepen:https://codepen.io/vk2517/collab/zYymOZE/35fc7467ce8ea6c011049430608d6b67**
> *For the context of this project, some <href=""> attributes are left blank as the organization is assumptive.*

**Problem:** There's a demand among philanthropic individuals for an efficient method to contribute to charitable causes. Traditional donation processes can be lengthy, unclear, or lack the intuitive interactivity that users today expect.

**Solution:** A responsive web application UI tailored to facilitate donations. Designed using HTML and CSS, the interface prioritizes user experience and provides clear, organized choices.

**Framework:**

## Components Users Interact With:
* **Navigation Menu:** Contains links for different sections and a search form. The purpose is to grant users easy access to various website sections.

* **Dropdown menus:** "Topics" & "About" sections will have more content which is accessible through dropdowns.
* **Navbar links:** Direct navigational links for the Calendar, Subscribe, and Donate sections.
* **Search input box:** Users can potentially search for specific content.
* **Logo:** While primarily branding, it can lead back to the homepage.

* **Donation Part:** This section allows users to choose a cause, specify donation frequency, provide personal and payment information, and then finally make a donation.

* **Cause Selection:** Visual cues (images) alongside radio buttons make selection intuitive.
* **Donation Frequency:** Dropdown options let users decide how often they wish to contribute.
* **Notification Preferences:** Dropdowns where users can opt for reminders prior to transactions.
* **User & Payment Info:** Essential fields for transaction processes.
* **Donation Amounts:** Pre-defined amounts streamline the process, but an "Other" option provides flexibility.

* **Footer:** Contains more links and social media icons. The purpose is to offer auxiliary information, external links, and reinforces branding.

* **Links:** Sections like "Explore" and "About Us" for more detailed content.
* **Social Media Interaction:** Connects users to the organization's online community.
* **Secondary Donate Button:** A constant call-to-action.

## Components that react to user interaction:
* **Navbar Toggler:** Clicking this will show or hide the navigation links (typically on smaller screens).

* **Topics and About Dropdowns:** Hovering over or clicking on these will show a dropdown menu.
* **Images with Radio Buttons in Donation Section:** Users can choose between different causes like Low-Income, Disabilities, and Medical Needs.
* **Payment Section:** Users can select a fixed amount for donation or specify their own.
* **Footer Social Media Icons:** Clicking on them would presumably lead to the organization's social media pages.
* **Submit Button in Donation Section:** Once clicked, this would presumably process the donation with the provided information.

## Descriptive behaviors/actions:
* **Navbar Toggler Button:** When this button is pressed, the navigation links will either appear or disappear.

* **Search Form:** Entering a keyword and submitting might search the website for relevant content. The response would depend on backend functionality.

* **Choosing a Donation Cause:** Clicking on one of the images (Low-Income, Disabilities, Medical Needs) will select the associated radio button, indicating the user's chosen cause.

* **Donation Frequency and Notification Options:** Dropdowns allow users to specify how often they'd like to donate and if they'd like a notification prior to payment.

* **Donation Amount:** Users can select from pre-defined amounts or input their own custom donation value in the "Other" field.

* **Submitting the Donation:** Once all fields are filled out, clicking the "Donate Now" button would send the data to a server to process the payment.

* **Footer Links:** Clicking on these links would navigate the user to different sections or pages of the website, enhancing user engagement and knowledge.

* **Social Media Icons in Footer:** Clicking on these would take the user to the respective social media pages of the organization.

## Reflections:
Going through the provided code was a fascinating exercise in understanding the process of dissecting a static design to envision its potential dynamic interactions. One immediate takeaway was the vast scope of interactivity a platform can offer. Each button, dropdown, or text field isn't just a design element; it holds the promise of engagement and user experience. Additionally, We realize the seamless interplay of front-end and backend development. While the frontend gives us a visual canvas, the backend logic adds life to these static visuals, making them interactive.

While the focus was primarily on the frontend, We recognize that a more holistic understanding, encompassing backend implications, can provide richer, more informed descriptions in future exercises. lay when building dynamic web applications.