Complete CRUD Operation with IndexDB Database - JavaScript Project

everyone welcome back to daily tuition in this tutorial we're going to understand how to create crude operation using index DB database we want to make create read update and delete data using index DB database we will achieve this using javascript functional programming so in this tutorial you gonna learn how to create functions in JavaScript modular way now let's see what we are going to create in this tutorial so in this tutorial we're gonna simply create this HTML template where if you have this electronic store title then we have few input tags where we have the ID of the product the product name the Siller and the price and just after that here we have four buttons each button represent their own functionality the create button will insert the record in the database using read button we can read data from the database using Update button we can update the existing data and using dilt button we can delete all the records from the database now let's see how this application work right now we don't have any data in this database that is why you're not gonna see anything in this table now to insert the first product I'm going to just pick C by the product name here so I'm going to say mi LED smart TV and then specify a sailor named through comm retail and the price is going to be two 99.99 right and just click on this create button to insert this product in my database when i click on this create button you can see this message data inserted successfully right and you have your data in your database now to replace the database you can click on this red button as well now to insert the next value I'm going to specify the next product name here and you can see you have two here because we are going to insert our second value so you can see we are uniquely identify our each product with this ID so I'm going to insert my second product and name this product Philips cordless trimmer and the seller is going to be retail date right and the price is 45 point 99 and to insert this product in your database just click on this create button when you insert that you can see you have your product in your database now let's say I want to update this second product so I'm going to click on this edit button right here so in the text box you can see you have your product values now I want to update the product name so I'm going to just specify here BTN 1212 alright and just get rid of this 15 and now to update this record just click on this Update button so when you click on it you can see data updated refresh your database to refresh your database just click on this red button right so you can see your data is updated successfully now let's say you want to delete your record you can delete these by clicking on this Delete icon as well now let's say I want to take my first product to delete that I've got a click on these t8 button so when I click on this delete button the first record is deleted like this right and now if you insert your next product so I'm going to specify the product name send its class for 16gb pendrive and then I will specify a seller which is perfect electronic and the price is going to be 25 point 99 and if I click on this create button you can see you have this message here and your product is inserted in the database with ID 3 now let's say you want to delete all your products at once and start inserting your product from the ID 1 for that I'm going to click on this delete all button when you click on this button all the records from the database is deleted so if I click on this delete all button you can see all the records is deleted and you can see a message no records found in your database and the ID is going to be one here because you don't have any data so the ID will start from one so stay along with me with this amazing journey now let's jump into the tutorial to see how to create this amazing clewd operation with index table database so before we're getting late let's get started now to create your electronic store application just create indexeddb empty folder and just open this empty folder in Visual Studio code now once we have this for in widget area code let's create a new folder and name this folder source and in this folder we're gonna create two files so we kind of first create here index dot HTML and the second is going to be style dot CSS now in index dot HTML file I'm going to first create a simple html5 boilerplate so I'm going to just first add here exclamation mark and press Enter so this will create a simple html5 boilerplate with viewport title and the body right so I'm going to just get rid of this title and just paste if I hear electronic store right and just off that I'm going to link this style dot CSS file to style this document so I'm going to say here link and just specify the current path so I'm gonna say dot forward slash so this part refers to the current directory and then I'm gonna say style dot CSS if you have this file in order folder you specify double dot and the forward slash so this expression refers to the root directory right I have this file in the current folder so I'm going to just say here dot forward slash to create this application I'm using both strap so we need to link bootstrap to this application to do that open your browser and in the address just say get both trap click on this get post reverb side you can locally download this bootstrap framework or you can use CDN I am using CDN so I'm going to just click on these get started button and just talk to that copy the CDN and paste it in the head right here just before this style dot CSS file right and just after that here we have these J's files from gonna copy these Sirians and paste it just before the closing body tag right here save the changes now once you turn that you have your bootstrap in your application now you can use any booster classes in this application we use bootstrap to glorify the HTML elements right now just after that I also want to use icons you this application so I'm gonna get help from the font awesome website so I'm going to open the browser and just open a new tab and just say Pond awesome right and from this website you can get your free icons right just click on this start using free and just copy this CDN and just paste this again right here in this header tag right now you can use any free icon from this aunt asan website just click on the icon and here you can see you have thousands of pre icons available to use in your application right we're not going to use all but heels some of them just after that right here in the body section I'm gonna first create here a division time and just specify a class container there is another way to create a division tag with the class container let me show you if we just say here dot container then this will create a division tag with the class container right this is a simple way now just talk that in this container I'm going to create here h1 heading time and space of our text electronic store alright save the changes and now just open this file in the browser so we just right click here and say open wait live server if you can't see this option then make sure you install the live server extension then you will see this option here right so just right click here and say open with live server so now you can see your application is running on five thousand five hundred port right I will just close this up and just after that I want to add some booster classes to this h1 heading tag so I'm going to say here class and add BG like so this will add the background light color and then I'm gonna specify padding Y this will add top and bottom padding for and then I will say text info so this will specify light blue color to this text Save Changes and you can see this type of result now I want to Center this electron store text here so for the container I will specify a boost applause Tech Center save the changes and you can see the text is centered on the document now before this electronic store I'm gonna add an icon so I'm gonna just open this font Ahsan website and search here luck I want to use this icon here so I will click on it and to use this icon in your HTML file just copy this HTML code and paste it anywhere in the body so I'm going to paste here just before this electronic store text right here alright save the changes and now you can see you have your plug icon here right now just out of that to perform create update and delete operations I'm going to just create here a division tag and specify deep flex class so this will specify display flex property to this division drive in this division - I'm going to add form tag and specify a class with 50 so this will specify with 50 to these form tag I'm going to get rid of this action attribute and just off that in this form I'm going to first create input tag so I'm going to say input type text all right so this will create input type text here I will get rid of this name attribute and specify ID user ID right and just off that I will say a class here and just specify form control poster class just talk to that I was specify place holder which is ID and I don't want to say cookies of these input tags so I'm going to say here autocomplete 'off all right save the changes and if you open this file you can see here you have this ID here now I want to Center this text box so I'm going to specify here justify content center so this will Center this text box right now just after that I will just duplicate this input tag some phone just press shift alt down so this will duplicate this input tag and I'm going to specify ID product name and then specify placeholder product name save the changes and now you can say you have to input tags ID and the product name now just after that here I'm gonna just create here a toe and in this row I have a column so I'm gonna say call here now in this column I'm going to create this input tag so I'm going to copy this and paste it here and just specify ID sailor and the placeholder is going to be sailor alright save the changes and you can see you have these text box here and just after that just after this first column just after this column deal right here I'm going to create another column and just copy and paste the input tag again and just after that I'm going to specify ID price and the product name placeholder became price right so you can see you have two input tags on the same line so we have two columns here in the first column we have the seller input tank and the second column we have this price input tag just out of this deal right here I'm gonna create I'm gonna just add here a command and say create update the bead and delete button right now here I'm gonna just fall skate here d-plex class so I'm gonna say dot d-plex and I also wanted to specify just if I content central class I will specify dot here and say just define content center right now just talked that I will create here a button and specify Clause BTN BTN success and then I will say here a text create save the changes oops I think specify here - and we'll get rid of it so now you have your button here right now I want to specify ID for this button so we can access this button in JavaScript easily so I'm going to say ID BTN create right I'm going to just duplicate this button using shift alt down and then change this ID to read BT and drill and then change this success to primary and the text is going to be read all right save the changes and you can see you have create and read button here just off that I'm going to duplicate this button again shift alt down and then specify BTN warning and the ID is going to be BTN update and the text is update I'm going to duplicate it again and specify text delete all and the ID is going to be BTN delete and I will specify booster class BTN danger one save the changes and you can see you have these buttons but now I want to add some margin and padding to these HTML elements so I'm going to just open mine style dot CSS file right here now we will first turn these input tags so I'm going to say here dot d flex and select all input tags and just specify margine 0.9 am and zero here so this will add top and bottom margin to this input tags alright so you can see here we have the additional margin so I'm going to remove it so I'm going to just open the index dot HTML file right here for this input tag I'm going to remove margin zero so I'm going to specify margin zero booster applause to these input tags now just stop that back to standard CSS file and right here I want to specify some style to these buttons so I'm going to just say deep Lex and select all these buttons I want to for specify margin trowel say margin 1.5 VM and just off that I will say 0.6 cm margin sales changes and you can see this will add some margin to this to these buttons all right and just talk to that I want to add padding here so I will say patty 0.3 here and 2.4 yeah so this will add padding to these buttons all right now I want to specify a unique ID for my every product so I'm going to specify read-only property to this text box so no one can change this value so I will just back to my index dot HTML file and for this ID I'm going to just say here read-only so now you can see you can see this value but you couldn't change it right so using this technique becomes specified unique ID for my every product alright now I want to add here a table so we can fetch all the data from the database and display them right here some can just open the bootstrap and just click on this component so I'm going to search here table and right here you can use any table so I'm going to use this table so I'm going to just copy this code to clipboard and right here I'm gonna create a container and just paste this code here alright save the changes now I want you to add some March into this table so I'm going to just open style dot CSS file and just say here container table and I want to specify margin 1 a.m. and 10 p.m. Save Changes and then an index dot HTML file I will specify the Flex class to this container all right so you can see you have your table here now I will just change these headings so I'm gonna just get rid of this hash and say ID the second heading is going to be product name and then I will say here sailor and get rid of this handle and say price I will just say shift alt down and just basic I edit and just say here did it alright save the changes and now you can see you have your product ID product name the similar name price of the product edit and delete section now let me provide some data to this edit and this delete column so in the Edit column I'm going to specify edit icon and for the delete column I'm going to specify delete icon so we'll open my index dot HTML file and right here in this data I'm going to create a tag table data and here I want to add edit icon so I will add a tag and in this tag I will create a class and specify Edit icon class name to create edit icon I'm gonna say here pass and a edit you can find this class in Pontus on website so this class will create edit icon in your table right save the changes and you can see here you have your edit icon now I will just specify the custom class here and I will say here media and edit so using this class we can access this edit icon right just after that I'm going to create table data and I will add here I tagged with the class France F a crash-up right so this class will create delete icon in our HTML file right save the changes we have this delete icon right now I'm going to specify here a custom class I will say BTN delete so now using this classes we can access these edit and this delete icon right so I'm going to save these changes and open mine style dot CSS file in this file I will fall select the table I want to specify style to the edit button so I will say dot BTN edit and I'm going to specify here color light green and cursor:pointer alright save the changes you can see the color of this icon is light green and when you hover on this icon you will get the cursor:pointer right now I will just change the color of this delete icon so I'm going to just select this icon using table not BTN delete and I will specify here color tomato and cursor:pointer save the changes and you can see here you have this icon here right open the index dot HTML file now let me add this icon for the second and the third wall and just copy these two lines and paste it here alright so you're gonna get these icons for these three flows right so now your design is ready now let's move on to the JavaScript section where we create a new database to store card items so we're gonna use index TV database to store car items so what is index DB database index TV is a large scale know a scale storage system it lets you store just about anything in your user browser keep in mind it only allows you to store anything in your local browser right index DB is a low level API for client-side storage for significant amount of structured data including files I have a video on index DB database where I taught how to create index DB database and store values with plain JavaScript but in this video we're not going to use plain JavaScript to create index DB database instead we're gonna simply use a minimalistic wrapper for index DB cover Dixie using Dixie API you can perform different operation in straightforward way now let's understand how to use Dixie API to create crude operation we will achieve true operation using functional programming we're gonna create functions in modular way and perform crude operation so basically we create a module and create different function in that module and use that functions in our main JavaScript file now let's open a new tab and type Dixie cerium right so from the first website you can get your Dixie Syria and from the Dixie dot org website you can see the Dixie API right just click on this get started in thirty-second and here's your Dixie API right so we're gonna use this Dixie API to create update delete and read database values right so now just open the CDN right here and just copy these Dixie dot mean dot J's and I'm going to copy this script so I'm going to say here copy script tag and just after that fist this scrape right here alright just after these script tags right here and I'm going to come in here and say Dixie API right save the changes now I'm gonna create a new folder in my project so I'm going to just deselect this source folder and just create a new folder and name this folder Jess so in this J's folder I'm gonna put different JavaScript files right so I'm gonna force create here main dot J's file and then I'm gonna create module dot J's file where we add different functions right so I'm gonna just say here module dot J's right and now just link this main dot JS file to this index dot HTML just after this API just after this script right right here so I'm going to create a comment here and just say custom JavaScript main dot J's and just create a script tag with source attribute and specify the toolpath directory and main dot JS file now if you order to use module in your application you need to specify type for this script so I'm going to say here type module so now you can use import keyword to import any functions from these module dot JS file you will see that after a few minutes right just specify type module save the changes now let me first create my first database using Dixie API so I'm going to just open my main door JS file and right here I'm create an instance of Dixie class like this if I just open this API you can see here if you wanted to create a database you need to create here Dixie instance and then call the store method and create your table right so I'm going to just open my main door J's file and here I'm going to just say here v8 database and just create here constant database so i'm going to say constant DB is equal to new Dixie and just pay to find my database name here so I'm gonna say here my DB just after that I'm gonna call this instance so I'm gonna say DB dot version and just specify one here and then call the store method and just after that call the stores method now this method takes an object so I'm gonna specify curly braces here and just specify my table name so I'm gonna say here friends and just PC PI my columns so I'm gonna use backtick operator and just say name and age right so now we just created a new database name these Maya database oops I need to remove this in this database I have this friends table right and just talked to that I'm going to just open this database so I'm gonna say DV dot open right save the changes and now if you open your application and right click here and say inspect just navigate to application you can see here you have this index DB database here and you have this my DV database right in this database you have trains table you're not going to see the full value because it is the keypad right so you have this name and this age value so this is just an example how to create a database so I'm going to just delete this database so I'm gonna just click on this database and just say delete database right delete this one as well and just close it now if you use this technique to create your database then what if you want to create two database then you need to repeat these steps again so I'm going to put this code in the function so we can use that function multiple times right so what I'm going to do is I'm going to just cut this code and put this code in module dot J's file right here but before I paste this code here I'm going to just create here a function so I'm going to say constant product DB and specify an arrow function here in this function I'm going to just paste this code here right and if I just say here export default and specify the name of your function so I'm going to just copy this name and paste it here so now you can use this function in Maine dot J's file like this if I save these changes and if I just say here import product DB from and if I just specify the path of my module dot J's file like this you can access that product DB function like this if I just say here product ep so now if you execute this file you can see you have your database here right now just delete this again and for T if I want to change the name of my database then I need to open this model dot J's file and change this name from here but this is not the best way to create a function so I'm going to create a pure function to create this database so i'm going to just comment this code like this and just say here constant DB and just create an instance of dixie class right now in this parameter I'm not going to specify this hard-coded value because I want to create a pure function but let me first explain for this pure function in pure function you're not going to use the external variable value and also not going to specify hard-coded values just like this in this code you use hard-coded values which you cannot change when we call this function so for that if you wanted to create a pure function I'm going to specify here a parameter and just say here DB name and specify this parameter in this Dixie constructor so I'm gonna say DB name here so when we call this function we will specify this hard-coded value as an argument right now just our dad let me create a stores so I'm gonna say DV dot version and just call this store method now you know that this method takes an object of your table name and the table columns so we're not going to create here an object instead we will just create here a parameter table and just base it for that parameter here so when we call this function I'm just specified this database name and just specify the object and specify these table values and just talk to that and just cut this code and paste it here right and just return these database so I'm gonna say here return DB right so we can access this database save the changes and if you open main dot J's file so now when you call this function you need to specify arguments so the first our domain is going to be the database name so I'm gonna say here product DB so this is my database name and just talk to that I'm gonna specify a second argument which is my table so this is an object so I'm going to specify here at curly braces and just specify here products this is my table name and specify columns so I'm going to first specify the ID so I'm gonna say plus plus ID so I'm going to specify here incremental value ID so in this column we can install automatic generated ID the first ID is going to be 1 the second is to third is 3 and so on right so the ID will increase itself by 1 now just talk to that I'm going to specify this next column which is name then I will say sinner and the price so now if I save the changes and open my application you can see here oops I think something's going wrong go outside property and define oops I poked with something yes here neo cure so whenever you create instance of the class you need to specify new keyword right so I'm going to specify new save the changes save this file as well and if you open your database and if you open this you can see here you have product TV database which has values price name and the seller right now we know that this product DV function return a database so we can use this database throughout this file so I'm going to say here let DV is equal to so in this DB variable I have this product DB database right now let me show you how to insult the data in this database so I'm going to first create variables and get these input tag boxes and these buttons so I'm going to just say here input tags and just be it here constant user ID is equal to document dot get element by ID and just specify default stings box ID so I have here you know that ID of the post text box is user ID right so I'm going to use that here and specify that in these parentheses right so I have this text box in this variable so I'm going to say shift alt down so this will duplicate the line change the variable name to grow name and the ID is going to be cloning then I'm going to say here Saylor and the ID is going to be seller and the last we have price and the ID is also price right so now we have this 4 tick boxes now let me bring these buttons here so I'm going to say here buttons and just say constant VT and create document dot get element by ID and just specify the ID of my first button so I'm gonna say BTN create right so this is my ID of my first butter this one right now I'll just copy the statement and just create here BTN read variable and just change is create to read duplicate this statement again oops begin read/write and I'm gonna just specify BTN update and this ID is going to be update and I will just specify here BTN delete and this ID is going to be Dilek alright so now we have these four text boxes and these four buttons now let me show you how to insert values using these big boxes so I'm going to just create an event for these create button so I'm going to just say here a comment and say insert value using Create button and just call this BTN create variable I'm going to say VT and create dot on click event so I'm going to use unclick property here and specify a function to this property so we're going to just specify this event handler to this onclick property so when you click on this pattern I'm going to execute this function right now to this function I'm going to specify event parameter now to insert values in the database I'm going to create a pure function so I'm going to open this model dot J's pyro and fight here just after this function I'm going to create here insert function alright just peace my name for this function so I'm going to say constant bulk d8 all right and just specify an arrow function now to insert values in your database you need to specify your database table name and call the bulk add method alright so what I'm going to do is so I'm going to just specify here an argument and say here DB table so when we call this function we're gonna specify table name as a parameter right now just after that this book add method take array of objects so I'm going to specify here a day and just specify an object but I'm not going to specify hard-coded values here instead I'm going to specify here a parameter so I'm going to create here a new parameter and say data right and I will specify this data in this well add parentheses right so when we call this function will specify the table name and the data which we wanted to insert in this database right now I'm going to create a validation for the textbox if the user link to text box as it is and does not specify any value in the text box then I don't want to insert any value in this database for that I'm going to create here evaluation so I'm going to say here check textbox validation all right so I'm going to create a function constant empty and specify an object parameters I'm going to say object right in this function I'm going to say a late flag is equal to false and then I will create foreign look so I'm going to say for constant value in object so I'm going to specify this parameter here if in this object we want to get the value parameter from this object and then I will say if object value is not equal to empty and object dot has own property value then I will say flag is equal to true else I'm gonna say flag is equal to false alright and just return this flag so I'm going to just say here return flat right so this flag will return true or false right now if you specify value in these three text boxes then this will return true otherwise return false now in this bowl create function I'm going to call this empty function so I'm going to say empty and just specify this data parameter here so I'm going to say data here now this function return value so I'm going to get that value using lead flag and just take a flag then I'm going to just store these values in this database and just bring the message on the console so I'm going to say CTL and just print data inserted successfully all right and then I will say else if user do not specify anything I'm gonna say the CGL and specify on the console please provide data all right and just return this plaque so I'm going to say return flag and now to use this bill create function we need to export that function so I'm going to say export and in the curly braces I'm gonna say bulk create so I'm going to copy this function and paste it here alright so we can use this function in main door Cheers from garages say here import from module and create here a curly braces and in this curly braces I'm going to specify bulk create don't forget to specify comma here right now let me access this function so I'm going to say here in this click pattern event I'm going to just call bulk create and specify DB call my database dot and then specify your table name so I'm going to say products alright now don't start to that you need to specify a data which you want to insert in your database so the second parameter will take an object so I'm going specify curly braces and specify my data so I'm gonna fall specify knee because the first value of my table is new this one you don't need to specify this ID because the ID is auto increment so you don't need to specify any value for this first parameter because we specify Auto increment value for the first parameter right so I'm going to specify name right here then I will specify value for this I'm going to call this pro name textbox so I'm gonna say here roni dot value oops value right just stop at that I'm going to specify OMA here and just call this seller parameter this one right and just specify Saylor dog value the value of the seller input text box then I'm gonna call this price I'm gonna say here price and just say price dog value save the changes and now I will get this value return from this function so I'm going to just say here left flank equal to and just print this value on the console so I'm gonna say cgl flank now if you open your console you can see unexpected open so oops I need to remove the semi-colon probe here save the changes and now if you click on this t8 pattern you're gonna get a message please provide data because you did not specify anything in these tech boxes if you specify here Pro 1 and click on this create button you can get the same message if you specify the seller by daily and click on this create button you can get the same value and here you specify the price like this if I just stay here for 4.99 and if you click on this create button you're gonna get data inserted successfully and you can get to here right and if you inspect your database you have your data right so you have your product name the seller name and the price in your database and once we insert these values I will visit this day box so I'm gonna just specify here just after this console I'm gonna say Pro name dot value is equal to this the empty string right and then I will say sailor dot value is equal to empty string and the price Lord value is equal to empty string but you can see to reset your text boxes this will take three statements I'm going to show you the simple way to create I'm going to show you the simple way to restate this text box value so I'm going to just comment here and here I'm gonna say groaning dot value is equal to sailor dot cardio is equal to price dot value and then I'm going to specify the equal value to empty string right now this single statement is equal to this three statement isn't it simple it is it's very simple right now just after that I want to specify ID for my product now let's say if I have one product in my database I will display two here in this ID section and if I have three records in my database I will display for in this text box ID so basically I want to display the next value which will insert to do that I will count the number of rows in the database and just specified value to this text box for that I want to get a data from the database I'm going to create here a function in main dot J's file so I'm going to say constant gate data and create an arrow function here alright and in this database I'm going to first create a variable let index is equal to zero like object obj is equal to curly braces so I'm going to create and blank object here what I'm going to do is I want to count the dough's in my database I will just say here TB dot products then I will call count method and in the parentheses I will call function and in this function I will specify parameter count and using this parameter how many rows are there in your database let me show you if I just say here CGL console dot log and just say here count and just call this function in this on click event right here if I just stay here and get data save the changes and if I just comment here for this console dot block and open my console and if you click on this create you will get one because we have one record in my database so this method will return one because we have one here because we have one product in my database this one right once we know that how many cars are there in my database I can say here if count DB dot products dot each so what is each method each method will return data from the database so in the parentheses of this each method I will specify function table and I'm going to get this value so I'm gonna say here cgl table so this will return object let me show if I save this and if I click on this create you're gonna get the product values right so you have your database values now you can see here if we have this ID parameter at the last I want to short this array and specify this ID first name second seller third and price fourth so I'm going to short this object so what I'm going to do is I will just create a function here so I'm gonna say constant chart obj is equal to and specify a parameter so I'm gonna say short obj all right now in this function I'm gonna say let opj it's equal to parenthesis so I'm going to create simply empty object here then I would say obj is equal to ID and then specify value so I'm going to say short obj dot ID name short obj dot name sinner short oh beak short obj dot sealer and price short obj dot price and then just return this object so I'm gonna say return obj save the changes and here what I'm going to do is I will just call this a short object function so I'm going to say chart object and specify this table variable here so I'm gonna say table here and get this object in this variable so I'm gonna say Oh V J here right now if I just say here CGL and print this object on the console you will understand the difference between these two objects save the changes and if I click on this create we have the ID first second we have this name third we have this sinner and both we have this price right I want this object right so I will get rid of this console and this console now what I want I want to convert this function into pure function and in higher order function for that I'm going to cut this code so I'm going to cut this function and this function and paste it in module dot J's file right here alright and I'm going to create a comment here and say get data from the database all right and just specify here a command and say chart object now I want to convert this function into pure function for that I'm going to specify here a parameter database table and just get it out this table name and just say here DB table I will get rid of this table here as well so I'm gonna say DB table so when we call this function I will specify DB products as an argument right now just stop that I'm going to convert this function into higher-order function so what is higher-order function a higher-order function is a function which has a function as an argument so in the second argument I'm going to specify function so we can access this function when we call this a data function let me show you how now if I just say here I'm going to call this function right here like this and specify parameter object and I want to specify this index as well so I'm gonna get this value so I'm gonna just say here index plus plus so now here what we had done we just call the second parameter function in this get data function so when we call this gate data function we can access this parameter value right now just after that if we don't have anything in this count variable I'm gonna say else function 0 so we're gonna return nothing right save the changes and if I just open main door J's file and just specify here DB dot products and in the second argument if I call function and specify here data if I print this data on the console and specify data here we can get the data based radios on the console but before we call this function we need to import that function first so we will first export this function from this module so I'm going to just copy this function name and just specify in this export statement by specifying comma and you specify export data now just import the statement for that I'm going to just specify here comma and say get data alright so now you can access this get data function in your main door J's file if I save the changes and execute my application when we click on this create button you're gonna get this data ID name seller and the price right now from this data I only want the ID so I'm gonna get this ID using dot ID like this right so I have one here so now when we have this data ID I can specify this ID to these ID text box like this so if I just say here user ID dot value is equal to theta dot ID and save the changes if I click on this create you have one here but you know that I have one record in my database so I need to specify here too so I want to specify here too because we have been inserting our second value so what I'm going to do is I'm going to specify here plus 1 so this will print two in these ID text box if I click on the create this will print two here right now if I just delete this database like this and we load the application and click on this create you're gonna get not a number because we don't have any decode in my database for that I'm going to specify an operator here and just specify one so if you don't have any decode in your database this will return one so if you execute your application and click on this create you're gonna get one here now let me just close these extra tabs so I'm gonna close this tab right now just after that now we know that how to get data from the database and display them in the text box now the time is to display this data in your database tables right so here you can see we have this demo data I want to display my database data and they stable so I'm going to create an event for these red button right so I'm going to open my main dot J's file I'm just gonna get this BTN red button and create on click event on this button so I'm going to just say here create event on BTN read button right now to create an event I'm going to say BTN red dot on click so I'm going to just call on click property of click event right and then specify a function now if I just specify a function for this property then I can't use this function code multiple times so I'm going to just get rid of this function and specify a reference of the function so I'm gonna say here table right so this is a function which we are going to create so I'm going to just create here a new function so I'm gonna say function table we're not going to specify any parameter so I'm going to just specify the body of this function so I'm going to open index dot HTML file and I'm going to first get rid of this demo data right so I'm going to just add a comment here right now if you open your application you can see you don't have any data right now right now I want to get the data from the database and display them in this table so what I'm going to do is I'm going to create these tags in the table row table data and table head using dynamic JavaScript so what I'm going to do is I'm gonna create all these tags and this demo text using javascript I'm gonna create all these tags dynamically now you can see we just add command and disable all this demo data so you can see we have nothing in this table data we need to add this data from the database we don't know how many rows are there in my database so we need to know first how many rows are there in my database that is what we're gonna create this table data dynamically the only way to display all these database records in this table is using dynamic nodes I'm going to create dynamic nodes using Java scape and append these nodes in this database table let me show you how you can do that so I'm going to just open my main door J's file and here it is table I'm gonna create dynamic node for that I'm gonna just say here let TD is equal to document dot create element and I want to create table data tag so I'm going to just specify here double call and say table data so this statement will create a volted attack now if I just say here console dot law and print this table data then you can see on the console if I click on this 3d button you have this table data right so using JavaScript you can create all these HTML tags one by one but using Java Script if you wanted to create all these tags it became time-consuming so when you create your data you need to append this data in your parent node like this I'm gonna just create here constant the body is equal to document dot get element by ID and just specify ID here so what I'm going to do is I'm going to open HTML file and just specify here ID tbody alright save the changes and I'm gonna get this table body right here so I'm gonna say T body here right so we have this table body in this T body variable now if I just stay here console dot log and print this table body then you can see we have two tags here the table body and these table data right now I want to append this table data in this table body for that what I'm going to do is I'm going to just say here table body Lord append child so this is a method to append child in the parent node so I'm going to obtain this table data this table data in this table body right so I'm going to just specify here in this parentheses table data alright save the changes and if you execute it you can see we have this table data in this table body right here right now if you take a look at this code then to create only one tag you need to write 3 or 4 line of code right so it becomes very time-consuming so instead of using this technique I'm going to show you a simple way to create your dynamic elements so I'm going to get rid of this for statement say okay changes and now I will back to my module dot JS file and I'm going to create here a function which is create element so what I'm going to do is I'm going to say here is constant create element right now I'm going to specify a function here so I'm going to just specify the auto function for this create element and just to here create dynamic element alright now just after that I'm going to just specify here two parameters to this create element function the first parameter is going to be tag name and the second is going to be AB and - now now using force parameter we're going to create a new node and the second parameter is going to append the new node right now now I'm also going to create another parameter which is function you know that if a function return a function as a parameter this function known as higher-order function right create here a higher-order function and in this function what I'm going to do is I'm going to just create here a constant element and then specify document dot create element so this will create a new element and I'm not going to specify the hard-coded value here instead I'm going to specify this tag name here so I'm going to just say here tag name right right so when you call this function I'm going to specify the tag name here so this will create that element and store that in this element variable now your element is created now we want to append this element in the parent node so what I'm going to do is I'm gonna just say here if if we specify this append to parameter then I just want to say append to dot append child and then specify the element so I'm gonna say here element right and then I'm gonna just say here if if I specify the function parameter then I will say function and specify element here so we can access this element using this function so we just call this function here so when we call this function we're gonna access this element right by specifying this function just export this function so I'm going to just copy this function specified comma here and say create element right now I can use this function here so before I use it I need to false import that function so I'm going to just specify here comma and say import create element right now I can create this element easily like this if I want to create here table data but I'm gonna just say here create element the first argument is going to be the tag name so I want to create table data so I'm going to say table data here right and then specify where you want to append this table data I won't open this table data in this table parent right so I'm going to just here body and if you want to access this table data then you can specify here a function so I'm going to just specify a function and specify a parameter table data so now using this table data parameter you can access this table data so I'm going to just say here a CGL this will create console dot log and say table data so now if you save the changes and execute your application and if you click on this read you can see you have this table data and now if you clean the table body using console dot log then you can see you have this table data in this table body right so you have this table data here so it's very easy to create and open this element using a function right so I'm going to just get rid of the statement before I create any dynamic element we need to first get the data from the database so you know that we have get it a function to get this data from the database so I'm going to call get data function here in the first parameter I'm going to specify the table name so I'm going to say D P dot products and the second parameter is going to be a function so I'm going to specify here data so this parameter will return the object of the data so I'm going to just see here C GL and print this data all right so if you click on this red button you can get 0 here so this function will return zero because we don't have any records in my database let me check the records so if you open your product or DB you can see you don't have any records so we need to create a record for us so I'm going to just create here a new record so I'm going to say product 1 name of the seller I'm going to say here daily and the price is going to be 59.99 and if I click on this create you can see this message data inserted successfully right so if you click on this red button you're going to get this data alright once we have this data we can create our dynamic node and put this data in that node right so I'm going to just get rid of the statement I'm going to say if we have data if you have the database records then I'm going to create table row here so I'm going to say here create element and I want to create table row like this all right so I'm going to first create here they will row and then add table data with database values so I'm going to just say here they will grow and then I'm gonna specify where I want to append this table row I've also opened this table row in this table body so I'm gonna say table body and I can access this table row using a function parameter so I'm going to say here table row and call the function right so this table row is a parameter so I can access this table row in this function now once we have this row I'm going to just iterate this data so I'm going to just call for in loop here so I'm going to say for in and just specify a constant variable value and specify object data all right so I'm going to just get rid of this is and in this for loop I'm gonna say create element and now I want to create table data I want to append this table data in this table row so I'm going to say table row here right because you know that we appended this table data in this table row right that is why we specify here table row I want to open this table data in this table row so I'm going to say here table data the second parameter is going to be table row and then I can access this table data using a parameter so I'm going to say table data and call a function I want to specify a data for this table data node so what I'm going to do is I'm going to just say here table data dot text content he is equal to data value so this for loop will iterate on this object and specific values to these texts contain property right if I save the changes and click on this read you can get your data here right so you have your one load up knee and the seller and the price right it's very simple now what I want to do is I want to add a dollar symbol here so the user will know type of currency so I'm going to specify here a dollar symbol for that I have a condition so I'm going to just get rid of this data value and I'm going to figure data dot price if the data price is equal to so I'm going to just say here strict assignment operator and then say data value if this data price is equal to this data value then I'm going to just call the if and else shorthand operator so I'm going to just say here question mark and then in the practical ATAR I'm going to specify the dollar symbol all right and to display this data base values I'm going to specify dollar symbol and the curly braces now in this curly braces I will say data value all right and if the condition becomes false I want to return data of value all right save the changes and if you click on this red button you can see you have this dollar symbol before this currency right like this now what we had done here so using this create element function I'm going to create table row and just after that I'm going to get the data from the database and iterate that data so this for loop will iterate four times because we have four object properties so this for loop will execute four times and when this for loop executes four times this will create for table data nodes right so if you have a full table data nodes we're going to specify the database values to this table data right now just after that I want to add here an edit icon and the Delete icon I want only one edit icon here and only one till it icon here so just after this for loop right here I'm going to call create in demand function in this function I want to create table data like this I want to create a table data and append this I tagged with the icon class right I will do the same with this delete icon as well I'm going to just create here table data I want to append this table data in table row so I'm going to say here table row this one right and then I'm going to just say here table data and just specify a function now in this table data I want to add a tag for that so I'm just going to say here create element I want to create a tag so I'm going to say here I and then I want to append this attack in table data so I'm going to say table data here and just specify a function once we have this I die I'm going to specify a class to this attack so I'm going to say here I dot class name and just want to add multiple classes to this attack to do that I'm going to specify here plus sign and specify equal to so this will add multiple classes to this attacks I'm going to specify here class fast if a edit and I also to specify this class name BTN edit all right so I'm gonna say here BTN Eddie now if you click on this wheel button you can see you have this edit icon right now I also want to add this delete icon here so I'm going to just copy this code and paste it here and just change this class name to France if a crash hold and then specify BTN delete class if I save the changes and click on this weird button you can see we have this delete button here right so it's very simple to create dynamic data using a function isn't it now let's say if we have two records in this database so if I just create here another record row 1 and specify seller electronic and the price is going to be for 4.99 and if I click on this create button so this will create a new record and the database and if I click on this red button I want two records here right if I click on this 3d button you're going to get more than two records you can see here we have this duplicate records so before you insert any data in this database we need to remove default data for that I'm going to remove on Guti charles from this table body and then add this table data so what i'm going to do is I'm going to just say here why you table body has child nodes then I'm going to check if this table body has channel node then I want to remove all that channels so I'm going to say here they were body dot remove child and I'm going to remove all the child's so I'm gonna say here table body dot first child right so this loop will iterate until all the child's has been removed right save the changes and if you click on this field button you will see you have these two records if you click on this red button again you can get the same result all right so this will not add duplicate values in this table data isn't it great now we know that how to create and read data from the database now let's see how to update these data from the database now what I'm going to do is when we click on this edit button I want to display all these database values in this tank boxes so I'm going to just create here on click event on these edit button all right so I'm going to just create here so I'm going to create on click event on this attack so I'm going to say here dot on click is equal to and specify a function so I'm going to say here edit BTN alright so this is a function so I'm going to just create here a function so I'm going to just say here function edit BTN right now just after that I'm going to specify event parameter to this function so I'm going to say event here now using this even parameter you can access the targeted element like this if I just say here CTO and just create console dot log and say event dot target then you can get the targeted element on the console if I save the changes and just click on the suite and click on this edit button you got to get this attack on the console point now what I want when I click on this edit button I want to return this ID the one ID and when I click on this second edit button I want to return this ID so what I'm going to do is I'm going to specify data attribute to this edit button like this if I just specify here I dot set attribute and then specify data attribute like this data - ID and I want to specify ID here which is data dot i D so what I'm going to do is I'm going to just get the object data and I want to specify property ID for these data attribute right if I save the changes and click on this edit icon you're going to get data ID 1 if you click on the second edit button you're going to get data ID - right now once we have this data I can display all this data in these text boxes let me show you how you can do that I'm going to just take it off the statement in this function I'm going to call get method of Dixie API using this get method you can get the data of the specified ID like this if I just security B dot products and call the get method and if I specify here 1 then this will return the data of my forced ID like this cg.o and specify data here if I click on this feed button and click on this edit icon this will return the data of ID 1 if you specify here 2 then this will return the data of this second ID if I click on this edit button this will return the second ID data now what I'm going to do is I'm going to first get the element like this if I just say here is CGL and just say event dot target so I'm going to first get the targeted element and I want to get this data attribute of this target element so I'm going to just specify here data set dot ID so this will return the data attribute value this one right save the changes if you click on this post edit button this community turn this ID right if you click on this second one this kind of return to this one why I'm gonna get rid of this console now if you click on this edit button you're gonna get one if you click on the second edit button you're gonna get the two ID right now just after that I'm going to just copy the statement and create here let ID is equal to event dot target dot data side dot ID right so we have this ID in this variable now if I just say here a cgl console dot log and check the type of this ID using type of keyword and if we just click on this ID you can see we have this one of the type string I don't want this one of type string I've warned this one of type integer I'm going to convert this string into integer so I'm going to get rid of this statement and say parse int in this function I'm going to specify event or target dot data set dot ID so I'm going to say here is CTL and print this ID and if I check the type of this ID you see we have this one of type number now I can pass this ID right here so if I just say here console dot log and bring this data I'm gonna get rid of this console and if you click on this ad button you're gonna get ID with data now if I just click on this edit icon of the second ID you're gonna get the second ID data here if I click on this first ID we're gonna get this first ID data here now I want to display this data in these steak boxes so what I'm going to is I'm going to get rid of this console dot log and just specify here user ID dot value so I'm gonna just get the text box and specify value property data dot ID and if we don't have anything I'm going to return 0 right then I will say product name dot value I'm gonna get this product name tick box and specify value property data dot name and if you don't have anything I'm gonna return empty string just talk to that I'm going to say sailor dot value is equal to data dot sailor and if you don't have data in distiller I'm going to return empty string and at the last I'm gonna say price dot value is equal to theta dot price and if you don't have anything I'm going to return empty string save the changes and if you click on this edit button you're gonna get these values in these take boxes like this all right it's very simple isn't it now you can update these values using this Update button now let me show you how to update these values using this update button now to update these values I'm going to create on click event on this update button so you know that we had already created this button right here BTN update so I'm going to get that button post so I'm going to just create here an event I'm going to just create here a command update event and just base if I hear BTN update and just call on field property of this button and just specify and handler function here so I'm going to specify a function here right now in this function I'm going to first get the ID from these textbox so I'm going to just say here user ID dot value and store this value in the variable so I'm going to say here constant ID now what if I don't have anything in this user ID so for that I'm going to just return 0 if I don't have anything in this user value now you know that this statement will return a user ID but the type of this ID is string so we need to convert this ID to number so I'm going to schedule of the statement and call pass end and just specify here user ID dot value and the default value 0 right if I have ID then I'm gonna say here I'm gonna call a Dixie update meter so the Dixie update method is look like this I'm gonna call the table name so I'm going to say DB dot products and just call update method of Dixie API right now this method takes two parameters the first parameter is going to be the ID of the record so I'm gonna just say here ID and then the values which you want to update some one space over here an object now what I want to update I want to update all these tick boxes values so I'm going to say here nee product name dot value then I will say sailor sailor dot value and I will say price price dot value so we're gonna get these values from the stake boxes and specify to the database properties now just talk to that I'm going to say here dot then I'm gonna call the promises here and just say here then specify a parameter updated if the value is updated I'm going to just specify message on the console so I'm going to say here that care is equal to updated if this value is updated then this will return true otherwise return false so if the value is updated then I'm going to say data updated or if the values are not updated then I'm going to say here we don't update data all right and just off that I'm gonna say here console dot log and print these gate data right save the changes and if I click on this feed now I want to update this second ID so what I'm going to do is I'm going to just click on this edit button product one to product 2 and when I click on this update button you can see we have a message data updated right and if you click on this vid but on again we have this product to here so now you note on how to update data using index DB database now let me show you how to delete data from index DB database so I'm going to show you two methods to delete data from this database one by clicking on this delete button and second by clicking on this delete all button if you want to delete a specific row or a specific data you can delete these by clicking on this delete button and if you want to delete all the records in your database you can delete it by clicking on this delete all button so I'm going to first show you how to delete data base record manually so when you click on this delete button I want to delete this specific record so I'm just open my editor now what I'm going to do is I'm gonna create event on these VT + Delete icon for that I'm going to just specify here I dot on click is equal to and specify a function so I'm gonna say here delete median and now I also want to specify data attribute to this icon just like this alright so I'm going to copy the statement and paste it here so when we clear this Dilek icon I'm going to pass this data attribute to this icon so we can access this data ID using this data ID attribute alright save the changes now let's create this delete BTN function so I'm going to clear this function right here and say function delete BTN now in this function I'm going to pass event parameter so I'm going to say here event and then I'm going to get the ID from the data attribute of this icon so I'm going to say here let heidi is equal to and just convert this ID into number so I'm going to say here pass in and just specify here event dot target dot data set dot ID right so using this statement we're gonna get the ID from the data set attribute and then convert this ID into integer and then store it in the ID variable now once we have this ID I have a delete method to delete these specific record so we have this delete method from Dixie API so what I'm going to do is I'm going to say DV dot products dot delete so you can access this method using Dixie API so I'm going to specify here ID parameter to delete the specific ID all right and then I want to update this table so when we click on this button I want to update this table so I'm going to just say here table and I'm going to update this table save the changes if I click on this weed button and I want to delete this second row so I'm going to just click on this delete button you can see the record is deleted and now if you create a new record if I just say here product tree and specify a sailor and apply is this gonna create a new record with id3 right so you know that how to delete record using this Delete icon now let me show you how to delete all the cards at once so I'm going to create event on this delete all button now to delete all this record at once I'm going to create on click event on this delete button so I'm going to open this up and right here you know that we have this VT and delete variable so I'm going to exit this VT n delete variable right here so I'm going to say here delete records and just say beta n delete dot on cake and specify a function so I'm going to say here and handler function and then just delete the database so when you delete this database this will remove all the records from the database and return create a new database instantly so I'm going to just say here TB not delete so using this thinit method we can delete the database and then we're gonna create it again so I'm going to say here DV is equal to and let's call this product DV function so I'm gonna copy this statement first it here alright so what we have done here we just deleted the database and created eat again and just off that just open these database right and then just update this table so I'm going to just call table function to save the changes now you know that you have two records in this table if we click on this delete all this will delete all the records from the database all right now if you click on this red pattern this will return nothing now we know that how to create read update and delete records from the index DB database but now I want to add few more features in this application what I want I want to display the ID when we reload this page so when the user open this application I want to display the default ID here now to specify ID in this ID take box I'm going to create here window dot onload event so I'm gonna say here window onload event so I'm going to just say here window dot onload and specify an event handler here now in this onload event I'm going to call a function so I'm going to create here a function name this function on text ID and specify a parameter textbox ID right now when we call this function I'm going to specify the textbox ID as an argument now in this function I'm gonna call get data function now this gate data function will return the data from the database so we know that in the post parameter we're gonna specify the table name I'm going to say TP dot products and into second I'm going to specify data so we can access this data using this data parameter so when we have this data what I'm going to do I'm gonna say text box ID the auto value is equal to theta dot ID I'm going to specify the data ID property value to this text box for the property and then if we don't have anything in this data ID I'm gonna return one and you know that when we have to record in our database I want to display here the next record ID so I'm going to just space over here plus one and just call this function in this onload event so I'm gonna say here text ID and then specify the user ID here ranked Save Changes alright so you can see we have a one here because we don't have anything in my database if I add here product one and specify price something 44 point 99 and create a new record you can see we have two here and if you reload your browser you can see you have two value here now let's see if I delete my old record by clicking what is delete all button if you click on this video turn it does not show anything so I need to specify a message here that says no record found or that I'm going to open index dot HTML file and in this deal right here I'm gonna create a division time and specify ID not found we're gonna specify text using javascript so I'm going to save this as it is and in the main dot JS file in this table function we know that if we have data I'm going to execute this statement and if we don't have anything I'm going to say here else and here I'm going to first get these not found a deal so I'm going to just create here a variable so I'm gonna say not found and just to hear it constant not found is equal to document dot get element by ID and specify here not found right now once we have this deal right here in this variable I can say here in this ill statement not found dot text content is equal to no record found in the database all right save the changes if I click on this red button oops I think something is going wrong let me check the HTML file I have done its big mistake here I'm going to say here not found and save the changes and if I click on this red button you're going to get here no way got found I want to display this right here so I'm gonna cut this T and paste it right here if I click on this button you're gonna get this message no record phone all right now if I wrap this division tag in a container like this and then if I just say here take Center then you can see this message right here if I click on this red button you can see here no record found in the database alright now just after that when I create a new record I want to display a message on the top right here when I click on the update I want to display a message on the top right here and when I delete all the records I want to display a message on the top so what I want to do is I want to display a message when I create update and delete records so I'm going to just back to index card it file and just after this day right here I'm going to create three days so I'm gonna say here Dave and specify a class to this day I'm going to first specify width 100 so this feels place if I bid hundred to this division tag and then I'm going to specify booster class BT and BT and success and specify a custom class insert MSG right and then the text is going to be data inserted successfully right I'm gonna duplicate this deal and then specify BTN warning and the text is going to be data updated refresh database to see result I'm going to duplicate this dip again and change the preteen warning to danger and change the text to data delete it now I'm going to change this custom class as well so I'm going to say here delete msg and update msg right save the changes open main dot JS file and by tear in the create on click event right here I'm going to just first call the table function to update the data when we create a new record then we'll just call here table function right and right here I'm gonna say let insert msg is equal to document dot query selector and then I'm going to select and salt msg all right now when we have this division tag I'm gonna create a function to insert and remove classes to this division tag to create beautiful animation now let me show you what type of animation I want over the style dot CSS file and right here I'm going to just create a comment here say message I'm going to just select this insert msg then I will select update imaging and then I will select delete mmHg right and just specify a property position to these tears right so I'm going to specify here position absolute and tone property 0 oops I think something is going wrong here you specify insert mhg right we have this all thieves on the top now I'm going to specify here minus 40 pixel so this deals disappear and when we reload the page I want to display all these dips I'm going to create here a keyframe so I'm going to say here keyframe slide up and I'm going to specify keyframe on 50% and say here top property is going to be 0 and when the animation is 100% I want top property minus 40 again right and I'm going to call this animation right here so I'm going to say and mission name of my animation which is slide up specify the millisecond someone says 3.4 second and the easing function so I'm going to say here is save the changes so you can see here the message right now I want this type of any mission when I click on this create update and delete button I want to remove and add this property from this insert image ative I'm going to just get rid of this property and just create here a new class move down and then specify here and mission slide up 3.4 second is right so I'm going to just open main dot J's file and here I want to create a new function so to create a new function I'm going to create this function in main dot J's file so I'm going to just write this function here and just specify this function name get msg and specify two parameters the first parameter is going to be fly and the second is element now if we have true value in the flag and want to execute the if block so if we have true in this fly I'm going to say in am and dot class name and just append a new class move down and then if we have this class to this element so I'm going to remove this class after for second so I'm going to say here set timeout function and I want to remove this class after four seconds somewhere specified for second time here so I'm going to say 4,000 millisecond and just say element dot class list dot for each so I'm going to call for each method here so this class list will return an array of the classes of this element and when we have this array I'm gonna eat create this array one by one so I'm going to just space over here class names so we have class names in this array and I want class name is equal to mow down now if the class name is equal to move down this class name so I'm going to check if the element has this class I'm going to return undefined or I'm gonna just remove this class so I'm going to say element dot class list dot remove all right and I want to remove this move down class so I'm gonna say move down right save the changes and just call this class here in this insert statement now here I'm gonna just call this function so I'm gonna say get msg and specify a flag so I'm going to say here flag and the element is going to be insert msg right now now know that we created this black variable right here so if the value is inserted this function will return true to this black variable right so if we have true in this variable this will insert move down class to this deal right now save the changes and now if I add a product here so I'm going to say a product 1 and specify a price and click on this create button you're gonna get this type of message data inserted successfully right oops I think something is going wrong on one 62 line so if I just take out here 162 right here you can see I have added here a space remove it I'll just do it again if I create here go to to electronic sailor and the price is 44 point 99 if I click on the speed button you can see we have this data inserted message now if I click on this button and update any values like product one and click on this Update button I want to display here a message so what I'm going to do is in the update event right here on this BTN update on click event I'm not going to print any message on the console instead what I'm going to do is I'm going to say leg get is equal to if the data is updated I want to return true or return false right and now here and now here I can say let update msg is equal to document dot query selector and here I can call update MHD deal so I'm going to say update msg right now just after that I'm going to call get msg function and just specify get here and the second argument is going to be update imaging right save the changes and if you can see if I update anything if I update this product to pro 1 and click on this update you can see you have this message later updated refresh the database like this alright now let's create this animation on delete all button I'm going to just open the button delete on click event and right here I'm going to say light delay msg is equal to document Lord query selector and just specify here delete msg so this will return the division time of deleting machine and then I'm going to call get mhe function so I'm going to say get msg and the fourth parameter is going to be a true or false value so I'm going to say here true and then I'm going to say delete msg right Save Changes and if I click on this delete all you're gonna see here a message if I click on this deal at all you can see here data deleted all right when I click on this delete all I want to update this ID I'm going to call just here just after this table I'm gonna say text ID which is a function which we had created earlier and then specify user ID here say okay changes and you can see if we have this one here if I add here new record and create a new record and you can see here data inserted successfully and if I delete this record you can see the value became 1 right so you have no records in your database now let me show you what we had done so far now let's reload the application and create a new record so I'm gonna say a product 1 space by a sailor so I'm gonna say daily and the price is going to be 4 99.99 and just create a new product so this will create a new product with the message and data inserted successfully now let's create another product so I'm going to say product - with daily electronic seller and the price is going to be $2.99 and press create to create a new record alright so this will create a new record here now let's say I want to update this daily electronic to just electronic so I'm going to just click on this edit icon and just created of this daily and just click on these Update button so now you can see this message data updated refresh the database so I'm going to click on this video time so this will update this database and you can see here we have this electronic now I want to get rid of all these values when I click on this update button so what I'm going to do is I'm going to just open the on click update event and when we insert data I'm going to get rid off all the textbox values I'm going to just copy this statement here we have product name drug value zero value and the price value so I'm going to copy and paste it here save the changes and you can see if I update this value to electronic daily and when I click on this update button the tick box value is gone and you can see you have this updated data so now if I want to delete this post record when I click on this button the record is deleted like this right now if I want to delete all my record and funds I can click on this delete icon like this if I click on this tilt all this will delete all the record and start a new record from one alright you can see this message data deleted and the next record start from one that's it now if you have any question you can ask me any time it takes a lot of effort to clear this tutorial don't forget to like this video subscribe it and don't forget to share this video with your friends that is all for now I will see you in the next tutorial [Music]

Channel: Daily Tuition

Views: 78,625

Keywords: Complete CRUD Operation with IndexDB Database - JavaScript Project, How to create CRUD operation with IndexDb Database, create indexdb database operation, make indexdb database crud operation, CRUD operation, Indexdb database, JavaScript Indexdb Database Tutorial, Database Tutorial, Indexdb, make, tutorial, how to, understand, what is, indexdb, learn, javascript, project, daily tuition, create, update, read, delete, operation

Id: pcelNF8Ckhk

Length: 105min 21sec (6321 seconds)

Published: Thu May 02 2019