diff --git a/CS 4241 Final Project Images/Screenshot_2022-10-13_231935.png b/CS 4241 Final Project Images/Screenshot_2022-10-13_231935.png
new file mode 100644
index 000000000..b39e70c24
Binary files /dev/null and b/CS 4241 Final Project Images/Screenshot_2022-10-13_231935.png differ
diff --git a/CS 4241 Final Project Images/calender.html_-_Lighthouse_score.png b/CS 4241 Final Project Images/calender.html_-_Lighthouse_score.png
new file mode 100644
index 000000000..ceebd4b39
Binary files /dev/null and b/CS 4241 Final Project Images/calender.html_-_Lighthouse_score.png differ
diff --git a/CS 4241 Final Project Images/index.html_Lighthouse_score.png b/CS 4241 Final Project Images/index.html_Lighthouse_score.png
new file mode 100644
index 000000000..4343b2dfd
Binary files /dev/null and b/CS 4241 Final Project Images/index.html_Lighthouse_score.png differ
diff --git a/CS 4241 Final Project Images/index.html_after_logging_in_-_Lighthouse_score.png b/CS 4241 Final Project Images/index.html_after_logging_in_-_Lighthouse_score.png
new file mode 100644
index 000000000..6436261c9
Binary files /dev/null and b/CS 4241 Final Project Images/index.html_after_logging_in_-_Lighthouse_score.png differ
diff --git a/CS 4241 Final Project Images/thumbnails_Github_Black_Logo.png b/CS 4241 Final Project Images/thumbnails_Github_Black_Logo.png
new file mode 100644
index 000000000..5eb233117
Binary files /dev/null and b/CS 4241 Final Project Images/thumbnails_Github_Black_Logo.png differ
diff --git a/CS 4241 Final Project Images/thumbnails_github.png b/CS 4241 Final Project Images/thumbnails_github.png
new file mode 100644
index 000000000..79294327a
Binary files /dev/null and b/CS 4241 Final Project Images/thumbnails_github.png differ
diff --git a/README.md b/README.md
index e5b5ca55b..29e829206 100644
--- a/README.md
+++ b/README.md
@@ -1,49 +1,88 @@
-# Final Project
-*Due before the start of class, October 13th (final day of the term)*
-For your final project, you'll implement a web application that exhibits understanding of the course materials.
-This project should provide an opportunity to both be creative and to pursue individual research and learning goals.
-
-## General description
-Your project should consist of a complete Web application, exhibiting facets of the three main sections of the course material:
-
-- Static web page content and design. You should have a project that is accessible, easily navigable, and features significant content.
-- Dynamic behavior implemented with JavaScript (TypeScript is also allowed if your group wants to explore it).
-- Server-side programming *using Node.js*. Typically this will take the form of some sort of persistent data (database), authentication, and possibly server-side computation.
-- A video (less than five minutes) where each group member explains some aspect of the project. An easy way to produce this video is for you all the groups members to join a Zoom call that is recorded; each member can share their screen when they discuss the project or one member can "drive" the interface while other members narrate (this second option will probably work better.) The video should be posted on YouTube or some other accessible video hosting service. Make sure your video is less than five minutes, but long enough to successfully explain your project and show it in action. There is no minimum video length.
-
-## Project ideation
-Excellent projects typically serve someone/some group; for this assignment you need to define your users and stakeholders. I encourage you to identify projects that will have impact, either artistically, politically, or in terms of productivity.
-
-### Deliverables
-
-#### Form Team (due 9/25)
-Students are will work in teams of 3-5 students for the project; teams of two can be approved with the permission of the instructor. Working in teams should help enable you to build a good project in a limited amount of time. Use the `#project-logistics` channel in Discord to pitch ideas for final projects and/or find fellow team members as needed.
-
-Teams must be in place by end of day on Sunday, September 25th. If you have not identified a team at this point, you will be assigned a team. You will be given some class time on Monday to work on your proposal, but please plan on reserving additional time outside of class as needed.
-
-#### Proposal (due 9/27)
-Provide an outline of your project direction and the names of associated team members.
-The outline should have enough detail so that staff can determine if it meets the minimum expectations, or if it goes too far to be reasonable by the deadline. Please include a general description of a project, and list of key technologies/libraries you plan on using (e.g. React, Three.js, Svelte, TypeScript etc.). Two to four paragraps should provide enough level of detail. Name the file proposal.md and submit a pull request by Tuesday, September 27th at 11:59 PM (end of day). Only one pull request is required per team.
-
-There are no other scheduled checkpoints for your project.
-
-#### Turning in Your Project
-Submit a second PR on the final project repo to turn in your app and code. Again, only one pull request per team.
-
-Deploy your app, in the form of a webpage, to Glitch/Heroku/Digital Ocean or some other service; it is critical that the application functions correctly wherever you post it.
-
-The README for your second pull request doesn’t need to be a formal report, but it should contain:
-
-1. A brief description of what you created, and a link to the project itself (two paragraphs of text)
-2. Any additional instructions that might be needed to fully use your project (login information etc.)
-3. An outline of the technologies you used and how you used them.
-4. What challenges you faced in completing the project.
-5. What each group member was responsible for designing / developing.
-6. A link to your project video.
-
-Think of 1,3, and 4 in particular in a similar vein to the design / tech achievements for A1—A4… make a case for why what you did was challenging and why your implementation deserves a grade of 100%.
-
-## FAQs
-
-- **Can I use XYZ framework?** You can use any web-based frameworks or tools available, but for your server programming you need to use Node.js. Your client-side scripting language should be either JavaScript or TypeScript.
+# CS 4241 Final Project
+
+
+## Links
+- LINK TO VIDEO: https://youtu.be/KZjsq5b9ePE
+- LINK TO WEBSITE: https://cs4241-finalproject.glitch.me/
+
+## Description
+Our application is a scheduling tool which allows users to create tasks/events in both a list view and calendar view.
+Each task users create will have several fields associated with it such as a title, description, start date and end date.
+Users will also be able to modify any of their preexisting tasks, as well as delete any tasks that they have already completed.
+
+
+Users can login into our app with their GitHub account via GitHub OAuth2 verification.
+After being verified, users will see all of the events associated with their account (events related to other users will not be provided).
+
+
+## Technologies used
+
+- Utilized **CSS** and **HTML** to create our calendar view, task view, and authentication page.
+- Utilized **Node JS** to create our server and send data from the client to the MongoDB database.
+- Utilized **Express** to manage our server and routes.
+- Utilized **MongoDB** to store every user's task data.
+ - Data is separated using each user's username (GitHub username).
+- Implemented **GitHub Oauth Authorization** to allow users to create and log into their account.
+ - Utilized **Axios** client to make HTTP post requests to GitHub in order to receive the user's access token.
+ - Utilized **OctoKit** library and **core.js** plugin to obtain the GitHub user's username after they have logged in ( using the user's unique access token).
+- Utilized **uuid** package to create a random ID for each task.
+
+- Utilized **dotenv** middleware library to load all your environment variables.
+- Utilized **body-parser** middleware to process data sent in an HTTP request body.
+- Utilized **Pico.css** middleware CSS Framework for styling our login pages.
+
+
+## Challenges that we faced while doing the project
+- Displaying events on the calendar and task views.
+ - Solution: Get event information from the server and use dynamic html elements to display each event, along with edit and remove options
+- Obtaining the GitHub username from GitHub Oauth Authorization
+ - Solution: Using the Oauth access token we receive after our post request is fulfilled and the OctoKit and core.js to obtain the GitHub user's username
+- Making sure that events are associated with the correct dates
+ - Solution: Use JavaScript Date objects to store information about start and end dates (specifically store valueOf() the Date to allow it to work consistently)
+- Date and Time both had separate input fields in standard html forms
+ - Solution: Combine the date and time into a JavaScript Date object using valueAsNumber field
+- Database event array was populated with standard index values rather than tags
+ - Solution: Add each event as a JavaScript object with built in tags
+- Dynamically allocated html elements were not displaying the correct data
+ - Solution: Reconfigure the way information was stored on the client in a more easily modifiable manner
+
+
+## How we implemented what we have learned in CS4241
+In this project, we put forth a lot of effort, and displayed many of the core concepts that were learned throughout the class.
+For example, in addition to setting up a webserver using express, we also implemented GitHub authorization using Oauth, allowing users to login from a third party application.
+We applied our knowledge of CSS frameworks and the 4 basic principles of design by implementing our chosen style, and modified the stylesheet to better format our calendar.
+The amount of data that is stored, retrieved, modified and displayed is much more than was required in any previous project, and the formatting for said data was much more complex.
+Additionally, we made use of different datatypes, such as dates and times that had not been explored in the class, taking the technical side of this project to the next level.
+We also optimized our application achieve at least 94% on the `Performance`, `Best Practices`, `Accessibility`, and `SEO` tests (screenshots of the Lighthouse reports for each page is in the "CS 4241 Final Project Images").
+
+## What each group member was responsible for designing /developing.
+### Everyone
+- setting up CSS and HTML for calendar
+- debugging the markup, client and server sides of the application
+### Caleb Talley
+- setting up GitHub Oauth authorization and receiving the GitHub name
+- setting up CSS framework, custom CSS and HTML for login pages
+- server logic for data
+- assignment 3 code used as base for the Task client logic
+ - add, delete buttons
+- wrote ReadMe file
+- optimized our application achieve at least 94% on the `Performance`, `Best Practices`, `Accessibility`, and `SEO` tests
+### Noah Goodman
+- setting up MongoDB database
+- server logic for data
+- client logic for events/tasks
+- CSS for calendar and list
+- retrofitting add and delete functions
+### Ryan Darcey
+- setting up CSS and HTML for Calendar
+- client logic for events/tasks
+ - adding / editing / removing events
+- checked website validation
+- optimized our application achieve at least 94% on the `Performance`, `Best Practices`, `Accessibility`, and `SEO` tests
+### Jake Matthews
+- server logic for events data
+- getting GitHub username from
+- receiving the GitHub Name
+- client logic for events/tasks
+ - database formatting and interfacing
diff --git a/package.json b/package.json
new file mode 100644
index 000000000..a3c1450d5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+ "//1": "describes your app and its dependencies",
+ "//2": "https://docs.npmjs.com/files/package.json",
+ "//3": "updating this file will download and update your packages",
+ "name": "hello-express",
+ "version": "0.0.1",
+ "description": "A simple Node app built on Express, instantly up and running.",
+ "main": "server.js",
+ "scripts": {
+ "start": "node server.js"
+ },
+ "dependencies": {
+ "@octokit/core": "^4.0.5",
+ "awsm.css": "^3.0.7",
+ "axios": "^1.1.2",
+ "body-parser": "^1.20.1",
+ "cookie-session": "^2.0.0",
+ "dotenv": "^16.0.2",
+ "express": "^4.18.1",
+ "lowdb": "^3.0.0",
+ "mongodb": "^4.10.0",
+ "octokit": "^2.0.7",
+ "response-time": "^2.3.2",
+ "urlencode": "^1.1.0",
+ "uuid": "^9.0.0"
+ },
+ "engines": {
+ "node": "16.x"
+ },
+ "repository": {
+ "url": "https://glitch.com/edit/#!/hello-express"
+ },
+ "license": "MIT",
+ "keywords": [
+ "node",
+ "glitch",
+ "express"
+ ]
+}
diff --git a/proposal.md b/proposal.md
new file mode 100644
index 000000000..3d1e27b75
--- /dev/null
+++ b/proposal.md
@@ -0,0 +1,8 @@
+### Team members:
+Ryan Darcey, Noah Goodman, Jake Matthews, Caleb Talley
+
+### App overview:
+
+This app will be a scheduling tool that will allow users to create tasks/events in both a list view and calendar view. A task will have several options/fields associated with it, namely a title, description, date, time, duration, and colors/tags. Additionally, we plan on having users login via GitHub OAuth, and a stretch goal will be to allow users to share their schedules with other users who can choose to view it.
+
+We plan on using node.js and express for the server, as well as React, Passport.js, Svelte, and mongoDB. We will also select a CSS framework to ensure a cohesive style (we have yet to determine the specific framework).
diff --git a/public/cal.css b/public/cal.css
new file mode 100644
index 000000000..21598747d
--- /dev/null
+++ b/public/cal.css
@@ -0,0 +1,132 @@
+body {
+ display: flex;
+ margin-top: 50px;
+ justify-content: center;
+ background-color: #e6bbad;
+}
+button {
+ width: 100px;
+ cursor: pointer;
+ box-shadow: 0px 0px 2px gray;
+ border: none;
+ outline: none;
+ padding: 5px;
+ border-radius: 5px;
+ color: black;
+ background-color: #e6bbad;
+}
+
+#header {
+ padding: 10px;
+ color: #d36c6c;
+ font-size: 26px;
+ font-family: sans-serif;
+ display: flex;
+ justify-content: space-between;
+}
+#header button {
+ background-color:#92a1d1;
+}
+#container {
+ width: 770px;
+}
+#weekdays {
+ width: 100%;
+ display: flex;
+ color: #247BA0;
+}
+#weekdays div {
+ width: 100px;
+ padding: 10px;
+}
+#calendar {
+ width: 100%;
+ margin: auto;
+ display: flex;
+ flex-wrap: wrap;
+}
+.day {
+ width: 100px;
+ padding: 10px;
+ height: 100px;
+ cursor: pointer;
+ box-sizing: border-box;
+ background-color: #ADD8E6;
+ margin: 5px;
+ box-shadow: 0px 0px 3px #CBD4C2;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.day:hover {
+ background-color: #e8faed;
+}
+
+.day + #currentDay {
+ background-color:#e8f4fa;
+}
+.event {
+ font-size: 10px;
+ padding: 3px;
+ background-color: #58bae4;
+ color: white;
+ border-radius: 5px;
+ max-height: 55px;
+ overflow: hidden;
+}
+.padding {
+ cursor: default !important;
+ background-color: #e6bbad !important;
+ box-shadow: none !important;
+}
+#newEventModal, #deleteEventModal {
+ display: none;
+ z-index: 20;
+ padding: 25px;
+ background-color: #e8f4fa;
+ box-shadow: 0px 0px 3px black;
+ border-radius: 5px;
+ width: 700px;
+ top: 100px;
+ left: calc(50% - 350px);
+ position: absolute;
+ font-family: sans-serif;
+}
+#eventTitleInput {
+ padding: 10px;
+ width: 100%;
+ box-sizing: border-box;
+ margin-bottom: 25px;
+ border-radius: 3px;
+ outline: none;
+ border: none;
+ box-shadow: 0px 0px 3px gray;
+}
+#eventTitleInput.error {
+ border: 2px solid red;
+}
+#cancelButton, #deleteButton {
+ background-color: #ADD8E6;
+}
+#saveButton, #closeButton {
+ background-color: #92a1d1;
+}
+#cancelButton {
+ margin-top: 1rem;
+}
+#eventText {
+ font-size: 14px;
+}
+#modalBackDrop {
+ display: none;
+ top: 0px;
+ left: 0px;
+ z-index: 10;
+ width: 100vw;
+ height: 100vh;
+ position: absolute;
+ background-color: rgba(0,0,0,0.8);
+}
+.eventDiv {
+ padding-bottom: 2rem;
+}
diff --git a/public/cal.js b/public/cal.js
new file mode 100644
index 000000000..e9cdbd7a3
--- /dev/null
+++ b/public/cal.js
@@ -0,0 +1,218 @@
+import { insertExistingEventIntoDiv } from "./client.js"
+import { initNewEventForm } from "./client.js"
+import { getDateString } from "./helper.js"
+import { add } from "./client.js"
+
+let nav = 0
+let clicked = null;
+let events = [];
+
+window.onload = function () {
+ // initButtons();
+ //load();
+
+ const eventFormElement = document.getElementById("addNewEvent")
+ initNewEventForm(eventFormElement)
+}
+
+const calendar = document.getElementById('calendar');
+const newEventModal = document.getElementById('newEventModal');
+const deleteEventModal = document.getElementById('deleteEventModal');
+const backDrop = document.getElementById('modalBackDrop');
+const eventTitleInput = document.getElementById('eventTitleInput');
+const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+
+function openModal(date) {
+ console.log("open modal")
+ clicked = new Date(date);
+ console.log("Clicked date: " + clicked)
+ //console.log("Clicked date month: " + clicked.getMonth())
+ // ~~> NOTE: Date.getMonth() is ZERO-INDEXED (Jan = 0-th month, Oct = 9-th month, etc.)
+
+ const dstring = getDateString(clicked.getFullYear(), clicked.getMonth(), clicked.getDate())
+ let formSDate = document.getElementById("inputStartDate")
+ formSDate.value = dstring
+ let formEDate = document.getElementById("inputEndDate")
+ formEDate.value = dstring
+
+ const eventList = document.getElementById('dateEventList')
+ //const eventForDay = events.find(e => e.startDate === clicked);
+
+ events.forEach(event => {
+
+ //console.log("startDate: " + event.startDate);
+ const sdate = new Date(event.startDate);
+ const edate = new Date(event.endDate);
+ //console.log(sdate);
+ //console.log(edate);
+
+ const isStartDateClicked = clicked.getFullYear() === sdate.getFullYear() && clicked.getMonth() === sdate.getMonth() && clicked.getDate() === sdate.getDate()
+ const isEndDateClicked = clicked.getFullYear() === edate.getFullYear() && clicked.getMonth() === edate.getMonth() && clicked.getDate() === edate.getDate()
+
+ if(isStartDateClicked || isEndDateClicked){
+ // console.log("Start date: " + sdate)
+ // console.log("End date: " + edate)
+
+ // add event to list of events
+
+ // div id will be equal to the SERVER-GENERATED ID (not db-generated)
+ const eventElement = document.createElement('div')
+ eventElement.setAttribute('id', `event_div_${event.id}`)
+ //console.log(eventElement)
+
+ insertExistingEventIntoDiv(eventList, eventElement, event, sdate, edate)
+
+ eventList.appendChild(eventElement)
+ }
+ })
+
+
+// if (false) {
+// const list = document.getElementById('dateEventList')
+
+// deleteEventModal.style.display = 'block';
+// } else {
+
+// }
+ newEventModal.style.display = 'block';
+ backDrop.style.display = 'block';
+}
+
+function load() {
+ console.log("cal.js : load()")
+ // get + set list of events
+ fetch("/getEvents", {
+ method: "GET",
+ })
+ .then((res) => res.json())
+ .then((res) => {
+ //console.log(res)
+
+ events = res
+ })
+ .then((res) => {
+ const dt = new Date();
+
+ if (nav !== 0) {
+ dt.setMonth(new Date().getMonth() + nav);
+ }
+
+ const day = dt.getDate();
+ const month = dt.getMonth();
+ const year = dt.getFullYear();
+
+ const firstDayOfMonth = new Date(year, month, 1);
+ const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+ const dateString = firstDayOfMonth.toLocaleDateString('en-us', {
+ weekday: 'long',
+ year: 'numeric',
+ month: 'numeric',
+ day: 'numeric',
+ });
+ const paddingDays = weekdays.indexOf(dateString.split(', ')[0]);
+
+ document.getElementById('monthDisplay').innerText =
+ `${dt.toLocaleDateString('en-us', { month: 'long' })} ${year}`;
+
+ calendar.innerHTML = '';
+
+ for(let i = 1; i <= paddingDays + daysInMonth; i++) {
+ const daySquare = document.createElement('div');
+ daySquare.classList.add('day');
+
+ if (i > paddingDays) {
+ // hard-coded to GMT-0400 (Eastern Daylight Time) for now
+ const tempDate = new Date(year, month, i - paddingDays, 0, 0)
+ const dayNumber = tempDate.valueOf()
+ //console.log("dayNumber: " + dayNumber)
+ //const dayString = `${year}-${month + 1}-${i - paddingDays}T05:00:00.000Z`
+ //console.log('load() date string: ' + dayString)
+
+ daySquare.innerText = i - paddingDays;
+ let eventsForDay = 0
+ events.forEach(e => {
+ //console.log("e.startDate: " + e.startDate)
+ const sdate = new Date(e.startDate)
+ const edate = new Date(e.endDate)
+
+ if(areDatesEqual(tempDate, sdate) || areDatesEqual(tempDate, edate)) {
+ eventsForDay += 1
+ }
+ })
+ //console.log(eventsForDay)
+
+ if (i - paddingDays === day && nav === 0) {
+ daySquare.id = 'currentDay';
+ }
+
+ if (eventsForDay > 0) {
+ const eventDiv = document.createElement('div');
+ eventDiv.classList.add('event');
+ eventDiv.innerText = `${eventsForDay} events`;
+ daySquare.appendChild(eventDiv);
+ }
+
+ daySquare.addEventListener('click', () => openModal(dayNumber));
+ } else {
+ daySquare.classList.add('padding');
+ }
+
+ calendar.appendChild(daySquare);
+ }
+ })
+ // ~~~~~~~~~~
+
+
+}
+
+function closeModal() {
+ //console.log("close modal")
+
+ // TODO: CLEAR EVENT LIST
+ document.getElementById('dateEventList').innerHTML ="";
+
+ // eventTitleInput.classList.remove('error');
+ newEventModal.style.display = 'none';
+ //deleteEventModal.style.display = 'none';
+ backDrop.style.display = 'none';
+ //eventTitleInput.value = '';
+ clicked = null;
+ load();
+}
+
+function initButtons() {
+ document.getElementById('nextButton').addEventListener('click', () => {
+ nav++;
+ load();
+ });
+
+ document.getElementById('backButton').addEventListener('click', () => {
+ nav--;
+ load();
+ });
+ document.getElementById('listView').addEventListener('click', () => {
+
+ window.location.replace("list.html")
+ });
+
+ //document.getElementById('saveButton').addEventListener('click', saveEvent);
+ //console.log("getting buttons by id")
+
+ document.getElementById('cancelButton').addEventListener('click', closeModal);
+ //document.getElementById('deleteButton').addEventListener('click', deleteEvent);
+ //document.getElementById('closeButton').addEventListener('click', closeModal);
+
+}
+
+initButtons();
+load();
+
+
+function areDatesEqual(date1, date2) {
+ const a = (date1.getFullYear() === date2.getFullYear())
+ const b = (date1.getMonth() === date2.getMonth())
+ const c = (date1.getDate() === date2.getDate())
+
+ return (a && b && c)
+}
diff --git a/public/client.js b/public/client.js
new file mode 100644
index 000000000..9ee9bb78a
--- /dev/null
+++ b/public/client.js
@@ -0,0 +1,258 @@
+import { addEventElementToParentEl } from "./helper.js"
+import { addNewEventFormToElement } from "./helper.js"
+
+// getting the username from the browser's sessionStorage
+// https://www.youtube.com/watch?v=x0VcigW9kN0&ab_channel=OpenJavaScript
+
+// const usernameVal = sessionStorage.getItem('usernameKey')
+
+// console.log(usernameVal)
+let events = [];
+
+window.onload = function () {
+
+ // console.log(document)
+ const eventFormElement = document.getElementById("addNewEvent")
+ initNewEventForm(eventFormElement)
+
+
+ // button.onclick = add
+
+ // const button2 = document.querySelector('#removeButton')
+ // button2.onclick = remove
+
+ // const button3 = document.querySelector('#resultsButton')
+ // button3.onclick = results
+
+ // const button4 = document.querySelector('#updateButton')
+ // button4.onclick = update
+
+ // from tutorial -https://www.youtube.com/watch?v=MkESyVB4oUw&ab_channel=TylerPotts
+
+/// console log to all events
+ fetch("/getEvents", {
+ method: "GET",
+ })
+ .then((res) => res.json())
+ .then((res) => {
+ events = res
+
+ //console.log(res)
+ const eventList = document.getElementById('dateEventList')
+ //console.log(eventList)
+
+ events.forEach(event => {
+ //const sdatems = Date.parse(event.startDate)
+ const sdate = new Date(event.startDate);
+ //console.log("sdatems: " + sdatems)
+ //console.log("event.startDate: " + event.startDate)
+ //console.log("sdate: " + sdate)
+ const edate = new Date(event.endDate);
+
+ // div id will be equal to the SERVER-GENERATED ID (not db-generated)
+ const eventElement = document.createElement('div')
+ eventElement.setAttribute('id', `event_div_${event.id}`)
+ insertExistingEventIntoDiv(eventList, eventElement, event, sdate, edate)
+ })
+ })
+
+ // CALLS ADD (IS DEFINED)
+ // document.getElementById('addButton').addEventListener('click', add(new Event()))
+}
+
+export function initNewEventForm(formParentElement) {
+ // call helper
+ addNewEventFormToElement(formParentElement)
+
+ // set add button onclick
+ const addButton = document.getElementById( "addButton" )
+ //console.log(addButton)
+ addButton.onclick = add
+}
+
+export function insertExistingEventIntoDiv(eventList, eventDiv, event, sdate, edate) {
+ //console.log("client.js : insertExistingEventIntoDiv()")
+
+ // call helper
+ eventDiv.className += "eventDiv"
+ //console.log(sdate)
+ //console.log(edate)
+ addEventElementToParentEl(eventDiv, event, sdate, edate)
+ eventList.appendChild(eventDiv)
+
+ //console.log(`deleteButton_${event.id}`)
+ //console.log(eventDiv)
+ // set edit/delete button onclicks
+ //let deletButton2 = eventDiv.children[4].children[1]
+ const deleteButton = document.getElementById(`deleteButton_${event.id}`)
+ deleteButton.onclick = function (e) {
+ remove(e, event.id)
+ }
+
+ const editButton = document.getElementById(`editButton_${event.id}`)
+ editButton.onclick = function (e) {
+ update(e, event.id)
+ }
+}
+
+export function add(e) {
+ e.preventDefault();
+
+ console.log("client.js:add()")
+
+ //const TaskBase = document.querySelector("#TaskBase");
+
+ const inputStartDate = document.querySelector("#inputStartDate");
+ const inputStartTime = document.querySelector("#inputStartTime");
+ const inputEndDate = document.querySelector("#inputEndDate");
+ const inputEndTime = document.querySelector("#inputEndTime");
+ const inputName = document.querySelector("#inputName");
+ const inputDescription = document.querySelector("#inputDescription");
+ const sDateString = dateIntegerFromInputs(inputStartDate, inputStartTime)
+ const eDateString = dateIntegerFromInputs(inputEndDate, inputEndTime)
+ //console.log(sDateString)
+ console.log(inputDescription.value)
+ // console.log(inputStartTime.value)
+ // console.log(inputStartDate.value)
+
+ if (validateForm(inputName.value, inputStartDate.value, inputEndDate.value)) {
+ console.log("blocked attempt to add event")
+ alert("Error: Task is missing a field");
+ } else {
+ //console.log(sDateString);
+ const json = {
+ startDate: sDateString,
+ endDate: eDateString,
+ name: inputName.value,
+ desc: inputDescription.value,
+ };
+ console.log(JSON.stringify(json));
+
+ fetch("/addEvent", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" }, // needed for MongoDB and/or the server to know you are using JSON data?
+ body: JSON.stringify(json),
+ })
+ .then((response) => response.json()) // the response will be similar to `{acknowledged: true, insertedId: '632b31bc5fefa072c1ca1fe7'}`
+ .then((resjson) => {
+ //adds field in JSON task for object ID
+ json._id = resjson.insertedId;
+ //console.log(json);
+
+ let tr = document.createElement("tr");
+ // tr.innerText = JSON.stringify(json)
+ tr.innerHTML = `
+
+
+
+