#44 Creating a Custom Modal Window | DOM & DOM Manipulation | A Complete JavaScript Course

in the last lecture we implemented the functionality of calculating the Emi and payable amount for a loan request for a given duration there when the user enters his requirement in the form and clicks on calculate Emi button we are showing the result using browser built-in Alert model window so let's go to vs code and let me show you that here if I go to Emi calculator there if we enter some amount a duration and an interest rate and when I click on this calculate Emi button it is going to show us the Emi as well as the total payable amount inside this alert window which is provided by browser now instead of showing the details in the browsers built-in alert window like we are doing here let's say we want to create our own custom Alert model window and display these details there so whenever this calculate Emi button will be clicked we will show a custom model window where we will display this Emi and the total payable amount let's learn how we can do that for that what I have done is in this index.html file I have added this HTML so this HTML is going to display a model window in the UI for example if I remove this hide CSS class from here and if you save the changes the model window will look something like this okay and when this okay button is is clicked we want to hide this model window and in there we want to display the monthly Emi and total payable amount now initially when the page loads for the first time at that time we don't want to display this div we don't want to display this model window for that I was using this hide CSS class which I have created which will hide that model window so if I go to style.css there we have this hide CSS class where we are setting the display to none so whenever this hide CSS class will be applied on on any HTML element it will not be displayed in the UI and that's what we are doing here initially when we are going to render this HTML in the Dom at that time we are not going to display this div and this div is going to display a model window in the browser now what we want is when this calculate Emi button is clicked at that time we want to display that model window so we are going to write the logic in our JavaScript code where whenever this calculate Emi button is clicked we are going to access this div from our JavaScript code and from this div we are going to remove this hide CSS class and in this div we also have this button so when the model window will be displayed there we will have this okay button and when that button will be clicked again we will add this hide CSS class on this div in order to hide it from the Dom all right so so we are going to do that from our JavaScript code now before that just keep in mind that this div is outside of this main section area div from where we are removing these sections so this is the first section this is the second section and this is the third section so if you remember in our script.js file we we have a method we have this render selected section method so when this method is getting called what we are doing we are clearing everything from the main section area and the main section area is this div inside which we have these three sections so we writing this HTML outside of that div so when this HTML page will be rendered in the Dom at that time this div will not be removed from the Dom the objects created for this div and its child elements will be there in the Dom okay so just remember that this div here it will be available in the Dom when this HTML page will load for the first time so let's go to script.js file and let's create a function so here we have this calculate Emi function after that let's go ahead and let's create a function and inside this function we will write the logic to display the model window as well as hide the model window and let's call this function show model you can name it anything inside this function what we are going to do is we are going to access this div which we are using for creating the model window and for that the class is model overlay let me go ahead and let me give an ID on this div and let's call it maybe calculate Emi model okay and we going to use this ID to access this Dev elment so let me copy it from here let's go to script.js and in here let's create a variable let's call it model div you can name it anything and then we are going to use document. getet element by ID method because we want to access that div using its ID so for that we are going to pass that ID and this is going to return us this div we are assigning that div to this variable now in order to show this model window in the Dom all we have to do is we have to remove this height CSS class so if I remove this height CSS class from here you will see that that model window is being displayed here right so let me go and let me add it so all we have to do is we have to remove this hide CSS class dynamically from our JavaScript code for that on this model div we are going to access class list property and from the class list property we are going to remove hide CSS class and that's it let's go ahead and let's call this show model from within this calculate Emi let's save the changes let's go to our Emi calculator and there let's enter some amount a duration and interest rate and when we click on this calculate Emi button all right it is showing this alert window and after that it is showing our custom model window so I'll comment this line here okay and now if we click on this calculate Emi it is going to show that custom model window now currently in this custom model window we are hardcoding these amounts but we are also going to change it in a bit but now what I want is when this okay button is clicked at that time I want to remove this model window from the Dom basically I want to hide this model window from the Dom and for that all we are going to do is we are again going to add this hide CSS class back to this div currently in order to display this model window we have removed this height CSS class but in order to hide this model window we are going to add this hide CSS class now when do we want to add that height CSS class to it for that here let's go ahead and let's try to access this okay button so for that okay button here we have that button and it has a class close model button so let's copy this class name let's go to script.js and after this function the first thing which we are going to do is we are going to access this okay button for that I'm going to use document. Query selector because this time we want want to select this button element using its class name and the class name is close model button and since we are using the class name let's also use dot here so this is going to return us this button element and on that button element I going to use add event listener method this should be listening to click event on that button and whenever the click event happens we want to execute some Logic for that I'm going to pass an anonymous function here and what we will do inside this function we will again access this calculate Emi model basically we will access this div and on that we will simply add this height CSS class so I can go ahead and I can write the same logic inside this function so what error do we have here okay it should be function all right so again we are accessing that Dom element this div and now instead of removing the height CSS class we are going to add that CSS class so whenever this button will be clicked on this model div we are adding the hide CSS class in order to hide it from the Dom let's save the changes now let's go to Emi calculator there if I click on this calculate Mii button it is going to display this alert window this custom model window and now when we click on this okay button but it is going to hide it if I click calculate Emi it is going to show it and when we click on this okay button it is going to hide it all right now what we also want is when we are displaying this model window there we want to display the actual calculated Emi and the actual payable amount currently these values are hardcoded here as you can see these values are hardcoded here so what I'm going to do is on this TD I'm going to add an ID and let's say ID is calculated Emi cell so this is a table cell so I'm calling it calculated Emi cell and same thing let's do on this TD so there also we are going to add an ID but we'll call it calculated payable amount cell okay now let's go ahead and let's access these two tables cells from our script.js file so in here before displaying the model window let's go ahead and let's access those two cells for that I'm again going to use document. get element by ID method there let's pass the ID which is calculate Emi cell so this is going to return us this cell okay and on that cell we want to set its t next content and what do we want to set it to so first of all I want to show a dollar sign and to that I want to append the calculated Emi so that we have inside this Emi variable so what we will do is here we will take a parameter let's call it Emi and we'll also take another parameter payable amount so here we are going to display Emi and in the same way let me copy this line and let's also move this text content to a separate line so that it will be more readable and here we want to display payable amount so this time we will access this cell this table cell with this ID calculated payable amount cell let's pass it here and there we want to display the payable amount okay now when we are calling this show model there we are going to pass the Emi as well as this payable amount and that should be displayed in the model window now so with this let's save the changes let's go to Emi calculator let's enter some amount let's enter duration let's enter interest rate maybe 10.5 and let's click on this calculate Emi button and based on that the em has been calculated and just to prove this let's go to index.html and let's see if these values are not same as the hardcoded values as you can see these values are different so basically the CMI has been calculated by the calculate Emi function and this payable amount is Al also calculated by calculate Emi function and those values we are displaying here and when we click on this okay button it is going to close it if I change the amount here to maybe 30 lakh now if we calculate the Emi you will see the values are different all right so in this lecture we learned how we can display a model window a custom model window using JavaScript now here what we have done is we already had this HTML which we are using for displaying the model window so we already had it all we are doing is we are simply setting a CSS class on this div dynamically from our JavaScript code but in the coming lecture we are also going to learn how we can create a custom model window or any other HTML element dynamically using just JavaScript that we will learn in one of the coming lectures but before that let's learn how we can read the value of these form controls so that is the next thing which we are going to learn in our next lecture this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 270

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: nzwoJHyta3w

Length: 14min 14sec (854 seconds)

Published: Fri Jul 05 2024