Create a Receipt Template for Teams with airSlate SignNow

Create a receipt template for teams

hi friends welcome to T fun Channel today I'm going to teach how to make the simple Inventory management system along with the receip state so here I'm going to enter the uh chair this is a product quantity to price is th click on button here will be star quantity here nice uh CSS style here this is the print receipt you will be able to receip here this has me you have to make it as a receipt so here we have another item which is a toy so price is1 so after that uh we have a uh another one is here fan one okay so here you will be able to see the print reip okay they are have a nice PR CH we have a nice okay the quantity here this are quantity five has display how many quantity you have bought five quti has display five each every time you have buy quantity will be how many quantity here this is a final total so if you have to click print reip here you are into the print receipt page you click click print this receipt has been printed okay very simple things will done using react okay so how to make this application step by step we teach after that you have click cancel here it has been canceling so how to make this step by step we teach first I want to the react application so you go to Google and type white wait click on this with generation content tooling click get started coming out here here click mpm create this one click on this click on this after that what you going to do is I'm going to go to my this here I'm going to create the project okay here so I'm going to create here uh so you have to open the terminal first it press enter key on your keyboard project name I'm going to give us as inventory smallage select as a react select as D JavaScript CD small in when key now I'm going to you have to go based on the instruction so mm I mean it's nothing but installation you wait until the process installation complete for e now it installed successfully you'll be able to see here it installed uh successfully okay so now what you going to do is here sucessfully now I'm going to go to open this project in COD space to open your project now here we have to this SRC this one a app.jsx now here this this is the index. the main page of the project the main file so here this is the single page application in real only the single page is available here it's called the main. jsx you main. jsx in main.js it will be calling the app app app this is the uh HTML file this is CSS file here in react we can me inside the function we have Tri programming logic here we have a design both of you have to done it here we have a CSS you have to attach the CSS so I already done it so I'm going to it over here so I will explain don't worry PR it go here here here this one also I'm going to because if I uh run do it all the things it take more than 1 hour to complete this project okay this is not boring okay so I'll be this all the code I provideed don't worry so this code you can see here this code you get face project okay so reactive State CSS so here we have a we have a what are things of simple form design first you go this is the okay so this is the r invent you can see this heading simple we have a one design inventary class this is the this is nothing but a style this sty here text align Center margin top 50 margin top 15 means 50 align 150 given what happened not this one this you what happened now let's take it coming here okay I need a stock 15 me 50 it will take you to the 50 height okay in between adding and here okay so after that add the item margin bottom 20 margin bottom 20 have to as margin bottom 20 20 okay so here add the item margin bottom so add BM input uh margin 10 input mean this one so after that we have a input box you can see the input box input type uh place this is the add item mean input box input we design like this okay margin right 10 pixel margin right 10 pixel ping 10 front size this is you will be able to type the front size very simple if you write it here this okay okay so after that add button the button style a batter style see it's custom CSS background color this a font size padding this is the this is nothing but up and top and bottom okay so will be Alik okay so here white B none pointer also pointers also pointer means theing the pointer here po okay so this is simple design okay so here this applied this simple form with first text field second text field add item add item mean this one bottom okay so add item so in between the these text boxes simple space so that have ADD it okay so drop the STW okay this a number this all the things are input numbers because based on the calculation will be there so what is the value you entered over here it will be unchange man it will be saved item name what is the value enter item quantity cost what's the cost coming here it's coming here below the table design it's map mapping if you add the item it's mapping so you can see here what's the item you added set set name name will be saved quantity will be saved here will be total cost will be okay so after that what you're going to do is here if you add the items it will be check here item name and item quantity and if you're both coming you have add into you have write items you have write this items name equal items quantity you get the quantity and quantity okay after after that it will be clear X boxes okay that's how we have did it that's how we have did it okay so here item items items mean it's coming and it will be add adding the items okay it's it it should be added name quantity and and cost okay after if you delete it will be I index it will be deleted you got the quantity a quantity we get a quantity quantity calculator final cost will be calculated the final total final total is nothing but this I'll be give you the quantity here final it should be calculated so print it okay that based on this it will be working okay so here you can see the mobile responsive here you can take take you to the mobile responsive so that's the thing you have do so this is a printable SC printable printable design okay so all things are there printable design Okay add the printable table okay so this is the Once you print it this A printable design it will be you have to generat okay after you cancel it it will be reload the page okay this everything is there this is CSS along with cs this all things I put into my uh this is your mobile responsive you can take you to the mobile so all things I put into my website under the under under this video you can get it 10 basic your project and you can try on it this simple way you can just go through go through one line by line you can learn it okay so thank you for watching