![Screenshot 2023-11-15 at 16 41 51](https://private-user-images.githubusercontent.com/121562718/283186671-95185bcf-30e5-4727-9b7e-6eecb172ecf4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzMjk0NTEsIm5iZiI6MTczOTMyOTE1MSwicGF0aCI6Ii8xMjE1NjI3MTgvMjgzMTg2NjcxLTk1MTg1YmNmLTMwZTUtNDcyNy05YjdlLTZlZWNiMTcyZWNmNC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQwMjU5MTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yZTYxNGRkMjkxYmFiZDEyYTk3Y2NhZjZjNGM1YTI4NGUyYmEwMjc3YzJiYzYzOGM5ZWIwOTc0ZWFiZjNhYTE0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.ndW-_zpeHC2VumNvPVdqDB8WYUZ4JVg5jpqlZ5AXcDw)
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.
![Screenshot 2023-11-15 at 16 40 59](https://private-user-images.githubusercontent.com/121562718/283186762-1ec00a13-19ee-4323-bc64-d5d7ffd9c16d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkzMjk0NTEsIm5iZiI6MTczOTMyOTE1MSwicGF0aCI6Ii8xMjE1NjI3MTgvMjgzMTg2NzYyLTFlYzAwYTEzLTE5ZWUtNDMyMy1iYzY0LWQ1ZDdmZmQ5YzE2ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMlQwMjU5MTFaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00YjEwZmNlNDNkNmRjMzdiZGI5ZjkwOGFlZDAxODJlYzBkZGEwYjAxN2RmMTNlZjk1NTdhNjQ2M2QwMTA1YWRkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.JjZDqARnjTf9MxozLstlDo7OVJ3BanFrNUFM0ugFF2w)