Global

Members

(constant) API_URL :string

The URL of the Firebase Realtime Database.
Type:
  • string
Source:

(constant) TIMEOUT :number

Timeout in milliseconds that is used for how long the warning in the form validation is shown.
Type:
  • number
Source:

currentTarget :HTMLElement|null

The current target element being interacted with, used to determine whether to highlight a drag area or not.
Type:
  • HTMLElement | null
Source:

(constant) currentUser :Object

The current user object, used to store the user's information and keep track of their login status.
Type:
  • Object
Source:

currentlyDraggedElement :number

Reference to the currently dragged element.
Type:
  • number
Source:

currentlyOpenMenu :HTMLDivElement|null

A reference to the currently open menu, if any.
Type:
  • HTMLDivElement | null
Source:

(constant) firebaseConfig :FirebaseConfig

The Firebase Realtime Database configuration.
Type:
Source:

globalContacts :Array.<Object>

The array of contacts.
Type:
  • Array.<Object>
Source:

globalState :string

The global state of the app.
Type:
  • string
Source:

globalTodos :Array.<Object>

The array of todos.
Type:
  • Array.<Object>
Source:

isCategoryDropdownOpen :boolean

Whether the category dropdown is currently open.
Type:
  • boolean
Source:

isContactDropdownOpen :boolean

Whether the contact dropdown is currently open.
Type:
  • boolean
Source:

priority :string

The current priority of the task being added.
Type:
  • string
Source:

(constant) profileColors :Array.<string>

An array of colors that can be used to color user profiles.
Type:
  • Array.<string>
Source:

searchTodoRef :HTMLInputElement

Reference to the search task input element.
Type:
  • HTMLInputElement
Source:

selectedOptions :Array.<string>

Array of selected options in the contact dropdown.
Type:
  • Array.<string>
Source:

subTasks :Object.<string, {title: string, completed: boolean}>

Object containing subtasks. Each key is a subtask id and each value is an object containing the subtask title and completed status.
Type:
  • Object.<string, {title: string, completed: boolean}>
Source:

(constant) textContent

Shows a toast message based on the operation type and the response.
Source:

(constant) todoStates :Object

An object representing the different states a task can be in.
Type:
  • Object
Properties:
Name Type Description
todo string Represents tasks that are to be done.
progress string Represents tasks that are in progress.
feedback string Represents tasks awaiting feedback.
done string Represents tasks that are completed.
Source:

Methods

addBadge(contactId, contactInitials, badgeColor)

Adds a badge to the selected-badges container for the given contact ID and initials. The badge is colored with the given color.
Parameters:
Name Type Description
contactId string The ID of the contact to add a badge for.
contactInitials string The initials of the contact to add a badge for.
badgeColor string The color of the badge to add.
Source:

addDragAreaHighlighting(elementId)

Highlights the drag area element identified by the given elementId by adding the "drag-area" class to it. Also toggles the placeholder element for the given elementId. If the element is already highlighted or does not exist, the function does nothing.
Parameters:
Name Type Description
elementId string The id of the drag area element to highlight.
Source:

addHollowPlaceholder(elementId)

Makes the hollow rag area placeholder within the specified column visible by removing the "d_none" class from it.
Parameters:
Name Type Description
elementId string The ID of the column element in which to show the hollow placeholder.
Source:

addMobileMenu(index, todo) → {void}

Adds a dropdown menu to the bottom of the card for switching between todo states on mobile devices. The menu shows all states except for the current one.
Parameters:
Name Type Description
index number The index of the todo in `globalTodos`.
todo Todo The todo object to be rendered.
Source:
Returns:
Type
void

addSubtask()

Adds a new subtask to the subtask list if the input field contains text. Generates a unique subtask ID, creates a new subtask list item, appends it to the subtask list, and updates the global subTasks object with the new subtask. Clears the input field and checks the need for scrollbar adjustments.
Source:

adjustDisplayForScreenSize(contact)

Adjusts the display of the contact list and main container based on the selected contact and screen size.
Parameters:
Name Type Description
contact Object The currently selected contact.
Source:

adjustNavbarForMobile() → {void}

Adjusts the navbar based on the window width.
Source:
Returns:
Type
void

adjustNavbarForMobile() → {void}

Adjusts the navbar based on the window width.
Source:
Returns:
Type
void

allowDrop(event)

Allows an element to be dropped by preventing the default behavior. This function is used as an event handler for the `ondragover` event, enabling drag-and-drop functionality on an element.
Parameters:
Name Type Description
event Event The dragover event object.
Source:

applyAnimation(animationType)

Applies the given animation to the modal content element.
Parameters:
Name Type Description
animationType string The type of animation to apply.
Source:

applyAnimation(animationType)

Applies the given animation to the modal content element. The animation is applied by setting the animation CSS property on the element.
Parameters:
Name Type Description
animationType string The type of animation to apply.
Source:

applyAnimationToContactView(animationType, element, callback)

Applies an animation to the contact view element.
Parameters:
Name Type Description
animationType string The type of animation to apply.
element HTMLElement The element to which the animation will be applied.
callback function A callback function to execute after the animation ends.
Source:

applyCardAnimation(animationType)

Applies the given animation to the big card modal content element.
Parameters:
Name Type Description
animationType string The type of animation to apply.
Source:

arrayToObject(arr) → {Object}

Converts an array of objects back to an object, using the 'createdAt' property as the key.
Parameters:
Name Type Description
arr Array.<Object> The input array to convert to an object.
Source:
Returns:
An object where each key is the 'createdAt' value of the corresponding item in the array.
Type
Object

changeVisibilityIcon() → {void}

Changes the type of the login password field between "password" and "text" based on the current type. If the type is "password", it changes to "text" and changes the visibility icon to be a visibility icon. If the type is "text", it changes to "password" and changes the visibility icon to be a non-visibility icon.
Source:
Returns:
Type
void

checkAndLoadUserCredentialsFromLocalStorage() → {Object}

Checks and loads user credentials from local storage if the "Remember Me" option was selected. Updates the "Remember Me" icon to indicate the selection status.
Source:
Returns:
An object containing the email and password if credentials are found and the "Remember Me" option is enabled; otherwise, returns an object with empty strings for email and password.
Type
Object

checkAndSaveUserCredentialsToLocalStorage()

Checks if the "Remember Me" option is selected and saves the user credentials to local storage if it is. The credentials are retrieved from the login form, and an additional "isRememberMe" flag is added to indicate the selection status.
Source:

checkAuthorization()

Checks if the user is logged in and authorized to access the current route. If the user is logged in, it redirects to the summary page if the current route is the homepage. If the user is not logged in and the current route is protected, it redirects to the login page.
Source:

(async) checkIfDuplicate(email, phone, contacts) → {Promise.<boolean>}

Checks if a contact with the same email or phone number already exists in the contacts list.
Parameters:
Name Type Description
email string The email to check for duplicates.
phone string The phone number to check for duplicates.
contacts Array.<Object> The array of contact objects to check against.
Source:
Returns:
A promise that resolves to true if a duplicate contact is found, otherwise false.
Type
Promise.<boolean>

checkScrollbar() → {void}

Checks for overflow on specific elements and adjusts padding and margin to account for scrollbars. Adds padding to the subtask list if it has a vertical scrollbar and adjusts the padding and margin of specified form containers.
Source:
Returns:
Type
void

clearBoardColumns() → {void}

Clears all task cards from all columns on the board. This function is called whenever the user searches for a task, in order to clear the board and then render only the found tasks.
Source:
Returns:
Type
void

clearDueDate(dueDateElement, deadlineTextElement)

Clears the due date display and resets the label text.
Parameters:
Name Type Description
dueDateElement HTMLElement The DOM element for displaying the due date.
deadlineTextElement HTMLElement The DOM element for displaying the label text.
Source:

clearErrorMessages()

Clears the error messages displayed in the sign-up form by setting the textContent of the elements with ids "nameError", "emailError", "passwordError", and "passwordDoubleError" to an empty string.
Source:

clearForm() → {void}

Clears all the input fields in the add task form and resets all the selected state, including the category, priority, contacts, and subtasks.
Source:
Returns:
Type
void

