IONIC - 3.5 Creation of a to do list (1)

Click here for more videos available on our youtube channel !

We will start by making the HTML page, we can see the terminal which builds the page instantly concerning the “home.page.html” page. We will immediately change the title and we will write "Tasks". Between the ion-content tags, we will insert an "ion-list" tag, and inside we will put "ion-list-header", so "ion-list-header" to insert "My tasks". Below, we will insert an "ion-card", we will also create a class for it called “tasks”, to insert an “ion-checkbox” below it followed by a “h4” tag. or we will put a class “task-title”, so we will also put the name of the task which will be for example “do the dishes”. and below we will put a button with "ion-button" we will allow him to be able to click on it, we put the "fill" attribute which allows us to remove the background, the color “danger”, and direct style for positioning with a “float right”. And finally, a “trash” icon to have a trash can style icon. Below we will introduce an “ion-footer”, which will be the bottom of the page and inside we will put an “ion-item”, which will be the parent tag of "ion-input", or we will insert the addition of a new task with an insert button "ion-input" we will put a "placeholder" at first, we're going to tell it "add a new stain" here, and just below we're going to put the button that will allow us to insert the new stain on which we will give it a rounded shape and also a primary color, so "Color primary" and finally we will add an add icon "add" to add all new tasks, so simply "name addAdd". We are already looking at our first result, and we can see, here all of our Ionic tags, we can check and uncheck a task. Now, we are going to create buttons to add and cancel stains, so with the ion-buttons tag which will be the parent of the 2 ion-button child tags, the first we are going to personalize it, so here is the first, with a primary color, we are also going to insert an icon, so for the icons, I invite you to consult the documentation of the official site: “https://ionicframework.com/docs/v3”, so we are on the official site, in “componets, you can go to “overview”, and via “overview” you have “icons”, and you have the bootcode according to what you want, and you have the information and the insertions is very explicit and very well provided. So we come back to our HTML page with our buttons concerning the icons, we don't forget to add a “slot end” for its position, here is the icon that I will use, so it is called “add-circle” therefore for Add. And the second button, we copy we paste we do changes a style color “danger”, and the icon name is “backspace” to cancel. We modify and cancel. And here is the result, we observe our 2 buttons on our page. So that's it for our first project video, I'll see you for the rest in the next video, see you soon!