In this Task Manager application, we have used Ember.js, a popular JavaScript framework for building ambitious web applications, along with Tailwind CSS for styling. Ember.js follows the "convention over configuration" approach and provides a robust structure to organize the application code.
The primary components of our application are:
Route: TasksRoute is responsible for loading the tasks data from the local storage and setting up the model for the controller. It also ensures that the tasks list is updated whenever there's a change in the local storage.
Controller: TasksController handles the application logic, such as adding, editing, deleting tasks, and marking tasks as complete or incomplete. It uses the action decorator to define actions and the computed decorator to create a computed property tasks.
Template: tasks.hbs is the Handlebars template that defines the structure and layout of the Task Manager application. It uses the built-in Ember.js components, such as input, button, and each, as well as the custom actions and computed properties defined in the TasksController.
Here is a brief overview of the implemented code:
model(): Loads tasks data from the local storage and returns it as an array. setupController(): Sets up the controller and adds an observer to the model to keep the tasks list updated whenever the local storage changes. TasksController:newTaskTitle, newTaskDescription, editingTaskId: Variables to store the input values for new tasks and the ID of the task being edited. tasks: A computed property that returns the tasks list from the local storage. It depends on the model.[] and will recompute whenever the model changes. Actions: addTask(): Adds a new task to the tasks list and updates the local storage. editTask(): Sets the editing task ID and pre-fills the input fields for editing. saveEditedTask(): Saves the edited task, updates the tasks list and the local storage, and resets the editing task ID. deleteTask(): Deletes a task from the tasks list and updates the local storage. toggleTaskCompletion(): Toggles the task's completion status and updates the local storage. tasks.hbs:
The template uses the built-in each helper to iterate through the tasks list and render each task with its title, description, and completion status. The input and button components are used for adding and editing tasks, as well as marking tasks as complete or incomplete. The on modifier is used to handle events, such as clicks and changes, and trigger the corresponding actions in the TasksController. The Ember.js framework allows us to organize the code in a modular way, making it easy to maintain and scale the application. It provides a set of tools and conventions that simplify the development process and help us create a well-structured and organized codebase.
You will need the following things properly installed on your computer.
- Git
- Node.js (with npm)
- Ember CLI
- Google Chrome
git clone <repository-url>this repositorycd task-managernpm install
ember serve- Visit your app at http://localhost:4200.
- Visit your tests at http://localhost:4200/tests.
Make use of the many generators for code, try ember help generate for more details
ember testember test --server
npm run lintnpm run lint:fix
ember build(development)ember build --environment production(production)
Specify what it takes to deploy your app.