p1t5-Calendar · Zawadiflag12 · Jan 30, 2025 · Jan 26, 2025 · Jan 27, 2025 · Jan 27, 2025
diff --git a/ProjectOne b/ProjectOne
diff --git a/README.md b/README.md
@@ -2,32 +2,52 @@
 First Project for Software Developer Bootcamp
 
 ## Description
-Our project is a calendar that helps keep track and check off tasks throughout the month with leveling urgency. Another thing this project does is help be a good study guide.
-Our motivation for this was to create a simple and easy way to organize the tasks that you have the upcoming weeks and to help motivate the importance of studying.
-This project helps solve the problem of when a task should be completed meaning setting how urgent a task is to get done will put it, it also solves the annoyance of having to study with a feature to add flash cards which will earn you points.
+Our project is a calendar application designed to help users track and manage tasks throughout the month, with an emphasis on prioritizing tasks based on urgency. The goal of this project was to create an intuitive and efficient tool for organizing tasks and deadlines for the upcoming weeks.
+
+This application addresses the challenge of determining when tasks should be completed by allowing users to set urgency levels for each task. By prioritizing tasks according to urgency, it ensures that users stay on top of their responsibilities and deadlines.
+
+
+## To use this calendar
+1. Click on the date or day you wish to add a task to.
+2. Select “Add Task” and enter the task description.
+3. Choose the urgency level for the task and press Enter to save it.
+5. To mark a task as completed, click on it, and a line will be drawn through it.
+6. To remove a completed task, click the “X” button next to it.
+7. The "View" dropdown menu allows you to toggle between Month, Week, and Day views.
+8. Use the Next/Previous arrows to navigate between months, weeks, or days.
+9. Clicking the "Today" button will take you directly to the current date in the active view.
 
-## Usage
-To use this calendar
-1. Click on the date/day that you want to add a task to
-2. Click add task and type out the task you would like to 
-3. Decide how urgent that task is then click enter
-4. To check off a task simply click it and it’ll be taken off the task list
 
-Flash cards coming soon
 
 ## Credits 
-Phoebe Ferguson-Phobeferg
-Ryan Lang-langiam
-Zawadi Brown-Zawadiflag12
-Rogerick Gordon-Rgordon333
-Jacob McDonald-JMcDonald99
+Phoebe Ferguson (@Phobeferg)
+Ryan Lang (@langiam)
+Zawadi Brown (@Zawadiflag12)
+Rogerick Gordon (@Rgordon333)
+Jacob McDonald (@JMcDonald99)
+
+## External Resources
+W3Schools DOM Tutorial | W3 Schools
+Introduction to the Document Object Model (DOM) | MDN
+Document: querySelector() method | MDN
+EventTarget: addEventListener() method | MDN
+JS Function Basics | JS Info
+Variables | MDN
+localStorage property | MDN
+Manipulating DOM's (RENDER) | MDN
+createElement() method | MDN
+ForEach Loops | MDN
+Array.splice
+Web Forms | MDN
+day.js | npmjs
+Load Event | MDN
+
 
-https://day.js.org/
 
 ## License 
 GNU AGPLv3
 
 ## Features
-Task manager
-Color coded task list
-Study guide 
+- Task Management System: Efficiently create, prioritize, and track tasks with the ability to mark them as completed.
+- Color-Coded Task List: Easily distinguish between tasks based on their urgency with a color-coded system.
+- View Changer: Seamlessly switch between Month, Week, and Day views to get the most relevant perspective on your tasks.
diff --git a/index.html b/index.html
@@ -10,32 +10,28 @@
     <link rel="icon" type="image/x-icon" href="data:,">
 </head>
 <body>
-    <header>
-        <button id="darkb" class="dark-mode" style="font-size:23px" aria-label="Toggle dark mode">
-            <i class="bi bi-moon-stars-fill"></i>
-        </button>
-    </header>
-
+
     <div class="container py-4">
