Leveraging JavaScript Classes in a To-Do List Application
JavaScript is a versatile programming language widely used for web development. One of its key features is the ability to work with classes, allowing developers to structure their code in an object-oriented manner. In this blog post, we’ll explore how JavaScript classes can be created and used in a practical project—building a to-do list application. We’ll discuss how classes can enhance the organization and functionality of such an application.
Understanding Classes in JavaScript
Declaring a Class
In our To-Do List project, we begin by defining a “Task” class using the class keyword. This class will serve as the foundation for managing individual tasks within our application:
class Task {
constructor(description, dueDate) {
this.description = description;
this.dueDate = dueDate;
this.isDone = false;
}
markAsDone() {
this.isDone = true;
}
}
Here, the “Task” class encapsulates task properties such as the task description, due date, and a method to mark a task as done.
Creating Instances
With the “Task” class declaration in place, we can create instances of individual tasks:
const task1 = new Task('Write blog post on JavaScript classes', '2023-11-15');
const task2 = new Task('Complete To-Do List project', '2023-11-30');
task1.markAsDone(); // Marking the first task as done
console.log(task1); // Output: Task { description: 'Write blog post on JavaScript classes', dueDate: '2023-11-15', isDone: true }
Each task instance has its own set of properties and can interact with methods defined in the class.
Properties and Methods
JavaScript classes offer a structured way to encapsulate both data (properties) and behavior (methods). In our To-Do List project, the “Task” class’s properties represent task details, while methods such as markAsDone facilitate task management.
Inheritance – “ShoppingTask” and “WorkTask”
Inheritance is a valuable feature for extending classes to create specialized subclasses. In the context of our To-Do List application, let’s introduce two subclasses: “ShoppingTask” and “WorkTask.” These subclasses inherit the core properties and methods from the “Task” class while introducing unique characteristics specific to shopping and work tasks:
class Task {
constructor(description, dueDate) {
// ... (Task class properties and methods)
}
}
class ShoppingTask extends Task {
constructor(description, dueDate, items) {
super(description, dueDate);
this.items = items;
}
}
class WorkTask extends Task {
constructor(description, dueDate, project) {
super(description, dueDate);
this.project = project;
}
}
By doing this, we maintain a consistent foundation while customizing task types to accommodate different attributes. For example, a “ShoppingTask” can include an “items” property, and a “WorkTask” can specify a “project.”
Let’s demonstrate the use of inheritance with “ShoppingTask”:
// Create a ShoppingTask
const shoppingTask = new ShoppingTask('Grocery shopping', '2023-11-20', ['Apples', 'Milk', 'Bread']);
// Mark the shopping task as done
shoppingTask.markAsDone();
// Output the shopping task details
console.log(shoppingTask);
In this example, we:
- Create a “ShoppingTask” instance called
shoppingTaskwith a description, due date, and a list of items to buy. - Use the
markAsDonemethod to mark the shopping task as done. - Output the shopping task details, which includes properties like description, due date, whether it’s done, and the list of items.
The “ShoppingTask” class inherits the properties and methods from the base “Task” class, such as the markAsDone method, and extends it by adding the “items” property, which is specific to shopping tasks.
Static Methods
In our To-Do List project, we can enhance the functionality by introducing a static method within the “Task” class. Let’s create a static method, sortByDueDate, which allows us to sort an array of tasks based on their due dates:
class Task {
// ... (constructor and other methods)
static sortByDueDate(tasks) {
return tasks.slice().sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate));
}
}
This static method is now accessible for sorting tasks in our To-Do List application. You can use it like this:
const task1 = new Task('Task 1', '2023-11-10');
const task2 = new Task('Task 2', '2023-11-05');
const task3 = new Task('Task 3', '2023-11-15');
const unsortedTasks = [task1, task2, task3];
const sortedTasks = Task.sortByDueDate(unsortedTasks);
console.log(sortedTasks);
Getters and Setters
In a real project, getters and setters can help manage data access and validation. In our To-Do List project, let’s create a setter for the due date property within the “Task” class to ensure that it follows a specific format:
class Task {
constructor(description, dueDate) {
// ... (constructor and other methods)
get dueDate() {
return this._dueDate;
}
set dueDate(newDueDate) {
if (this.isValidDate(newDueDate)) {
this._dueDate = newDueDate;
} else {
console.error('Invalid due date format.');
}
}
isValidDate(dateString) {
const regex = /^\d{4}-\d{2}-\d{2}$/;
return regex.test(dateString);
}
}
}
Now, you can use the getter and setter for the due date like this:
const task = new Task('Sample Task', '2023-11-20');
console.log(task.dueDate); // Get the due date
task.dueDate = '2023/11/20'; // Try to set an invalid date
In this scenario, the setter checks the date format before setting it and provides an error message for invalid inputs.
JavaScript classes provide a powerful foundation for building structured, organized, and maintainable code, making them an ideal choice for managing tasks in a To-Do List application. By incorporating inheritance, static methods, and getters and setters, you can tailor your classes to fit your project’s specific needs.
Incorporating these concepts into your To-Do List project ensures that your code is more organized and your application functions efficiently. Whether you’re managing tasks, sorting them by due date, or validating inputs, JavaScript classes offer a practical and versatile approach for creating real-world applications.
