IONIC Section 4 - 4.12 Using Ionic elements as "Normal" HTML elements

Click here for more videos available on our youtube channel !

Hello everyone, now this is all taking shape, now it's time to add some logic, and by logic I mean writing code that will do something when one of those buttons is clicked. Later, we will do it with the help of Angular, but the goal is to show you that you don't necessarily need Angular, it also works with JavaScript by integrating some web components in our application, we can interact with them as with normal HTML elements. This is of course the reason why you can use for versions later with Angular, React, Vue, or the framework of your choice. So we can add a file called “app.js”, and we will import this file at the end of our HTML file, just before the closing "body" tag by inserting the tag “script src=”app/js”script”. Now, to get access to inputs and buttons, I'm going to add ids to them. To do this, you can add CSS classes and use tag selectors. However, since we have several "ion-input", using the tag selector to access it, it will work but in a tricky way. So, I will fill in a id for each of them, so id="input-reason" for expense reasons, an id="input-amount" for expense amount, and for buttons, concerning "delete", one indicates an id=""btn-cancel", and for the other, id="btn-confirm". With these assigned identifiers, we go to our "app.js" file, and store references to those items in some constants, like "const reasonInput = document.querySelector" which allows to access using the document query selector, then the "#" to use the id selector, which gives us "const reasonInput = document.querySelector('#input-reason')". So the text entered in parentheses must match the ID name you assigned. Then, we will have access to the entered amount, so we duplicate the line, and we change by ('#input-amount'). So that's it for these 2 entries, now I also want have access to my buttons, so we'll do "const cancelBtn = document.querySelector('#btn-cancel')" and "confirmBtn = document.querySelector('#btn-confirm')", we have stored all these items well. In this JavaScript code I'm writing now, I can add my confirmation button listeners, for example. We can add my event listeners to the "click" event, then this function will be executed once we click the button. So let's do "confirmBtn.addEventListener('click', () => { console.log('It works'); });" and if we go back to our application and inspect the element to get access to the console of this page, reload the page and click on add expenses, and you should see that it works now if you have entered everything correctly. So that's great, in our next video let's make sure we read the values ​​we store here and can validate and display them under our card.