---
# System prepended metadata

title: 'Project: Web App UI'

---

# Problem Statement
In today's fast-paced world, individuals often struggle to manage and keep track of their daily tasks, events, and appointments in a visually appealing and interactive manner. The absence of a user-friendly and intuitive platform can lead to missed appointments, forgotten tasks, and overall inefficiency.

**Target User Group:**
Our application primarily addresses busy professionals, students, and anyone seeking an organized way to manage their daily schedules. This includes individuals who prefer a visual representation of their month, with easy access to view and modify their commitments.

#  Description of the Code:
### :link: [Codepen Link](https://codepen.io/hf2487/collab/RwEqZEL?editors=1100)
[https://codepen.io/hf2487/collab/RwEqZEL?editors=1100]

 ![](https://hackmd.io/_uploads/S1Sb2VyWa.png)
## :pencil:Components:

* Calendar Container: This is the main container that holds the entire calendar. It's styled to be centered on the screen with a specific background color.
```
<div class="container">
    <!-- ... -->
</div>
```


* Calendar Header: Displays the month "October". The month name is styled to be larger and uppercase.
```
<header>
    <h2>October</h2>
</header>
```

* Calendar Grid: This is a table that represents the days of the month. Days from the previous and next month are shown in a lighter color for context.
```
<table class="table-responsive">
    <!-- ... table rows and data ... -->
</table>
```

* Day Cells: Each day is represented as a cell in the table. Days with planned events have a green dot below them. The current day is highlighted with a green background.
```
<td class="current-day planned" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal1">8</td>
```
* Modal Pop-ups: When certain days are clicked, a modal pop-up appears. This modal displays a list of events or tasks for that day. Each event has a title, time, and additional details. There's also an option to add a new event with a title, specify if it's an all-day event, select a time, and categorize the event.

```
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <!-- ... modal content ... -->
</div>
```

## :information_source: User Interaction:
![](https://hackmd.io/_uploads/HJw1TV1Wa.png)

* Viewing the Calendar: Upon loading the page, the user sees a calendar for the month of October. Days from the previous month (September) and the next month (November) are also displayed in a lighter color when mouse hovers over. 
```
<td class="prev-month">26</td>
```

* Interacting with Days: Some days are styled and colored differently to indicate certain events or statuses. ​
  + Daily Busyness Level: Dark green indicates there are three or more scheduled events, and Light green (eg. 10th and 23rd) indicates that there are less than three scheduled events.
**(We adjusted the colors manually, and we look forward to achieving this feature once we learn JS!)**
```
<td class="planned" type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal1">10</td>
```
![](https://hackmd.io/_uploads/S1zBnEy-T.png)
* Viewing Events: When the user clicks on a day with planned events (e.g., the 8th, 10th, or 23rd), a modal pops up. This modal displays:
```
<div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <!-- ... modal content ... -->
</div>
```

* Adding/Editing Events: Within the modal, the user can type in a title for a new event, check if it's an all-day event, select a time from a dropdown menu, and categorize the event.
```
<textarea class="title-frame" placeholder="Title"></textarea>
<input type="checkbox" name="all day" id="all day">
<select class="form-select" aria-label="Default select example">
    <!-- ... time options ... -->
</select>
```

* Saving or Closing the Modal: After viewing or editing events, the user has two options:
```
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Save changes</button>
```
* Computer Reaction: When the user interacts with the calendar (e.g., clicking on a day), the computer displays the modal with the relevant information. If the user adds or edits events and clicks "Save changes," the computer would ideally save these changes **(we expect to achieve this later after we get familiar with JS)**.




## :brain: Reflection:

1. Learnings: The code taught us the value of detail-oriented analysis, especially when visual representation is absent.

1. Challenges: Inferring the application's visual and interactive aspects solely from the code was a challenge for us, as there was no live demo.

1. Improvement Areas: We aim to ask more upfront questions when presented with code and to integrate explanations seamlessly with code snippets.

1. Next Steps: Add more real features to our WebApp after learning JS, such as adding tasks, completing tasks, date changing with real time, and so on.

1. Conclusion: This was a valuable exercise for us in understanding, communication, and the importance of continuous learning in web development.