Skip to main content

class-todo-example

From this video https://youtu.be/gieEQFIfgYc?si=2sF_9KZ0asFusGeK&t=14406

Certainly! Here are the 15 key steps from the transcript, which appears to be a tutorial on creating TypeScript classes and interfaces for a list management application:

  1. Create a New File: Name the file ListItem.ts.

  2. Create an Interface: Use export interface to define an Item interface with properties: id (string), item (string, for description), and checked (boolean).

  3. Save the File: Use Ctrl + S to save the current progress.

  4. Create a Class: Use export default class ListItem to define a class that will be the default export from this file.

  5. Implement the Interface in the Class: Begin implementing the properties defined in the Item interface.

  6. Challenge Issued: Challenge to create the class with private variables _id, _item, and _checked and to implement getters and setters for these.

  7. Constructor Implementation: Define a constructor in the class that takes private variables _id (string, default empty), _item (string, default empty), and _checked (boolean, default false).

  8. Curly Braces Note: No need to assign values in curly braces if they are provided in the constructor.

  9. Implement Getters and Setters: Create getters and setters for id, item, and checked. For instance, getId, setId for id.

  10. Create Another Model File: Create a new file for the full list model, named FullList.ts.

  11. Import ListItem: At the start of FullList.ts, import ListItem.

  12. Create Another Interface: Define an interface in FullList.ts with a list (array of ListItem), and methods for load, save, clear, addItem, and removeItem.

  13. Implement FullList Class: Start implementing the FullList class that includes the aforementioned interface.

  14. Constructor for FullList: Define a constructor for FullList with a private list which is an array of ListItem.

  15. Implement Singleton Pattern: Make the constructor private and create a static instance of the FullList class for singleton behavior.

These steps outline the process of creating TypeScript classes and interfaces, focusing on encapsulation, getters and setters, and the singleton design pattern.

Part 2​

Sure, here are the key steps from the continued transcript, focusing on the implementation of methods in a TypeScript class for list management:

  1. Add Item Method: Create an addItem method in the FullList class to receive a ListItem object. Use this._list.push(item) to add the item and then call this.save() to update the list.

  2. Remove Item Method: Implement the removeItem method, which receives an id (string) and returns void. Inside, update this._list using filter() to remove the item with the given id, and then call this.save().

  3. Create Load Method: Start creating the load method in the FullList class, which returns void.

  4. Retrieve Stored List: Define a variable to retrieve the stored list from local storage using localStorage.getItem('myList'). The variable should have a type of either string or null.

  5. Type Guard for Stored List: Check if the type of the stored list is not a string. If it's not, return early from the method.

  6. Parse Stored List: Define and parse the stored list into a parsedList array of objects with properties _id, _item, and _checked.

  7. ForEach on Parsed List: Use a forEach loop on parsedList to create a new ListItem for each object in the array.

  8. Add Items to Full List: Use FullList.instance.addItems(newListItem) to add each new ListItem to the full list.

  9. Complete Load Method: Finish the load method logic to repopulate the list from local storage.

  10. Create List Template File: Create a new file named listTemplate.ts in the templates directory.

  11. Import Full List in Template: Import the FullList class into listTemplate.ts.

  12. Create DOM List Interface: Define a DomList interface with a ul property (HTMLUListElement) and methods clear() and render(fullList: FullList).

  13. Implement List Template Class: Start implementing the ListTemplate class as a singleton that implements the DomList interface.

  14. Constructor for List Template: Define a private constructor for ListTemplate. Assign this.ul to the corresponding element in the DOM.

  15. Clear Method: Implement the clear method to clear the HTML inside the unordered list (ul).

  16. Render Method: Implement the render method to display each item in the full list as an HTML list element, creating DOM elements dynamically for each list item.

These steps continue the process of building a TypeScript application focused on managing and displaying a list of items, involving complex class and interface structures, DOM manipulation, and local storage interaction.

Part 3​

The final part of the transcript describes the implementation of the list template and the main application logic in TypeScript. Here are the key steps:

  1. Create Checkbox: For each list item, create an input element of type checkbox. Assign unique IDs and the checked status based on the item's properties.

  2. Append Checkbox to List Item: Append the checkbox to the list item element (li).

  3. Add Event Listener to Checkbox: Add a change event listener to the checkbox to update the item's checked status and save the updated list.

  4. Create Label for List Item: Create a label element for each list item to display its description. Set the htmlFor property to link it with the checkbox.

  5. Append Label to List Item: Append the label to the list item element.

  6. Create Delete Button: Create a button element for each list item for deletion, with an 'X' as its text content.

  7. Append Button to List Item: Append the delete button to the list item.

  8. Add Event Listener to Button: Add a click event listener to the button to handle item deletion and re-render the list.

  9. Add List Item to Unordered List: Append each list item element to the unordered list in the DOM.

  10. Make List Template a Singleton: Ensure that ListTemplate is a singleton by creating a static instance.

  11. Initialize Main Application: Create an initApp function to initialize the application, load the list, and render it.

  12. Set Up Event Listeners: Add event listeners for form submission and clear button clicks.

  13. Handle Form Submission: In the form submission handler, prevent default action, validate input, and add a new item to the list.

  14. Calculate New Item ID: Calculate the ID for the new item based on the last item's ID in the list.

  15. Create and Add New Item: Create a new ListItem and add it to the list.

  16. Render Updated List: After adding a new item or clearing items, re-render the list.

  17. Start Application on DOM Load: Add an event listener to start the application when the DOM content is fully loaded.

  18. Run Application: Test the application in a local server environment to verify its functionality, such as adding, checking, deleting items, and clearing the list.

These steps conclude the process of building a TypeScript-based list management application, covering aspects like dynamic DOM manipulation, event handling, and utilizing TypeScript features for structured and efficient code.