clearInputFields() → {void}

Clears the input fields of the add-task form by setting the value of the specified elements to an empty string.
Source:
Returns:
Type
void

clearSubtaskInput() → {void}

Clears the input field of the subtask list and triggers an input event on it, so that the UI is updated correctly. This function is called when the user adds a subtask, to clear the input field and be ready for the next subtask.
Source:
Returns:
Type
void

clearWarnings() → {void}

Clears all warning messages displayed in the form by selecting elements with the class "warning-text" and removing them from the DOM.
Source:
Returns:
Type
void

closeAddTaskModal(eventopt)

Closes the add task modal and removes it from the DOM. It also removes the scripts required for the modal and re-enables body scrolling.
Parameters:
Name Type Attributes Description
event Event <optional>
 The event that triggered the modal to close.
Source:

closeContactModal(eventopt)

Closes the contact modal, removing it from the DOM.
Parameters:
Name Type Attributes Description
event Event <optional>
 Optional event.
Source:

closeEditMenu(event) → {void}

Closes the contact edit menu when clicked outside of it.
Parameters:
Name Type Description
event Event The event object from the click event.
Source:
Returns:
Type
void

countTodos(todos, state) → {number}

Counts the number of todos in a specific state.
Parameters:
Name Type Description
todos Array An array of todo objects.
state string The state of the todos to count (e.g., "todo", "done").
Source:
Returns:
The count of todos in the specified state.
Type
number

countUrgentTodos(todos) → {number}

Counts the number of urgent todos that are not marked as done.
Parameters:
Name Type Description
todos Array An array of todo objects.
Source:
Returns:
The count of urgent todos (high priority) that are not done.
Type
number

createAssignedMemberElement(contact, index, totalMembers) → {HTMLElement|string}

Creates an HTML element representing an assigned member badge.
Parameters:
Name Type Description
contact Object The contact object containing information about the assigned member.
index number The index of the member in the assigned members list.
totalMembers number The total number of assigned members.
Source:
Returns:
The HTML element representing the member badge or an empty string if the index is greater than 3.
Type
HTMLElement | string

(async) createContact() → {Promise.<void>}

Creates a new contact with the form data and adds it to the Firebase Realtime Database. The function first retrieves the form data, validates it, and creates a new contact object by spreading the form data and adding the current timestamp for createdAt. The function then calls putDataInFirebase to add the contact to the database and shows a toast message with the status of the operation. Finally, the function closes the contact modal, renders the contacts page and selects the latest created contact.
Source:
Returns:
Type
Promise.<void>

(async) createContactInDatabase(newContact, user) → {Promise.<(Response|Error)>}

Puts new contact data into the Firebase Realtime Database.
Parameters:
Name Type Description
newContact Object The new contact data to be added.
user string The user to add the contact for.
Source:
Returns:
A promise that resolves with the response from the Firebase Database if successful, or rejects with an error if there is a HTTP error.
Type
Promise.<(Response|Error)>

createSubtaskListItem(subtaskText, subtaskId) → {HTMLLIElement}

Creates a new subtask list item with the given subtask text and ID. The list item is given a double click event listener that calls the editSubtask function.
Parameters:
Name Type Description
subtaskText string The text of the subtask.
subtaskId string The ID of the subtask.
Source:
Returns:
- The created subtask list item.
Type
HTMLLIElement

(async) createTodo() → {Promise.<void>}

Creates a new todo item with the values from the add-task form and adds it to the globalTodos object. After creating the todo item, it updates the Firebase Realtime Database and clears the form.
Source:
Returns:
- A promise that resolves when the todo item is created and the data is updated in the Firebase Realtime Database.
Type
Promise.<void>

(async) createUserInFirebaseDatabase(newUser) → {Promise.<(Response|Error)>}

Creates a new user in the Firebase Realtime Database.
Parameters:
Name Type Description
newUser Object The new user data to be added.
Source:
Returns:
A promise that resolves with the response from the Firebase Database if successful, or rejects with an error if there is a HTTP error.
Type
Promise.<(Response|Error)>

(async) deleteContact() → {Promise.<void>}

Deletes the contact with the id specified in the data-created-at attribute of the #createdAt element from the Firebase Realtime Database. If the deletion is successful, the contact view is removed and the contacts page is re-rendered.
Source:
Returns:
Type
Promise.<void>

(async) deleteContactFromAssignedMembers(contact) → {Promise.<void>}

Deletes the given contact from the assigned members of all todos in the globalTodos array and patches the updated todos object in the Firebase Realtime Database.
Parameters:
Name Type Description
contact Object The contact to be deleted.
Source:
Returns:
Type
Promise.<void>

(async) deleteContactFromDatabase(user, contactID) → {Promise.<Response>}

Deletes the contact with the given contactID from the Firebase Realtime Database.
Parameters:
Name Type Description
user string The user whose contact is to be deleted.
contactID string The ID of the contact to be deleted.
Source:
Returns:
A promise that resolves with the response from the Firebase Database if successful, or rejects with an error if there is a HTTP error.
Type
Promise.<Response>

(async) deleteTaskCard(index) → {Promise.<void>}

Deletes a task card from the board and updates the UI. This function deletes a task card at the specified index from the global todos array, closes the task card modal, clears all columns on the board, and re-renders the remaining todos and placeholder elements.
Parameters:
Name Type Description
index number The index of the task card to be deleted.
Source:
Returns:
- A promise that resolves when the deletion and UI update are complete.
Type
Promise.<void>

(async) deleteTodo(index) → {Promise.<void>}

Deletes the todo at the specified index from the global todos array and from the Firebase Realtime Database. If the deletion is successful, a toast message is shown. Otherwise, an error is logged to the console.
Parameters:
Name Type Description
index number The index of the todo to be deleted.
Source:
Returns:
- A promise that resolves when the deletion is complete.
Type
Promise.<void>

(async) deleteTodosInFirebase(user, todoID) → {Promise.<(Response|Error)>}

Deletes the todo with the given todoID from the Firebase Realtime Database.
Parameters:
Name Type Description
user string The user whose todo is to be deleted.
todoID string The ID of the todo to be deleted.
Source:
Returns:
A promise that resolves with the response from the Firebase Database if successful, or rejects with an error if there is a HTTP error.
Type
Promise.<(Response|Error)>

deselectContact(contactViewElement)

Deselects the currently selected contact and clears the contact view.
Parameters:
Name Type Description
contactViewElement HTMLElement The element displaying the contact view.
Source:

displayContactView(contactViewElement, initials, contact)

Displays the contact view with the selected contact's information.
Parameters:
Name Type Description
contactViewElement HTMLElement The element displaying the contact view.
initials string The initials of the contact.
contact Object The contact object containing contact information.
Source:

editSubtask(iconElement) → {void}

Starts an edit session on a subtask list item. The function is called when the user double clicks on the text of a subtask list item. The function creates a new text input element, sets its value to the current subtask text and replaces the current subtask text element with the new input element. The function also updates the icon container of the subtask list item to include "accept" and "delete" icons.
Parameters:
Name Type Description
iconElement HTMLElement The element that was double clicked to start the edit session. This element should be the "edit" icon of a subtask list item.
Source:
Returns:
Type
void

(async) fetchData(url) → {Promise.<Object>}

Fetches data from the given URL and returns it as JSON.
Parameters:
Name Type Description
url string The URL to fetch from.
Source:
Throws:
If the URL is invalid or the response from the server was not OK.
Type
Error
Returns:
A promise that resolves with the data from the URL as JSON.
Type
Promise.<Object>

fillCredentialsInLoginForm(credentials)

Fills in the login form with the provided credentials.
Parameters:
Name Type Description
credentials Object The object containing the email and password to fill in the form with.
Properties
Name Type Description
email string The email to fill in the form with.
password string The password to fill in the form with.
Source:

filterContactOptions() → {void}

Filters the contact dropdown options based on the search input value and re-renders the dropdown with the filtered options.
Source:
Returns:
Type
void

findEarliestDeadline(todos) → {Object}

Finds the earliest deadline among urgent todos that are not marked as done.
Parameters:
Name Type Description
todos Array An array of todo objects.
Source:
Returns:
An object containing the earliest deadline as a Date object.
Type
Object

