Complete CRUD Operations using JavaScript with CSS & Html

[Music] welcome to the learning city in this video i'm going to develop basic grad operation form using javascript css and html before going to do the implementation i just want to show you the quick demo how this project is working in here you can see there's a four input field including product code product name quantity and the price so once you click the submit button those input value goes to the right hand side table and you can edit and delete this any of record so now let's move on to the implementation path this is my jscribe folder in here i need to create three files html file css file and javascript file first i will create a index.html file to do my form implementation as usual in every html file i starting from doctype followed by html and their closing bracket inside that i open a head tag and inside the head tag i open another title tag which i used to place my page name in my case it is cred operation now let's move on to the body part in our html i first start from the table tag because i want to put my form inside the table [Music] now i open athera tag which indicate the row and open td for column and after that i place my phone inside that now let's add our label and input field to this form [Music] label name is product code [Music] so now i'm going to create the relevant input field for that label [Music] likewise you can do the same thing for other field also [Music] copy along with the new tag and change the label information and input field information [Music] at the bottom of the form i add two button one for the submit and another one for the reset [Music] now i open another column and inside that i open table tab this is the place i'm going to place my output value once i click the submit [Music] button and here i only mentioned the table heading [Music] let's copy and paste and change the heading name [Music] [Music] [Music] now we are almost cover the basic thing in the form now i'm going to add a few thing to my form let's uh add the autocomplete as off in the form [Music] and also on subfit event i name it as a on form submit so this function i will be implement in my javascript file later on let's add few more class which help me to design my form [Music] now let's open style.css file it's just nothing but a simple css style concept we can use for the form designing thing let's move on to that part before that i want to add my background image to this folder i forgot to add at the beginning of this video all right [Music] in here i'm just adding my background image url and i just want to it not to be repeat on that interface therefore i adding no repeat [Music] [Music] and i set this image as a cover now let's design the table including width margin and the background color [Music] after that i will do the designing for table this part [Music] [Music] so in my column i separated each column using a border [Music] now let's do the design in for each row in my table list [Music] now let's design input text and number [Music] in here i just want to change the quantity and the price type into number not the text [Music] [Music] after that do the designing for submit and reset button [Music] let's add our design for submit and reset button [Music] [Music] finally same button design i apply for my edit and delete button also [Music] just like the reset and submit button i am adding same hover design info button also [Music] now let's see how does it look like [Music] well still my style.css doesn't apply let's see why here i need to add my style.css link to my html file [Music] so now let's refresh it and see yes here we go now we are complete the designing part of the form let's move on to the javascript implementation part where i will complete the crowd operation [Music] in my script.js file first i mentioned the onset form function [Music] and also i declare a global variable called selected row which i use for my lateral implementation [Music] now i am going to implement a function to retain the data [Music] here i define a variable called form data i am going to push my html element id into this object i can call it using document.getelement by id and the input field id name likewise you can do the same thing for other field also [Music] so at the end of this method i want to return this form data before moving to the next function implementation i will give you a brief idea about get element by id and get element by tech name when we are doing some particular manipulation using html element that element id we can use as a reference in our javascript file so that is about the get element by id when we have more than one element to be called at that time we can use stack element by id so in there the same concept is applied but we are calling that tech name in our javascript file now i'm going to implement my insert record function [Music] first i define an object called table in here i am using that expect concept to show the input value in the table [Music] and i am adding tea body tag in my index.html to show my input value [Music] after that i define another variable to add new row [Music] so it goes up to the table link that's why i add table dot length every time when i add new record to the table the table length increment by one now i'm going to create variable for each element in my form the first cell would be product code and their index number is zero [Music] [Music] likewise i can do the same thing for my other three html element also [Music] now i'm creating another cell for my edit and delete button in table list [Music] so now let's do the test run to check whether it is work or not [Music] once i click the submit button those values pass to the url so now what i want to do is to take those input value into my table now call insert new record method inside on form subfield function in here i am using prevent default method to stop the default action in the element [Music] in this part i add insert dual echo [Music] for the s part i keep it blank i will add it later on the implementation [Music] and don't forget to add script.js file into index.html [Music] finally i need to add another two function which are on edit and on delete to complete the grad operation in on edit function i pass one parameter because i want to edit a particular row detail which indicate using td parameter this selected row is a global variable i declare at the beginning of this video using this variable i can get selected some particular row [Music] to populate the value into the input field once i click the submit button to do that i can use this concept along with each set [Music] likewise i can apply the same thing for other fields [Music] so once i did the edition in relevant field i want to set that updated value into my table so do that i want to implement another function called update record so in here i'm using a parameter form data [Music] in here i want to mention each cell index and their id [Music] so now i'm calling this on edit method inside my edit button [Music] [Music] [Music] on delete function i starting from the confirmation message if the confirmation is yes then delete the record [Music] first i want to store the corresponding row inside this td and then after to delete the relevant row i want to mention element id [Music] call delete draw function and inside that i need to add relevant stories index once i delete the record the four need to be reset for that i am adding reset function here [Music] and i'm calling reset form method inside the on-delete function also [Music] now let's compare our else part which is update record and finally reset the form now let's add the record to the phone and see how is it working [Music] okay edit also working let's check the delete button why it doesn't work let's check the code here i need to call on delete method [Music] okay i covered almost everything related to the crud operation using this phone if you have any doubt related to this you can check the source code i mentioned the github link in the description below so guys until my next video see you there [Music]

Channel: LearningZity

Views: 12,156

Keywords: javascript tutorial for beginners, javascript, javascript crud, html, css for beginners, css, learningZity, learningcity, source code, beginner tutorial javascript, oshadi godage, how to design form in visual studio code, javascript crud from, pure javascript projects for beginners

Id: MKD0Vsu0Ikw

Length: 25min 39sec (1539 seconds)

Published: Sun Sep 05 2021