Get this alert so let's add some text over here I'll just type live blogger and let's click on this generate button and here we you can see we have.
The barcode displayed for live blogger so we will create this barcode generator in this video let's get [Applause] [Music].
Started right here I have created this folder called barcode generator and I just opened it with vs code let's create the necessary file so let's create a new file called.
Index.html let's create another file called style. CSS and let's create one more file for the JavaScript let's name it main.js let's start with the index.html file and VSC you can just.
Body now for creating this barcode generator we're going to use a library called JS barcode so let's search for that so you can just Google for JS barcode CDN and and you'll find this.
Link of cj.com so let's open this and let's copy this link from here so we have the CDN link over here JS barcode all MJS so let's copy this script tag from here and.
Let's paste it over here just before this script tag right now if you go to the official website of this Library so here we can see the link and this is the official website of.
JS barcode and uh here we can see how to use this library and here we have this example so what we need to do is we need to create an SVG and we need to give it an ID or a class and we need to use this.
JS barcode function and then we need to pass the class or the ID that we have for this SVG and then we need to enter the value so in place of this value we will add our input field so this is the.
Posts Related:
- DAX for Power BI Part 1 - Getting Started with DAX for Power BI
- FULL VIDEO How To Design A Draggable Contact Form For Blogger Website BlogSpot
- How To Design A Responsive Portfolio Website Using HTML, CSS & JavaScript Part 10 BlogSpot
Basic structure and then we have another
Examples over here so here we can change the format of the barcode so this is another format called Pharma code and then we can change the color of the.Lines we can change the width height and all these things over here now there are a lot of options that we have for this Library so if we go over here to docs and if you scroll down here we can.
See that we have the barcode so these are the different options that we can add for the format so for example if I open this Pharma code we can see that this barcode is used in pharmaceutical.
Industry and uh we have another barcode over over here so this one is for MSI so you can set the barcode format to MSI for this to work so you can go and check all these out and these are the options.
So width height format display the value so here we can see we have the value displayed so you can go and check all these out and make changes to your barcode right now let's go back to our.
Uh code and let's start writing the markup of our design first of all let's create a container Division and let's give a class of barcode container and in that we need to have a heading so.
I'll just create an ed2 and let's type barcode generator and after this let's create an input field so we will have the type set to.
Text and uh let's add a placeholder and let's set the placeholder to enter text or number and let's also give it a class so that we can access it in JavaScript so let's give a class of barcode input.
And then we need to have the button so for the button let's give it a text of generate barcode and let's also give it a class so that we can access it in JavaScript.
So let's give it a class of generate
BTN and then lastly we need to have the SVG for displaying the actual barcode so let's create an SVG and let's give it a class of.Barcode so that's basically it with the HTML of our design so let's open this in our browser and let's see how it looks so if you go to extensions here we can see that I have already.
Installed this extension called live server so if you have the extension installed you can just right click in the HTML file and click on open with live server and here we can see we have.
The content displayed in the browser now let's go and style this so let's go to the styler CSS file first of all let's select everything and uh let's set the Box sizing to border box so that we have.
The correct width and height for all the elements and let's add some styles to the body first of all let's add the background color of f4 F4 F4 and let's set the height to 100 vport.
Height and let's remove the default margins and uh let's bring all this content to the center so I'll just type display of grid Place items to the center and uh now we can see that.
Everything is in the center now let's go ahead and add some styles to the barcode container so let's type barcode container and let's set the font family to boto.
Sensor and uh let's set the background color to white let's add a padding of 32 pixels and let's set the Border radius which is rounded Corners to 10.
Pixels let's add a box Shadow and let's set the values to 0 0 10 pixels rgba 0 0 0 and 0.1 and uh let's set the width to 90% of the screen and we'll also add the max.
Width so let's St Max width and let's set the max width to 900 pixels and let's set a fixed height and let's set the height to 424 pixels now let's go ahead and set the.
Display to flex and flex direction to column and let's add a gap of 8 pixels and let's also align items to the center right now let's go and style this H2 so.
Let's T barcode container H2 and let's set the font size to 32 pixels and let's set the margin bottom to 8 pixels right now let's style this input.
Field so we have the input field with the class of barcode input so let's type barcode input and let's set the padding to 12 pixels top and bottom 24 pixels left and right.
Let's set a margin of 10 pixels and a width of 100% and let's set the font size to 16 pixels right now let's style this button so for the button we have this class of.
Generate BTN so here I'll just type generate BTN and let's set the padding to 12 pixels top and bottom 24 pixels left and right font size of 16 pixels cursor to.
Pointer let's set the background color to Red let's set the color of the text to White and I we just remove the border and let's add a border radius of 10.
Pixels now let's also add the horror effect so let's type generate BTN colum hover and let's set the background color to de 0 606 so now we can see we have the horror.
Effect now for the actual barcode which is the svz that we have over here with the class of barcode let's add some Styles so let's T barcode and let's set a margin top of 20.
Pixels and let's add the max width to 100% and let's set the display to block so with that we have completed our styling now let's add the functionality so for that let's go to the main.js file.
Now first of all let's reference the generate BTN button so let's tap const generate BTN equals document. query selector generate.
BTN and now let's add an event listener to this generate BTN Sol step generate bn. addevent listener and let's listen for the click event now when we click on this generate BTN button we need to.
Generate the barcode so I'll just create a function for that let's call the function generate barcode code and let's create the function over here const generate bar.
Code now in this function we need to first of all get the value of the input field so let's St const input equals document. query selector and we have a class of barcode input for.
That and let's get the value of it so let's have value and first of all let's go ahead and see whether we have any value in that so let's tap if input do trim is not equal to blank so if.
There is any value in that then we need to generate the barcode or else let's go ahead and add an alert so here I'll just tap alert please enter a valid text or number to generate a barcode now this.
Stream will basically remove all the extra spaces that we have at the beginning and the end so now let's go ahead and type J is barcode and let's reference the element.
Which has a class of barcode so let's tab do barcode and for the second argument we need to provide the input which is this input constant over here and then we need to pass some options so.
Let's create an object and let's set the height to 100 and let's T display value and let's set it to true and let's see whether the barcode is being being.
Generated so let's go back to our website and let's add some text over here let's click on generate barcode and here we can see we have the barcode being generated and everything is.