findKeyByCreatedAt(obj, createdAt) → {string|undefined}

Finds the key in an object whose associated value has a specific 'createdAt' property value.
Parameters:
Name Type Description
obj Object The input object to search through.
createdAt string | number The 'createdAt' value to match against the object's values.
Source:
Returns:
The key in the object whose value has the matching 'createdAt' value, or undefined if not found.
Type
string | undefined

focusSubtaskInput()

Sets focus on the subtask input field, allowing the user to immediately start typing. This function assumes that an element with the ID "subtasks" exists in the DOM.
Source:

formatDueDate(dueDate) → {string}

Converts a given date string to a human-readable string in the default locale format.
Parameters:
Name Type Description
dueDate string The date string to be formatted.
Source:
Returns:
The formatted date string.
Type
string

generateContactListHtml(contacts, assignedMembers, filter) → {string}

Given an array of contacts, an array of assigned members, and a filter string, returns an HTML string representing the contact list.
Parameters:
Name Type Description
contacts Array.<Object> An array of contact objects.
assignedMembers Array.<string> An array of strings representing the names of assigned members.
filter string A string to filter the contacts by.
Source:
Returns:
An HTML string representing the contact list.
Type
string

getAddTaskModalTemplate() → {string}

Returns the template for the add task modal. The template includes a .modal-overlay with a .modal-content element inside. The .modal-content has a close button as its first child.
Source:
Returns:
The html template for the add task modal.
Type
string

getAddTaskTemplate() → {String}

Returns the HTML template for the add task form.
Source:
Returns:
The add task form template.
Type
String

getAssignedMemberColor(assignedMemberName) → {string|undefined}

Returns the color of the assigned member specified by the given name.
Parameters:
Name Type Description
assignedMemberName string The name of the assigned member.
Source:
Returns:
The color of the assigned member or undefined if no contact with the given name is found.
Type
string | undefined

getAssignedMembersNames() → {Array.<string>}

Retrieves the names of the assigned members based on the selected options.
Source:
Returns:
An array of names of the assigned members.
Type
Array.<string>

getBoardColumns() → {Object}

Retrieves the column elements from the DOM by their IDs and returns them as an object.
Properties:
Name Type Description
todoColumn HTMLElement The todo column element.
progressColumn HTMLElement The progress column element.
feedbackColumn HTMLElement The feedback column element.
doneColumn HTMLElement The done column element.
Source:
Returns:
An object containing references to the todo, progress, feedback, and done column elements.
Type
Object

getBoardColumnsFromDOM() → {void}

Retrieves the column elements from the DOM and assigns them to the corresponding variables. The todo, progress, feedback, and done column elements are obtained using their respective IDs.
Source:
Returns:
Type
void

(async) getContactIdByCreatedAt(createdAt, user) → {Promise.<(string|undefined)>}

Given the 'createdAt' property of a contact and a user, returns the id of the contact in the Firebase Realtime Database.
Parameters:
Name Type Description
createdAt string | number The 'createdAt' property of the contact.
user string The user whose contacts are to be searched.
Source:
Returns:
A promise that resolves with the id of the contact if found, or undefined if not found.
Type
Promise.<(string|undefined)>

getContactModalTemplate(type, fullName, email, phone, initials, color) → {string}

Given the type, full name, email, phone, initials, and color of a contact, returns an HTML string representing a single contact modal in the contact list.
Parameters:
Name Type Description
type string The type of the contact modal, either "add" or "edit".
fullName string The full name of the contact.
email string The email of the contact.
phone string The phone of the contact.
initials string The initials of the contact.
color string The color of the contact's avatar.
Source:
Returns:
An HTML string representing the contact modal.
Type
string

getContactSectionTemplate(letter, contactElements) → {string}

Given the letter and an array of contact elements, returns an HTML string representing a contact list section.
Parameters:
Name Type Description
letter string The letter of the contact list section.
contactElements Array.<string> An array of HTML strings representing the contact elements.
Source:
Returns:
An HTML string representing the contact list section.
Type
string

getContactTemplate(index, initials, color, fullName, email) → {string}

Given the index, initials, color, full name, and email of a contact, returns an HTML string representing a single contact item in the contact list.
Parameters:
Name Type Description
index number The index of the contact in the array of contacts.
initials string The initials of the contact.
color string The color of the contact's avatar.
fullName string The full name of the contact.
email string The email of the contact.
Source:
Returns:
An HTML string representing the contact item.
Type
string

getContactViewTemplate(initials, contactInfo) → {string}

Given the initials, color, name, email, and phone of a contact, returns an HTML string representing a single contact card in the contact view.
Parameters:
Name Type Description
initials string The initials of the contact.
contactInfo Object - An object containing the color, name, email, and phone of the contact.
Source:
Returns:
An HTML string representing the contact card.
Type
string

(async) getContactsFromData(user) → {Promise.<void>}

Fetches the contacts from the given user from the Firebase Realtime Database.
Parameters:
Name Type Description
user string The user whose contacts are to be retrieved.
Source:
Returns:
- A promise that resolves when the data has been fetched and the contacts array has been set.
Type
Promise.<void>

getCredentialsFromForm() → {Object}

Retrieves the user's email and password input values from the login form. The values are trimmed of any leading or trailing whitespace.
Source:
Returns:
An object containing the email and password.
Type
Object

(async) getDataFromFirebase() → {Promise.<(Object|undefined)>}

Retrieves the entire data object from the Firebase Realtime Database.
Source:
Returns:
A promise that resolves with the data object from the Firebase Realtime Database, or undefined if no data is found.
Type
Promise.<(Object|undefined)>

getDoneAmount(subTasks) → {number}

Counts the number of tasks that are marked as done in the given subTasks array.
Parameters:
Name Type Description
subTasks Array.<Object> The array of subTasks to count done tasks from.
Source:
Returns:
The number of tasks that are marked as done.
Type
number

getDragAreaHollowPlaceholder() → {string}

Returns an HTML string representing a hollow drag area placeholder, used to indicate a place where a task card can be dragged to.
Source:
Returns:
An HTML string representing the hollow drag area placeholder.
Type
string

getFormData() → {Object}

Gets the form data from the contact form.
Source:
Returns:
An object with the form data: {name: string, email: string, phone: string}.
Type
Object

getFormData(urgentElementId, mediumElementId, lowElementId, titleId, descriptionId, dueDateId) → {Object}

Collects the values of the various form elements and returns an object containing the task title, description, due date, priority and assigned members.
Parameters:
Name Type Description
urgentElementId string The ID of the element representing the urgent priority.
mediumElementId string The ID of the element representing the medium priority.
lowElementId string The ID of the element representing the low priority.
titleId string The ID of the title input element.
descriptionId string The ID of the description textarea element.
dueDateId string The ID of the due date input element.
Source:
Returns:
An object containing the task title, description, due date, priority and assigned members.
Type
Object

getFormValues() → {Array.<string>}

Retrieves the values of the sign-up form fields and returns them in an array. The array contains the name, email, password, and confirm password values in that order. The values are retrieved from the DOM using the ids of the input fields and trimmed of any whitespace.
Source:
Returns:
The values of the sign-up form fields.
Type
Array.<string>

getHeaderTemplate() → {string}

Returns an HTML template for the header component.
Source:
Returns:
The HTML template.
Type
string

getInitialsFromContact(contact) → {string}

Given a contact object, returns the contact's initials as a string. The initials are determined by taking the first character of the first name and the first character of the last name. If either the first or last name is not present, the corresponding initial is an empty string.
Parameters:
Name Type Description
contact object Contact object with a `name` property.
Source:
Returns:
The contact's initials as a string.
Type
string

(async) getLatestCreatedContact(user) → {Promise.<(Object|undefined)>}

Retrieves the latest created contact for a specified user from Firebase.
Parameters:
Name Type Description
user string The user whose contacts are to be retrieved.
Source:
Returns:
A promise that resolves with the latest created contact object or undefined if no contacts are found.
Type
Promise.<(Object|undefined)>

getNavbarTemplate(currentPage) → {string}

