# 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]

## :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:

* 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>

* 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.