IONIC Section 4 - 4.15 Completing Basic JavaScript Logic

Click here for more videos available on our youtube channel !

Hello everyone, so with dynamically generated items, let's make sure that when we add an expense, we also clear the entry and make the "clear" button work. For this we will add a new function in our JS file, where we will create a new constant that I will name “clear” and which will be a function in it. So we enter “const clear = () => {ReasonInput.value = ;amountInput.value = ;};”. So concretely we have defined the value with the “.value” method equal to an empty string and identical for any input of amount and which basically erases them, this deletes any input entered by the user. This “clear” function should now be called here, after we add our 'expensesList' element, we type 'clear()' so that we can call this function. We also want to do this when we click the cancel button. So we add our “cancelBtn.addEventListener(‘click’, clear()); so that will carry a click event, when this button is pressed, I could simply point to “delete” with our “clear”. We will make a reference to our function so that it is executed dynamically, when that click happens, it will perform that function for us. So we save our progress, we go back to our application, and we enter “invoice” for “15” and we click on “delete”, that is clear. Perfect, now let's make sure we get a total expense at the bottom of our application, and for that in our html we can add a new row below the last one with "ion-col" describing your sum there. You can add everything simply a paragraph with the “p” tag, in which we write “Total expenses:” and we will insert a “span” that we we're going to use as a bracket to make our total expenses. We are going to give it an id="total-expenses" so that we can easily access it from our JavaScript code. So we come back to our JS file, and we will declare “const totalExpensesOutput = document.querySelector(‘#total-expenses’); here is our total expense output must now be updated with each item added and therefore I will add a new variable with total expenses. To do this, we will declare “let totalExpenses= 0; because initially we have no expenses. With every element we add here, we can set the total expenses equal to the old value with the shortcut of the sign “+=” which gives “totalExpenses += +enteredAmount; » The "+" just before "enteredAmount" is used to convert this string, by default, so that any value extracted from our insert element therefore "input", passes from string, therefore from character string, to Number, therefore number. Which is then added to the total expenses we had previously, which allows the total expenses to be updated. And so after updating, we can define here the textual content of the output total expenditure, so that it is not only stored in JavaScript memory but also written in the DOM. Which gives us totalExpensesOutput.textContent = totalExpenses; So we reload our application, we enter an invoice of 6 euros, then I went to the cinema which cost me 8 euros, and we have our total expense which is displayed just below. It's perfect, now the style can be improved, especially on large screens, and that's what we're going to see together in the next video.