Returns an HTML template for the navbar.
Parameters:
Name Type Description
currentPage string The currently active page.
Source:
Returns:
The HTML template.
Type
string

getNewDescriptionValue(todoDescriptionElementID) → {string}

Retrieves the new description value from the description textarea field.
Parameters:
Name Type Description
todoDescriptionElementID string The ID of the textarea field containing the new description.
Source:
Returns:
The value of the textarea field with the given ID, representing the new description of the todo.
Type
string

getNewDueDateValue(duoDateElementID) → {string}

Retrieves the new due date value from the due date input field.
Parameters:
Name Type Description
duoDateElementID string The ID of the input field containing the new due date.
Source:
Returns:
The value of the input field with the given ID, representing the new due date of the todo.
Type
string

getNewTitleValue(todoTitelID) → {string}

Retrieves the new title value from the title input field.
Parameters:
Name Type Description
todoTitelID string The ID of the input field containing the new title.
Source:
Returns:
The value of the input field with the given ID, representing the new title of the todo.
Type
string

getObjectLength(obj) → {number}

Returns the number of key-value pairs in the given object.
Parameters:
Name Type Description
obj Object The input object to get the length from.
Source:
Returns:
The number of key-value pairs in the object.
Type
number

getPlaceholderText(columnElement) → {string}

Returns a placeholder text for a given column element.
Parameters:
Name Type Description
columnElement Object A column element from the board.
Properties
Name Type Description
id string The id of the column element.
Source:
Returns:
The placeholder text for the column.
Type
string

getProgressValueFromSubTasks(subTasks) → {number}

Calculates the progress value in percent from the given subTasks. The progress value is determined by the number of done subtasks divided by the total number of subtasks.
Parameters:
Name Type Description
subTasks
Source:
Returns:
The progress value in percent.
Type
number

getSelectedPriorityValue(urgentElementID, mediumElementID, lowElementID) → {string|null}

Given the element IDs of the urgent, medium and low priority elements, returns the string value of the currently selected priority.
Parameters:
Name Type Description
urgentElementID string The ID of the element representing the urgent priority.
mediumElementID string The ID of the element representing the medium priority.
lowElementID string The ID of the element representing the low priority.
Source:
Returns:
The string value of the currently selected priority, or null if none is selected.
Type
string | null

getSubtaskListItemTemplate(subtaskText) → {string}

Returns a string of HTML for a subtask list item with the given subtask text. The returned HTML will be a span element with the subtask text and a div element with the "edit" and "delete" icons.
Parameters:
Name Type Description
subtaskText string The text of the subtask.
Source:
Returns:
- The HTML string for the subtask list item.
Type
string

getSubtasksText(subTasks) → {string}

Generates a string that describes the number of done subtasks out of the total number of subtasks.
Parameters:
Name Type Description
subTasks
Source:
Returns:
The string that describes the number of done subtasks out of the total number of subtasks.
Type
string

getTaskCardBigEditTemplate(todo, index) → {string}

Returns the HTML template for the big card in edit mode.
Parameters:
Name Type Description
todo Todo The todo that is being edited.
index number The index of the todo in the todo list.
Source:
Returns:
The HTML template for the big card in edit mode.
Type
string

getTaskCardBigTemplate(todo, index) → {string}

Returns the HTML string for a big task card with the given parameters. The returned HTML will be a div with the class "big-card-modal" and the given index as its ID. It will have a header with the category and title, a body with the description, assigned members, and a list of subtasks, and a footer with a delete and edit button.
Parameters:
Name Type Description
todo object The task object from the global todos array.
index number The index of the task card in the global todos array.
Source:
Returns:
- The HTML string for the big task card.
Type
string

getTaskCardSmallTemplate(index, task) → {string}

Returns a string of HTML for a small task card with the given parameters. The returned HTML will be a div with the class "task-card-small" and the given index as its ID. It will have a header with the category, a body with the title, description, and a progress bar if there are subtasks, and a footer with the assigned members and a priority icon.
Parameters:
Name Type Description
index number The index of the task card in the global todos array.
task object The task object from the global todos array.
Properties
Name Type Description
category string The category of the task, either "Technical Task" or "User Story".
description string The description of the task.
priority string The priority of the task, either "high", "medium", or "low".
title string The title of the task.
subTasks object The subtasks object of the task.
Source:
Returns:
- The HTML string for the small task card.
Type
string

getToastMessageTemplate(text) → {string}

Returns an HTML string representing a toast message box, given a text.
Parameters:
Name Type Description
text string The text to be displayed in the toast message box.
Source:
Returns:
An HTML string representing the toast message box.
Type
string

(async) getTodosFromData(user) → {Promise.<void>}

Fetches the todos from the given user from the Firebase Realtime Database.
Parameters:
Name Type Description
user string The user whose todos are to be retrieved.
Source:
Returns:
- A promise that resolves when the data has been fetched and the todos array has been set.
Type
Promise.<void>

(async) getUserFromFirebaseDatabase(credentials) → {Promise.<Object>}

Retrieves a user from the Firebase Realtime Database using the provided credentials.
Parameters:
Name Type Description
credentials Object The user's credentials.
Properties
Name Type Description
email string The email of the user to be retrieved.
password string The password of the user to be verified.
Source:
Returns:
A promise that resolves with an object containing the status of the operation, an ok flag indicating success or failure, and either the user's data or an error message.
Type
Promise.<Object>

goBack() → {void}

Goes back to the previous page in the browser's history or closes the current tab if the user is not logged in and the history is empty.
Source:
Returns:
Type
void

groupContactsByLetter() → {Object.<string, Array.<Object>>}

Returns an object where the keys are the first letters of the contacts' names and the values are arrays of contacts whose name starts with the key.
Source:
Returns:
Type
Object.<string, Array.<Object>>

handleDragEvents() → {void}

Attaches event listeners to each todo item to set its cursor style based on whether the left mouse button is being pressed or not. This is necessary because the CSS `:active` pseudo-class does not work when the element is being dragged.
Source:
Returns:
Type
void

(async) handleLogin(isGuest)

Handles the login process, given a boolean indicating whether a guest login should be performed. If the isGuest flag is true, the function will use the demo user credentials for the login. Otherwise, it will obtain the user credentials from the login form. The function will first validate the input data, and if the data is invalid, it will return. If the data is valid, the function will attempt to retrieve the user from the Firebase Realtime Database. Depending on the result of the operation, the function will update the UI accordingly. If the operation is successful, the function will save the current user to local storage and redirect the user to the main page after one second.
Parameters:
Name Type Description
isGuest boolean Whether to perform a guest login or not.
Source:

handlePrioChange(event) → {void}

Handles a click event on a priority button by removing the active class from all other priority buttons and setting the active class on the clicked button. It also updates the global priority variable.
Parameters:
Name Type Description
event MouseEvent The event object of the click event.
Source:
Returns:
Type
void

handleRouteChange()

Handles changes in the route by executing the appropriate function for the current path. If no matching route is found, it redirects the user to the homepage if authorized.
Source:

(async) handleSaveClick(event) → {Promise.<void>}

Handles the save button click in the contact modal. If the button says "Save", it will update a contact. It will find the contact to update based on the data-created-at attribute of the #createdAt element. If the button says "Add", it will create a contact.
Parameters:
Name Type Description
event Event The save button click event.
Source:
Returns:
Type
Promise.<void>

handleSignupReferrer()

Handles the situation when the referrer is the signup page. Sets the final position of the logo and hides the overlay.
Source:

highPriotiySVG()

This function returns an SVG element representing a high priority icon.
Source:

(async) init() → {Promise.<void>}

Initializes the page by loading components and rendering the contact dropdown.
Source:
Returns:
A promise that resolves when the page has been initialized.
Type
Promise.<void>

(async) init() → {Promise.<void>}

Initializes the board page by loading necessary components, retrieving board columns from the DOM, fetching contacts and todos from the Firebase database, and loading demo data.
Source:
Returns:
A promise that resolves when the initialization is complete.
Type
Promise.<void>

(async) init() → {Promise.<void>}

Initializes the page by loading the necessary components and rendering the contact list.
Source:
Returns:
A promise that resolves when the page has been initialized.
Type
Promise.<void>

