Building an Interactive Todo List Manager with JavaScript

Todo lists are a popular and effective way to organize tasks and manage productivity. Lets explore a JavaScript-based todo list manager that allows users to create, edit, and complete tasks in different lists. The code provided below is a fully functional todo list manager that interacts with a JSON server for data storage. We will go through the code step-by-step, explaining its functionality and the use of different JavaScript features.

Understanding the Code

The provided code is a self-contained JavaScript function named initialized, which serves as the entry point to the todo list manager. The function initializes the necessary variables, fetches data from a JSON server, and sets up event listeners to handle user interactions.

Fetching Data from JSON Server

javascript:
fetch("http://localhost:3000/Lists")
.then(res => res.json())
.then(data => {
Lists = data
Lists.forEach(list => {
loadLists(list)
})

loadListDetail(Lists[0])
createNewList()
createNewItem()
})

The first part of the code fetches the todo lists from a JSON server running on http://localhost:3000/Lists. The fetched data is converted to JSON, and then the Lists variable is populated with the retrieved data. For each list, the function loadLists is called to display the list names on the UI. The first list is automatically loaded in detail using the function loadListDetail.

Creating New Todo Lists

javascript:
function createNewList(){
document.querySelector("#new-list-form").addEventListener("submit", (e)=>{
e.preventDefault()
if(e.target[0].value !== ""){
fetch(http://localhost:3000/Lists, {
method: "POST",
headers: {
"Content-Type": "application/json",
"Accept": "application/json"
},
body: JSON.stringify({
id: "",
name: e.target[0].value,
incomplete: [],
complete: []
})
}).then(res => res.json())
.then(newList => {
loadLists(newList)
loadListDetail(newList)
})
e.target.reset()
}else{
alert("Please enter a name for this new list!")
}
})
}

The createNewList function adds an event listener to the form with the ID "new-list-form." When the user submits the form, this function is triggered. If the input field is not empty, a new list is created by making a POST request to the JSON server with the new list details (name, incomplete, complete). The loadLists function is called to update the list of todo lists on the UI, and the loadListDetail function loads the newly created list in detail.

Creating New Todo Items

javascript:
function createNewItem(){
document.querySelector("#new-item-form").addEventListener("submit", (e)=>{
e.preventDefault()
if(e.target[0].value !==""){
currentlist.incomplete.push(e.target[0].value)
patchTasks(currentlist, [currentlist.incomplete, currentlist.complete])
loadListDetail(currentlist)
}else{
alert("Please enter a new task!")
}
e.target.reset()
})
}

The createNewItem function adds an event listener to the form with the ID "new-item-form." When the user submits the form, this function is triggered. It checks if the input field is not empty, and if so, it adds the new task to the incomplete tasks of the current list (currentlist). The patchTasks function is called to update the JSON server with the modified tasks, and then the loadListDetail function is called to refresh the UI.

Updating Todo Items

The code provides functionality to edit, delete, and mark tasks as complete/incomplete. Here are the relevant functions:

• deleteTask(text, aList, isIC): This function deletes a task from the incomplete or complete list based on the isIC parameter.

• editTask(aList, currentText, event, isIC): This function updates a task in the incomplete or complete list based on the isIC parameter. It is triggered when the user clicks the edit button, modifies the task text, and presses the Enter key.

• updateTasks(liTask, aList, taskIC): This function moves a task from the incomplete to the complete list or vice versa based on the taskIC parameter. It is triggered when the user clicks the checkbox button.

In this blog post, we explored a JavaScript-based todo list manager. The code allows users to create new todo lists, add tasks to the lists, edit tasks, delete tasks, and mark tasks as complete. The data is fetched and updated using a JSON server. This simple yet functional todo list manager can be further expanded and customized to fit specific requirements. Feel free to experiment with the code and add more features to enhance its usability. Happy coding!