Welcome to our To-Do List web app project! This basic To-Do List application incorporates essential features such as adding, deleting, reordering, and filtering tasks. Our primary focus during development was on testing, and we've included a comprehensive testing suite in the index.tests.js file to support Unit Testing practices.
The project's file structure is organized as follows:
index.html
: Contains all elements and is responsible for rendering the interface.style.css
: Manages the styling of the web app.js
folder:script.js
: The main JavaScript file.utils
folder: Includes utility modules likestorage.js
,taskFunctions.js
, anduiFunctions.js
.testing
folder: Holds the testing filesindex.tests.js
andtest-helpers.js
.
We've adopted JavaScript modules to maintain code organization without relying on external frameworks. Here's an overview of the modules:
- Manages localStorage, handling data storage and access through functions like
saveTasks
andloadTasks
.
- Contains crucial functions for basic app features, such as
addTask
anddeleteTask
for manual task addition and removal,completeTask
andclearCompletedTasks
for task completion and clearance, andreorderTasks
to assistsetUpDragAndDrop
in manual task reordering.
- Focuses on DOM manipulation and task-related element creation.
- The
displayTasks
function governs the presentation of tasks and their elements, incorporating priority filtering and order. createPriorityDot
generates a color-coded dot in the UI, enhancing the visualization of each task's priority.createTaskElement
generates each task container, invoking other element-creating functions for each individual task body.updatePriority
manages task priority settings.toggleTaskListVisibility
handles task visibility.
Testing is segmented into two primary files:
- Contains a series of tests simulating user actions, including adding, deleting, completing, and clearing completed tasks. All tests are encapsulated in the
runTests
function, executing simultaneously.
- Provides additional test cases for the To-Do List application, aiding in simulating real user interaction in
index.tests.js
.
This project was carried out by Lucy & Paing.