init() → {void}

Initializes the page by loading the necessary components.
Source:
Returns:
Type
void

init() → {void}

Initializes the page by loading the necessary components.
Source:
Returns:
Type
void

(async) init()

Initializes the login page by triggering the logo animation, checking for stored user credentials, and filling the login form with those credentials if available.
Source:

init() → {void}

Initializes the page by loading the necessary components.
Source:
Returns:
Type
void

(async) init() → {Promise.<void>}

Initializes the page by loading the necessary components and rendering the contact list.
Source:
Returns:
A promise that resolves when the page has been initialized.
Type
Promise.<void>

initRender() → {void}

Initializes the rendering of the board page by rendering all todos and placeholder elements. This function is called once, when the page is loaded.
Source:
Returns:
Type
void

initializeBadges() → {void}

Initializes the badges for the contact dropdown options by iterating through each option. If the option is checked, it adds a badge to the selected-badges container with the contact's initials and color, and marks the option as selected. This function ensures that the UI correctly reflects the current selection state of the contacts when the dropdown is opened.
Source:
Returns:
Type
void

initializeCurrentUser()

Initializes the current user object by loading it from local storage and saving it back to local storage if it does not exist.
Source:

isDueOrOverdue(index) → {boolean|undefined}

Determines if the due date of a todo item is today or earlier, excluding completed tasks.
Parameters:
Name Type Description
index number The index of the todo item in the globalTodos array.
Source:
Returns:
Returns true if the due date is today or earlier, false otherwise. Returns undefined if the task is completed.
Type
boolean | undefined

isSignupReferrer() → {boolean}

Checks if the document referrer is the signup page.
Source:
Returns:
True if the referrer includes "signup.html", false otherwise.
Type
boolean

loadComponents() → {void}

Loads all necessary components into the page.
Source:
Returns:
Type
void

loadComponents() → {void}

Loads all necessary components into the page. Currently, this function only loads the header and navbar components.
Source:
Returns:
Type
void

loadComponents() → {void}

Loads all necessary components into the page. Currently, this function only loads the header and navbar components.
Source:
Returns:
Type
void

loadComponents() → {void}

Loads all necessary components into the page. Currently, this function only loads the header and navbar components.
Source:
Returns:
Type
void

loadComponents() → {void}

Loads all necessary components into the page. Currently, this function only loads the header and navbar components.
Source:
Returns:
Type
void

loadComponents() → {void}

Loads all necessary components into the page. Currently, this function only loads the header and navbar components.
Source:
Returns:
Type
void

loadComponents() → {void}

Loads all necessary components into the page. Currently, this function only loads the header and navbar components.
Source:
Returns:
Type
void

loadCurrentUserFromLocalStorage()

Loads the current user from local storage and updates the global user object. If no user is found, the global user object remains unchanged.
Source:

loadHeader() → {void}

Loads the header component into the element with the id "header".
Source:
Returns:
Type
void

loadHeader() → {void}

Loads the header component into the element with the id "header". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadHeader() → {void}

Loads the header component into the element with the id "header". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadHeader() → {void}

Loads the header component into the element with the id "header". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadHeader() → {void}

Loads the header component into the element with the id "header". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadHeader() → {void}

Loads the header component into the element with the id "header". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadHeader() → {void}

Loads the header component into the element with the id "header". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar".
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadNavbar() → {void}

Loads the navbar component into the element with the id "navbar". If no element with that id exists, this function does nothing.
Source:
Returns:
Type
void

loadScripts(scripts, callback)

Loads an array of scripts into the document, and executes a callback when all have finished loading.
Parameters:
Name Type Description
scripts Array.<string> An array of script URLs to load.
callback function A function to execute when all scripts have finished loading.
Source:

loadSubtasks(currentTodo) → {void}

Loads the subtasks for a given todo item from the currentTodo object. If the todo item does not have any subtasks, the function does nothing.
Parameters:
Name Type Description
currentTodo Object The todo item to load subtasks for.
Source:
Returns:
Type
void

loadUserCredentialsFromLocalStorage() → {Object|undefined}

Loads user credentials from local storage. If credentials are found, they are parsed from JSON and returned as an object.
Source:
Returns:
The parsed user credentials object, or undefined if no credentials are stored.
Type
Object | undefined

logout()

Logs the user out by removing the user data from local storage and redirecting to the login page after a 500ms delay.
Source:

lowPriotiySVG()

This function returns an SVG element representing a low priority icon.
Source:

mediumPriotiySVG()

This function returns an SVG element representing a medium priority icon.
Source:

noContactsTemplate() → {string}

Returns an HTML string representing a list item indicating that no contacts were found.
Source:
Returns:
An HTML string representing a list item.
Type
string

objectToArray(obj) → {Array}

Converts an object to an array of its values.
Parameters:
Name Type Description
obj Object The input object to convert to an array.
Source:
Returns:
An array containing the values of the input object.
Type
Array

onDrop(state) → {void}

Handles the drop event of a todo card being dragged to a new column. Calls updateTodo to update the state of the todo in the global todos array and patches the todos object in the Firebase Realtime Database. Then, it clears all columns on the board and renders all todos again. Finally, it calls renderAllPlaceholder to render all placeholder elements and removeAllHighlights to remove any highlights from the board.
Parameters:
Name Type Description
state string The new state of the todo.
Source:
Returns:
Type
void

openAddTaskModal(stateopt)

Opens the 'Add Task' modal with the specified state and loads necessary scripts. This function updates the global state and checks if the device is mobile. If mobile, it redirects to the add-task page. Otherwise, it opens a modal by creating and appending a modal element to the DOM. It loads additional scripts required for the modal and inserts the task template into the modal content. Finally, it applies a slide-in animation and restricts date selection to future dates.
Parameters:
Name Type Attributes Default Description
state string <optional>
 "todo" The initial state of the task being added.
Source:

openContactModal(type, nameopt, emailopt, phoneopt, coloropt)

Opens the contact modal and inserts it into the DOM. Depending on the type, the modal will either be in "add" or "edit" mode. If in "edit" mode, the initials are derived from the provided name. The contact modal is created using the provided name, email, phone, and color, and then inserted into the body of the document. The function also applies a "slide-in" animation to the modal.
Parameters:
Name Type Attributes Default Description
type string The type of the modal, either "add" or "edit".
name string <optional>
 "" The name of the contact.
email string <optional>
 "" The email of the contact.
phone string <optional>
 "" The phone number of the contact.
color string <optional>
 "" The color associated with the contact.
Source:

openDatePicker(event) → {void}

Opens the date picker for the due date input field and focuses on it. This function prevents the event from propagating and programmatically focuses on and clicks the due date input element to display the date picker.
Parameters:
Name Type Description
event Event The event object from the click event.
Source:
Returns:
Type
void

openProfileMenu() → {void}

Toggles the display of the profile menu. The profile menu is a dropdown menu that displays when the user clicks on their avatar or name in the header. It is hidden by default and can be shown by clicking on the avatar or name, or by pressing the 'Escape' key.
Source:
Returns:
Type
void

openStateChangeMenu(event, todoIndex) → {void}

Opens the state change menu for a specific todo card, allowing the user to select a new state for the todo. The menu is anchored to the todo card and remains open until a click outside the menu is detected. Once an outside click is detected, the menu is closed and the original onclick event for the todo card is restored.
Parameters:
Name Type Description
event Event The event object from the click event that triggered the menu opening.
todoIndex number The index of the todo card for which the state change menu should be opened.
Source:
Returns:
Type
void

openTodoModal(index) → {void}

Opens the big card modal in view mode for the todo item at the given index. This will populate the big card modal with the todo item's information and make the modal visible.
Parameters:
Name Type Description
index number The index of the todo item in the globalTodos array
Source:
Returns:
Type
void

openTodoModalEdit(index) → {void}

Opens the big card modal in edit view for the todo item at the given index. This will populate the big card modal with the todo item's information and highlight the currently selected priority.
Parameters:
Name Type Description
index number The index of the todo item in the globalTodos array
Source:
Returns:
Type
void

outsideClickListener(event, dropdownId, iconId) → {void}