-        <header class="mb-4 text-center">
-            <h1 class="fw-bold">Group 5's Calendar</h1>
-        </header>
-
-        <div class="d-flex justify-content-between align-items-center mb-4">
+         <div class="d-flex justify-content-between align-items-center">
+            <div class="cal-head">
             <button id="prevMonth" class="btn btn-outline-primary" aria-label="Previous Month">◀</button>
-            <h1 id="monthYear" class="m-0"></h1>
+            <h1 id="monthYear"></h1>
             <button id="nextMonth" class="btn btn-outline-primary" aria-label="Next Month">▶</button>
+            </div>
             <button id="todayButton" class="btn btn-outline-success" aria-label="Go To Today">Today</button>
             <div class="hamburger-menu">
-                <button id="hamburgerButton" class="btn btn-outline-secondary" aria-label="View Button">☰ View</button>
+                <button id="hamburgerButton" class="btn btn-outline-secondary" aria-label="Open View Options">☰ View</button>
                 <div id="viewDropdown" class="dropdown-menu">
                     <div class="dropdown-item" onclick="changeView('month')" aria-label="Month View">Month View</div>
                     <div class="dropdown-item" onclick="changeView('week')" aria-label="Week View">Week View</div>
                     <div class="dropdown-item" onclick="changeView('day')" aria-label="Day View">Day View</div>
                 </div>
             </div>
+            <button id="darkb" class="dark-mode" style="font-size:28px" aria-label="Toggle dark mode">
+                <i class="bi-brightness-high-fill"></i>
+            </button>
         </div>
-    
+
         <div class="calendar-grid" id="calendarGrid">
             <!-- Example hardcoded date for demonstration -->
             <div class="date" data-date="2025-01-01">
@@ -46,29 +42,32 @@ <h1 id="monthYear" class="m-0"></h1>
             </div>
         </div>
 
-    <div id="taskModal" class="custom-modal">
-        <div class="custom-modal-content">
-            <span class="close-button" onclick="closeModal()">&times;</span>
-            <h5 aria-label="Add task">Add Task</h5>
-            <form id="taskForm">
-                <div class="mb-3">
-                    <label for="taskInput" class="form-label">Task</label>
-                    <input type="text" aria-label="Task" class="form-control" id="taskInput" required>
+        <div id="taskModal" class="custom-modal">
+            <div class="custom-modal-content" id="modalContent">
+                <div class="modal-header" id="modalHeader">
+                    <span class="close-button" onclick="closeModal()">&times;</span>
                 </div>
-                <div class="mb-3">
-                    <label class="form-label" aria-label="Urgency">Urgency</label><br>
-                    <label>
-                        <input type="radio" aria-label="Urgent" name="urgency" value="urgent" required> Urgent
-                    </label><br>
-                    <label>
-                        <input type="radio" aria-label="Non-Urgent" name="urgency" value="non-urgent"> Non-Urgent
-                    </label>
-                </div>
-                <input type="hidden" aria-label="hidden" id="selectedDate">
-                <button aria-label="Add Task" type="submit" class="btn btn-primary">Add Task</button>
-            </form>
+                <form id="taskForm">
+                    <div class="mb-3">
+                        <label for="taskInput" class="form-label">Task</label>
+                        <input type="text" aria-label="Task" class="form-control" id="taskInput" required>
+                    </div>
+                    <div class="radio-group">
+                        <label>
+                            <input type="radio" aria-label="Urgent" name="urgency" value="urgent" required>
+                            Urgent
+                        </label>
+                        <label>
+                            <input type="radio" aria-label="Non-Urgent" name="urgency" value="non-urgent">
+                            Non-Urgent
+                        </label>
+                    </div>
+                    <input type="hidden" aria-label="hidden" id="selectedDate">
+                    <button aria-label="Add Task" type="submit" class="btn btn-primary">Add Task</button>
+                </form>
+                <div class="resize-handle" id="resizeHandle"></div>
+            </div>
         </div>
-    </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
     <script src="script.js"></script>