Todo Masters Project Setup

[00:00:00]
>> Maximiliano Firtman: So are you ready for some Collab? So, actually, it's a very simple to do app created with vanilla JavaScript, and the code works, but it has several problems. I mean, it works, that's fine. But we can see the problems when we are trying to do some things.

[00:00:16]
So, for example, what if we want to save the list todos locally? Remember, those questions, we will go back to those questions in a second. If I wanna add keyboard shortcuts, if I wanna make it more complex in the future. And because it's not using any design pattern, we will need to decouple most of the behavior using design patterns, okay?

[00:00:38]
Or for example to create an undo action, it's actually pretty cool. So the lab is available there, remember feedback, firtman.github.io/webapp-patterns. When you get there, you will see step by step instructions. We will start, actually, with chapter 2 now, classic patterns, checking the project. And before you need to download or fork the repo.

[00:01:11]
So actually, when you go to the introduction, you have a link for the repo, so you can download the repo, fork the repo, whatever you want. I'm going to open now that repo in my VS Code, and this is what you're going to find. We have three projects, one of them is TodoMasters and there are two folders, initial and final.

[00:01:37]
We're going to start with initial the final is the final code that we will be creating. I will be doing most of the code directly wide explaining what I'm doing, okay? But if you wanna follow along, also, you can go to the companion website and go chapter by chapter, lesson by lesson.

[00:01:58]
So when you get there, I'm going to follow this pattern so we're going to do this first, upgrading app.js, then we're going to do this and that, okay? So you can follow along you don't need to copy what I'm typing you can get it from here if you want.

[00:02:13]
And also you have the final version, it's gonna be probably 90% the same as the one that I will get, because I will be doing live coding, and based on your questions, I will probably slightly change the final code, but it's gonna be pretty similar. So, that means that you can go and open directly TodoMasters > Initial as your current folder project, and that's gonna be good.

[00:02:41]
So I can go and open the folder TodoMaster initial. So I'm going to be working here. So you can see I only have three files, index.html, that it's actually pretty simple, it actually fits in one screen, even with a large font size, okay? It only includes an app.js file and a CSS file.

[00:03:06]
It has a div, a container with a title, an input type, a button that says Add, and a todo-list, that's all I have, okay, pretty simple. Then CSS, well, we're not going to cover CSS, but it's also pretty simple, nothing to worry about. And app.js, it's also pretty simple.

[00:03:27]
So I'm DOM content loaded and actually creating references for the three elements that I will need later, the input, the button and the UL and the list. When you click on the button, I'm getting the value from the input. If it's not empty string, I'm creating a new li, a new item, setting a class name, setting its content, with the text and then a Delete button, and appending that into the UI.

[00:03:59]
And then I have another event listener for delete, so very simple. That actually I mean, it works, let's see. So, I should open this, actually, I can open this directly with the file protocol because I'm not using any external reference, but let's let's run this in local host.

[00:04:18]
So, I can use any server, I have here a plugin for VS Code. You probably know how to run a server, if not, I'm going to use npx serve. This is using node.js to download and execute the serve library that we just open localhost, 3000. You can Ctrl-click or Cmd-click, and this is the app.

[00:04:46]
So it's a very simple app. So here we can apply design patterns, and it's adding this here, okay? Then we will get some lunch, and then I can delete that, and it works, okay?