Listens for a click event on the document and checks if the target of the event is not the dropdown, its toggler, or the search input. If the conditions are met, the dropdown is hidden.
Parameters:
Name Type Description
event Object The event object from the click event.
dropdownId string The id of the dropdown to be hidden.
iconId string The id of the icon to be rotated.
Source:
Returns:
Type
void

outsideClickListenerWrapper(event) → {void}

Calls outsideClickListener with the contact dropdown options and icon.
Parameters:
Name Type Description
event Object The event object from the click event.
Source:
Returns:
Type
void

outsideClickListenerWrapperCategory(event) → {void}

Calls outsideClickListener with the category dropdown options and icon.
Parameters:
Name Type Description
event Object The event object from the click event.
Source:
Returns:
Type
void

populateCounters(todos)

Populates the DOM elements with counts of different types of todos and user information.
Parameters:
Name Type Description
todos Array An array of todo objects, each containing state, priority, and other properties.
Source:

redirectToHomeIfAuthorized()

If the user is logged in, redirects the user to the homepage. Otherwise, does nothing.
Source:

removeAllHighlights() → {void}

Removes the "drag-area" class from all elements, effectively removing the highlighting from all drag areas on the board.
Source:
Returns:
Type
void

removeBadge(contactId) → {void}

Removes the badge for the given contact ID from the selected-badges container and removes the contact ID from the selectedOptions array.
Parameters:
Name Type Description
contactId string The ID of the contact to remove a badge for.
Source:
Returns:
Type
void

removeContactView() → {void}

Removes the contact view by setting the innerHTML of the element with the id "contact-view" to an empty string. This function is useful when the contact view needs to be cleared without toggling the contact view. It is equivalent to calling `toggleContactView(-1)`.
Source:
Returns:
Type
void

removeDragAreaHighlighting(elementId)

Removes the highlighting from the drag area element with the given elementId by removing the "drag-area" class from it. Also toggles the placeholder element for the given elementId. If the element is already highlighted or does not exist, the function does nothing.
Parameters:
Name Type Description
elementId string The id of the drag area element to remove highlighting from.
Source:

removeHollowPlaceholder(elementId)

Hides the hollow drag area placeholder within the specified column by adding the "d_none" class to it.
Parameters:
Name Type Description
elementId string The ID of the column element in which to hide the hollow placeholder.
Source:

removeSubtask(iconElement) → {void}

Removes the subtask list item that the given icon element belongs to, and also removes the corresponding entry from the subTasks object. The function is called when the user clicks the "delete" icon of a subtask list item.
Parameters:
Name Type Description
iconElement HTMLElement The element that was clicked to remove the subtask. This element should be the "delete" icon of a subtask list item.
Source:
Returns:
Type
void

renderAllPlaceholder()

Renders all placeholder elements on the board, including the regular placeholder and the hollow drag area placeholder.
Source:

renderAssignedMembersForTodo(todoIndex, todo) → {void}

Renders the assigned members for a specific todo item by creating and appending HTML elements representing each assigned member to the DOM element corresponding to the todo's assigned members section. If the assigned members element does not exist, the function returns immediately.
Parameters:
Name Type Description
todoIndex number The index of the todo item.
todo Object The todo object containing the assigned members information.
Source:
Returns:
Type
void

renderContactDropdown(assignedMembersopt, filterValueopt) → {void}

Renders the contact dropdown list by generating the HTML for the list and setting the innerHTML of the dropdown options element to the generated HTML.
Parameters:
Name Type Attributes Description
assignedMembers Array.<string> <optional>
 An array of strings representing the names of assigned members. Defaults to an empty array.
filterValue string <optional>
 A string to filter the contacts by. Defaults to an empty string.
Source:
Returns:
Type
void

renderContactList() → {void}

Renders the contact list in the element with the id "contactList". If the element does not exist, does nothing. If the globalContacts array is empty, renders a message prompting the user to add a contact. Otherwise, groups all contacts by the first letter of their name, renders the HTML for the contact list given the grouped contacts, and sets the innerHTML of the element to the rendered HTML.
Source:
Returns:
Type
void

renderContactListHtml(contactsByLetter) → {string}

Given an object where the keys are letters and the values are arrays of contacts whose name starts with the key, returns an HTML string representing the contact list. The contact list is rendered with a masonry layout, which can be customized by modifying the CSS classes used in the returned HTML.
Parameters:
Name Type Description
contactsByLetter Object.<string, Array.<Object>> An object where the keys are letters and the values are arrays of contacts whose name starts with the key.
Source:
Returns:
An HTML string representing the contact list.
Type
string

(async) renderContactsPage() → {Promise.<void>}

Renders the contacts page by fetching data from the given URL and rendering the contact list.
Source:
Returns:
Type
Promise.<void>

renderHollowPlaceholder() → {void}

Renders a hollow drag area placeholder in each column, which is used to indicate a place where a task card can be dragged to.
Source:
Returns:
Type
void

renderNoContactsMessage() → {void}

If there are no contacts in the globalContacts array, renders a message in the contact list element that prompts the user to add a contact.
Source:
Returns:
Type
void

renderPlaceholder() → {void}

Renders a placeholder element in each column if the column is empty.
Source:
Returns:
Type
void

renderSpecificTodos(todos) → {void}

Clears the board columns and renders only the specified todos. Additionally, renders the regular placeholder and hollow drag area placeholder.
Parameters:
Name Type Description
todos Array.<Todo> The list of todos to render.
Source:
Returns:
Type
void

renderTodos(todos) → {void}

Renders a list of todos on the board by inserting the corresponding HTML elements into the todo, progress, feedback, or done columns based on the state of each todo. Additionally, this function sets the tooltip for the progress bar of each todo and renders the assigned members for each todo.
Parameters:
Name Type Description
todos Array.<Todo> The list of todos to be rendered.
Source:
Returns:
Type
void

resetPriorityStates()

Resets the state of all priority buttons to inactive. It queries all priority container elements by the class name "bc-prio-select" and removes the "active" class from each of them, effectively resetting their state to inactive.
Source:

restrictPastDatePick()

Sets the minimum date for the due date input to the current date, to prevent the user from selecting a date in the past.
Source:

saveCurrentUserToLocalStorage()

Saves the current user object to local storage. The user object is stringified before being stored. This allows the user information to persist across browser sessions.
Source:

saveEdit(iconElement) → {void}

Saves the current edit session of a subtask list item. The function is called when the user clicks on the "accept" icon of a subtask list item. The function checks if the current subtask text is empty and if so, removes the subtask entirely. If the current subtask text is not empty, it updates the corresponding subtask in the subTasks object and replaces the current input element with a span element containing the updated text. The function also updates the icon container of the subtask list item to contain the "edit" and "delete" icons again.
Parameters:
Name Type Description
iconElement HTMLElement The element that was clicked to save the edit session. This element should be the "accept" icon of a subtask list item.
Source:
Returns:
Type
void

(async) saveEditedTodo(index) → {Promise.<void>}

Saves the changes made to a todo item in the big card modal and updates the corresponding element in the globalTodos array. After saving the changes, the big card modal is closed and the board is re-rendered.
Parameters:
Name Type Description
index number The index of the todo item in the globalTodos array
Source:
Returns:
- Resolves when the save operation is complete
Type
Promise.<void>

saveUserCredentialsToLocalStorage(credentials)

Saves user credentials to local storage, stringifying them first. This allows the user credentials to persist across browser sessions. The key used is "userCredentials".
Parameters:
Name Type Description
credentials Object The user credentials to be saved.
Source:

searchTodos(event) → {void}

Handles the search bar input event. When the user types in the search bar, this function filters the list of todos by the search term. If the search term is empty, the function clears the board columns and renders all todos. Otherwise, it clears the board columns and renders only the filtered todos.
Parameters:
Name Type Description
event Event The input event from the search bar.
Source:
Returns:
Type
void

selectCategory(event, selectedCategoryName) → {void}

Selects a category from the dropdown and updates the displayed category name. This function handles the selection of a category from the category dropdown menu. It stops the event from propagating, removes the 'selected' class from all category options, updates the text content of the selected category element with the provided category name, and then adds the 'selected' class to the chosen category option. Finally, it toggles the visibility of the category dropdown menu.
Parameters:
Name Type Description
event Event The event object from the click event.
selectedCategoryName string The name of the category to be selected.
Source:
Returns:
Type
void

(async) selectLatestCreatedContact() → {Promise.<void>}

Selects the latest created contact from the list of contacts and shows its details in the contact view by calling `toggleContactView` with the index of the contact.
Source:
Returns:
Type
Promise.<void>

setDefaultPriority() → {void}

Sets the priority of the task to medium by default. This function is called when the page is initialized to set the initial priority of the task to medium. It adds the active class to the medium priority button and updates the global priority variable.
Source:
Returns:
Type
void

setLogoFinalPosition()

Sets the final position and size of the logo based on the window width. For mobile devices (width <= 768px), the logo is smaller and positioned at specific coordinates. For larger screens, it has a different size and position. Additionally, it restores the body's overflow to auto.
Source:

setLogoStartPosition()

Sets the initial position and size of the logo based on the window width. For mobile devices (width < 768px), the logo is larger and centered. For larger screens, the logo is smaller and positioned differently.
Source:

setProgressBarTooltip(taskIndex, taskSubTasks)

Sets the title and onclick attribute on the progress bar for each task so that it displays a tooltip with the text returned by getSubtasksText when clicked.
Parameters:
Name Type Description
taskIndex number The index of the current task.
taskSubTasks
Source:

setWhiteFill(paths)

Sets the fill color of all provided paths to white.
Parameters:
Name Type Description
paths NodeList The list of SVG path elements to modify.
Source:

shouldRedirect(operation) → {boolean}

Determines whether a redirect to the board page is necessary. This function checks if the current operation is "taskAdded" and if the user is on the "add-task" page. If both conditions are true, it returns true, indicating that a redirect should occur.
Parameters:
Name Type Description
operation string The operation type to check against.
Source:
Returns:
True if a redirect should occur, false otherwise.
Type
boolean

showEmailWarning() → {void}

Shows a warning message for the contact email input field when the email is not in the correct format. The warning message is shown for 2 seconds and then removed.
Source:
Returns:
Type
void

showGreeting()

Displays the greeting container if the screen width is less than 1080 pixels. The container is visible for 2 seconds, and then fades out. During the animation, body scrolling is disabled.
Source:

showNameWarning() → {void}

Shows a warning message for the contact name input field when the name is not in the correct format. The warning message is shown for 2 seconds and then removed.
Source:
Returns:
Type
void

showPhoneWarning() → {void}

Shows a warning message for the contact phone input field when the phone is not in the correct format. The warning message is shown for 2 seconds and then removed.
Source:
Returns:
Type
void

showToastMessage(operation, response)

Displays a toast message based on the operation and response status. Generates an HTML toast message using the appropriate text content for the provided operation and appends it to the document body. The toast message is automatically removed after a set timeout. If the operation requires a redirect and the conditions are met, the user is redirected to the board page.
Parameters:
Name Type Description
operation string The operation type used to determine the message text.
response Object The response object containing the status of the operation.
Source:

showWarning(inputField, message)

Shows a warning message for a given input field. If the input field is an input element, the message is inserted after the element. If the input field is a div element, the message is inserted after the parent element of the div. The warning message is visible for 3 seconds and then removed.
Parameters:
Name Type Description
inputField HTMLElement The input field element to display the warning message for.
message string The warning message to display.
Source:

(async) signUp() → {Promise.<void>}

Handles the sign up process, by validating the form data, creating a new user object and adding it to the Firebase Realtime Database. The function first retrieves the form data, validates it, creates a new user object by spreading the form data and adds the current timestamp for createdAt. The function then calls putDataInFirebase to add the user to the database and shows a toast message with the status of the operation. Finally, the function closes the contact modal, renders the contacts page and selects the latest created contact.
Source:
Returns:
Type
Promise.<void>

startDraggingTodo(todoId) → {void}

Sets the currently dragged element to the given todoId and adds the "dragging" class to the corresponding task card element.
Parameters:
Name Type Description
todoId number The ID of the todo element that is being dragged.
Source:
Returns:
Type
void

toggleCategoryDropdown(event) → {void}

Toggles the visibility of the category dropdown menu and rotates the dropdown icon. When the dropdown is shown, it adds an event listener to detect clicks outside the dropdown, which will hide the dropdown and rotate the icon back.
Parameters:
Name Type Description
event Event The event object from the click event.
Source:
Returns:
Type
void

toggleConfirmPasswordVisibility() → {void}

Changes the type of the confirm password field between "password" and "text" based on the current type. If the type is "password", it changes to "text" and changes the visibility icon to be a visibility icon. If the type is "text", it changes to "password" and changes the visibility icon to be a non-visibility icon.
Source:
Returns:
Type
void

toggleConfirmPasswordVisibilityIcon() → {void}

Toggles the visibility of the confirm password icon based on whether the confirm password field has any input. If the field has any input, the icon is changed to the visibility icon and the icon is made clickable to change the password to be visible. If the field is empty, the icon is changed to the default icon and the icon is made unclickable.
Source:
Returns:
Type
void

toggleContactDropdown(event) → {void}

Toggles the contact dropdown by toggling the "show" class on the dropdown options element. Listens for a click event on the document to close the dropdown when clicked outside of the dropdown. If the event target is the dropdown icon or icon container, toggles the "show" class and the "rotated" class on the dropdown icon. If the event target is not the dropdown icon or icon container and the dropdown is not visible, shows the dropdown and adds the event listener. If the event target is not the dropdown icon or icon container and the dropdown is visible, removes the event listener and hides the dropdown.
Parameters:
Name Type Description
event Event The event object from the click event.
Source:
Returns:
Type
void

toggleContactView(contactId) → {void}

Toggles the contact view based on the id of the contact item. If the contact item is selected, the contact view is rendered with the contact's initials and contact information. If the contact item is deselected, the contact view is cleared.
Parameters:
Name Type Description
contactId number The id of the contact item.
Source:
Returns:
Type
void

toggleEditMenu() → {void}

Toggles the display of the contact edit menu. When the menu is displayed, it listens for a click event on the document to close the menu. When the menu is hidden, the click event listener is removed.
Source:
Returns:
Type
void

toggleElementVisibility(element, isVisible)

Toggles the visibility of the given element based on the boolean value of `isVisible`. If `isVisible` is true, sets the element's display style to "flex". Otherwise, sets it to "none". Does nothing if the element is null or undefined.
Parameters:
Name Type Description
element HTMLElement The element to update
isVisible boolean Whether the element should be visible or not
Source:

toggleOptionSelection(option) → {void}

Toggles the selection of a contact dropdown option by changing the checked state of the checkbox and the selected class of the option.
Parameters:
Name Type Description
option HTMLElement The
  • element of the contact dropdown option.
    		•
    Source:
    Returns:
    Type
    void

    togglePasswordVisibilityIcon() → {void}

    Toggles the visibility of the login password visibility icon based on whether or not there is a value in the password field. If there is a value, the icon shows as a visibility icon and is clickable to change the password to be visible. If there is no value, the icon shows as a default login icon and is not clickable.
    Source:
    Returns:
    Type
    void

    togglePlaceholder(elementId)

    Toggles the visibility of the placeholder element within the specified column.
    Parameters:
    Name Type Description
    elementId string The ID of the column element in which to toggle the placeholder.
    Source:

    togglePriorityState(id)

    Toggles the state of the priority button with the given id. It resets the state of all priority buttons and then toggles the state of the button with the given id. If the button is currently active, it will be made inactive and vice versa.
    Parameters:
    Name Type Description
    id string The id of the priority button to be toggled.
    Source:

    togglePrivacyPolicyCheckbox()

    Toggles the state of the privacy policy checkbox and enables/disables the sign-up button accordingly. The checkbox image source is switched between checked and non-checked states, and the sign-up button is disabled if the checkbox is unchecked.
    Source:

    toggleRememberMe() → {void}

    Toggles the "Remember Me" checkbox and its associated icon. If the icon currently shows a checked box, it will change to an unchecked box and the checkbox value will be set to "false". If the icon currently shows an unchecked box, it will change to a checked box and the checkbox value will be set to "true".
    Source:
    Returns:
    Type
    void

    toggleSelectedContactInList(selectedContact, contactItemElement)

    Toggles the selected class on the contact item element and updates the contactSelect property of the selected contact.
    Parameters:
    Name Type Description
    selectedContact Object The contact object of the selected contact.
    contactItemElement HTMLElement The
  • element representing the contact item.
    		•
    Source:

    (async) toggleSubtask(index, subtaskKey) → {Promise.<void>}

    Toggles the state of a subtask in the given todo.
    Parameters:
    Name Type Description
    index number The index of the todo in the globalTodos array.
    subtaskKey string The key of the subtask to be toggled.
    Source:
    Returns:
    - Resolves when the subtask state has been toggled.
    Type
    Promise.<void>

    toggleSubtaskModalWrapperVisibility() → {void}

    Toggles the visibility of the subtask modal wrapper, based on whether the subtasks container has any children or not.
    Source:
    Returns:
    Type
    void

    toggleTodoModal(index) → {void}

    Toggles the big card modal's visibility and animation based on the overflow state of the body. If the body is set to "hidden", the big card modal is displayed and the body is set to "auto", otherwise the big card modal is hidden and the body is set to "hidden".
    Parameters:
    Name Type Description
    index number The index of the todo item in the globalTodos array
    Source:
    Returns:
    Type
    void

    triggerFadeIn(paths)

    Triggers the fade-in animation for the logo paths after a delay.
    Parameters:
    Name Type Description
    paths NodeList The list of SVG path elements to animate.
    Source:

    triggerLogoAnimation()

    Triggers the logo animation sequence. Sets the initial logo position, applies a white fill to the logo paths if on mobile, and triggers the animation sequence. Handles the case where the referrer is the signup page by skipping the animation.
    Source:

    triggerLogoAnimationSequence(overlay, logo)

    Manages the logo animation sequence, triggering the overlay fade-out and logo animation, followed by hiding the overlay and setting the final position of the logo.
    Parameters:
    Name Type Description
    overlay HTMLElement The overlay element to animate.
    logo HTMLElement The logo element to animate.
    Source:

    triggerRender() → {void}

    Triggers the rendering of the entire board by clearing the columns, rendering all todo items and rendering all placeholder elements.
    Source:
    Returns:
    Type
    void

    truncateText(text) → {string}

    Truncates a given text string to a maximum length of 45 characters. If the given text is longer than 45 characters, it will be truncated and an ellipsis will be appended to the end to indicate that the text has been shortened.
    Parameters:
    Name Type Description
    text string The text to be truncated.
    Source:
    Returns:
    The truncated text.
    Type
    string

    (async) updateAssignedMembers(contact, formData) → {Promise.<void>}

    Updates the assigned members of all todos in the globalTodos array that match the email of the given contact with the new name from the given formData. Finally, it patches the updated todos object in the Firebase Realtime Database.
    Parameters:
    Name Type Description
    contact Object The contact to be updated.
    formData FormData The form data containing the new name of the contact.
    Source:
    Returns:
    Type
    Promise.<void>

    (async) updateContact(contact) → {Promise.<void>}

    Updates the given contact in the Firebase Realtime Database.
    Parameters:
    Name Type Description
    contact Object The contact to be updated.
    Source:
    Returns:
    Type
    Promise.<void>

    (async) updateContactInDatabase(user, contactID, data) → {Promise.<Response>}

    Updates the data of a specific contact in the Firebase Realtime Database.
    Parameters:
    Name Type Description
    user string The user whose contact data is being updated.
    contactID string The ID of the contact to be updated.
    data Object The new data to be patched into the contact.
    Source:
    Returns:
    A promise that resolves with the response from the patch request.
    Type
    Promise.<Response>

    updateDueDate(todos)

    Updates the due date display and its label based on the earliest deadline of urgent todos.
    Parameters:
    Name Type Description
    todos Array An array of todo objects.
    Source:

    updateDueDateText(dueDateElement, date)

    Updates the text and color of the due date element and the label text.
    Parameters:
    Name Type Description
    dueDateElement HTMLElement The DOM element for displaying the due date.
    date Date The date of the earliest deadline.
    Source:

    updateGreeting()

    Updates the greeting message based on the current time of day.
    Source:

    updateSubTasksDisplay(index) → {void}

    Updates the display of the big task card modal with the todo item at the given index. This is called when a subtask is checked or unchecked, and the big card modal needs to be updated to reflect the change.
    Parameters:
    Name Type Description
    index number The index of the todo item in the globalTodos array
    Source:
    Returns:
    Type
    void

    updateSubtaskIcons()

    Updates the visibility of the add subtask icon and the subtask actions depending on whether the input field is empty or not.
    Source:

    (async) updateTodo(state) → {Promise.<void>}

    Updates a todo in the global todos array and patches the todos object in the Firebase Realtime Database.
    Parameters:
    Name Type Description
    state string The new state of the todo.
    Source:
    Returns:
    - A promise that resolves when the update is complete.
    Type
    Promise.<void>

    updateTodoCounts(todos)

    Updates the count of todos in different states.
    Parameters:
    Name Type Description
    todos Array An array of todo objects.
    Source:

    (async) updateTodoMobile(index, newState) → {Promise.<void>}

    Updates the state of a todo item in the global todos array and patches the updated todos object in the Firebase Realtime Database. If the update is successful, a success toast message is shown and the board is re-rendered. If there is an error, an error toast message is displayed.
    Parameters:
    Name Type Description
    index number The index of the todo item to update.
    newState string The new state to set for the todo item.
    Source:
    Returns:
    - A promise that resolves when the update operation is complete.
    Type
    Promise.<void>

    (async) updateTodosInFirebase(todosObject, user) → {Promise.<(Response|Error)>}

    Patches the todos object in the Firebase Realtime Database.
    Parameters:
    Name Type Description
    todosObject Object The object containing the todos to be updated.
    user string The user whose todos are to be updated.
    Source:
    Returns:
    A promise that resolves with the response from the Firebase Database if successful, or rejects with an error if there is a HTTP error.
    Type
    Promise.<(Response|Error)>

    updateUserInfo()

    Updates the user information displayed on the page.
    Source:

    validateForm() → {boolean}

    Validates the sign-up form fields by checking if the name, email, password, and confirm password inputs meet specific requirements. Updates the respective error message fields if validation fails.
    Source:
    Returns:
    Always returns true after validation.
    Type
    boolean

    validateFormdata() → {boolean}

    Validates the form data in the contact form.
    Source:
    Returns:
    True if the form is valid, false otherwise.
    Type
    boolean

    validateLoginFormData() → {boolean}

    Validates the login form data by checking if the email and password inputs meet specific requirements. Clears any previous error messages before validation. Displays appropriate error messages if the inputs are invalid. The email must be in a valid format and the password must be at least 7 characters long.
    Source:
    Returns:
    True if both email and password are valid; otherwise, false.
    Type
    boolean

    validateTodoForm() → {boolean}

    Validates the add task form fields. If the title or due date are empty, or if the category is not selected, it shows a warning and returns false. Otherwise, it clears any warnings and returns true.
    Source:
    Returns:
    If the form is valid or not.
    Type
    boolean

    Type Definitions

    FirebaseConfig

    Type:
    • Object
    Properties:
    Name Type Description
    apiKey string The Firebase Realtime Database API key.
    Source:

    Routes

    Object containing all routes of the application. The keys are the paths of the routes and the values are the functions that should be executed when the route is accessed.
    Type:
    • Object
    Properties:
    Name Type Description
    '/' function Function to check authorization for the homepage.
    '/index.html' function Function to check authorization for the homepage.
    '/summary.html' function Function to check authorization for the summary page.
    '/board.html' function Function to check authorization for the board page.
    '/contacts.html' function Function to check authorization for the contacts page.
    '/add-task.html' function Function to check authorization for the add task page.
    '/legal-notice.html' function Function to check authorization for the legal notice page.
    '/policy.html' function Function to check authorization for the policy page.
    '/help.html' function Function to check authorization for the help page.
    Source: